وتلتزم جوجل لدفع الأسهم العنصري للمجتمعات الأسود. أنظر كيف.
ترجمت واجهة Cloud Translation API‏ هذه الصفحة.
Switch to English

بدء العمل مع أجهزة الوسائط

عند وضع لشبكة الإنترنت، يوفر المعيار يتطلب WebRTC واجهات برمجة التطبيقات للوصول إلى الكاميرات والميكروفونات المتصلة بجهاز الكمبيوتر أو الهاتف الذكي. ويشار إلى هذه الأجهزة عادة باسم أجهزة الوسائط ويمكن الوصول إليها مع جافا سكريبت من خلال navigator.mediaDevices الكائن، الذي ينفذ MediaDevices اجهة. من هذا الكائن يمكننا تعداد كافة الأجهزة المتصلة، والاستماع للتغييرات الجهاز (عند توصيل الجهاز أو قطع)، وفتح الجهاز لاسترداد تيار وسائل الإعلام (انظر أدناه).

الطريقة الأكثر شيوعا هو استخدام هذا هو من خلال وظيفة getUserMedia() ، والتي ترجع وعد من شأنها حل ل MediaStream لأجهزة الوسائط مطابقة. هذه الدالة تأخذ واحدة MediaStreamConstraints الكائن الذي يحدد الشروط التي لدينا. على سبيل المثال، لمجرد فتح الميكروفون الافتراضي وكاميرا، ونحن سوف نفعل ما يلي:

عن طريق وعود

 const constraints = {
    'video': true,
    'audio': true
}
navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        console.log('Got MediaStream:', stream);
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });
 

استخدام المتزامن / انتظار

 const openMediaDevices = async (constraints) => {
    return await navigator.mediaDevices.getUserMedia(constraints);
}

try {
    const stream = openMediaDevices({'video':true,'audio':true});
    console.log('Got MediaStream:', stream);
} catch(error) {
    console.error('Error accessing media devices.', error);
}
 

الدعوة إلى getUserMedia() سوف يؤدي الى طلب الأذونات. إذا كان المستخدم يقبل إذن، حل الوعد مع MediaStream التي تحتوي على فيديو واحد والصوت واحد. إذا تم رفض الإذن، و PermissionDeniedError يتم طرح. في حالة عدم وجود أجهزة مطابقة إتصال، و NotFoundError سيتم طرح.

المرجع API الكاملة عن MediaDevices اجهة يتوفر في MDN مستندات الويب .

الاستعلام عن أجهزة الوسائط

في تطبيق أكثر تعقيدا، ونحن على الأرجح تريد أن تحقق جميع الكاميرات متصلة والميكروفونات وتقديم التغذية الراجعة المناسبة للمستخدم. ويمكن القيام بذلك عن طريق استدعاء الدالة enumerateDevices() . هذا سيعود الوعد الذي يقرر إلى مجموعة من MediaDevicesInfo التي تصف كل جهاز وسائط معروف. يمكننا استخدام هذه لتقديم واجهة المستخدم إلى المستخدم الذي دعونا لهم اختيار واحد انهم يفضلون. كل MediaDevicesInfo يحتوي على خاصية المسماة kind مع قيمة audioinput ، audiooutput أو videoinput ، مشيرا إلى ما نوع الجهاز وسائل الاعلام هو عليه.

عن طريق وعود

 function getConnectedDevices(type, callback) {
    navigator.mediaDevices.enumerateDevices()
        .then(devices => {
            const filtered = devices.filter(device => device.kind === type);
            callback(filtered);
        });
}

getConnectedDevices('videoinput', cameras => console.log('Cameras found', cameras));
 

استخدام المتزامن / انتظار

 async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

const videoCameras = getConnectedDevices('videoinput');
console.log('Cameras found:', videoCameras);
 

الاستماع لأجهزة التغييرات

معظم أجهزة الكمبيوتر تدعم يسد في مختلف الأجهزة أثناء وقت التشغيل. ويمكن ان تكون الكاميرا متصلة بواسطة USB، سماعة بلوتوث، أو مجموعة من مكبرات صوت خارجية. من أجل دعم هذا صحيح، يجب الاستماع تطبيق ويب للتغييرات من أجهزة وسائل الإعلام. ويمكن القيام بذلك عن طريق إضافة مستمعا إلى navigator.mediaDevices ل devicechange الحدث.

 // Updates the select element with the provided set of cameras
function updateCameraList(cameras) {
    const listElement = document.querySelector('select#availableCameras');
    listElement.innerHTML = '';
    cameras.map(camera => {
        const cameraOption = document.createElement('option');
        cameraOption.label = camera.label;
        cameraOption.value = camera.deviceId;
    }).forEach(cameraOption => listElement.add(cameraOption));
}

// Fetch an array of devices of a certain type
async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Get the initial set of cameras connected
const videoCameras = getConnectedDevices('videoinput');
updateCameraList(videoCameras);

// Listen for changes to media devices and update the list accordingly
navigator.mediaDevices.addEventListener('devicechange', event => {
    const newCameraList = getConnectedDevices('video');
    updateCameraList(newCameraList);
});
 

القيود وسائل الإعلام

كائن القيود، التي يجب تنفيذ MediaStreamConstraints واجهة، وأننا تمرير كمعلمة إلى getUserMedia() يسمح لنا بفتح جهاز وسائط يطابق متطلبات معينة. هذا الشرط يمكن جدا تعريف فضفاض (الصوت و / أو الفيديو)، أو محددة جدا (الحد الأدنى الكاميرا القرار أو معرف الجهاز المحدد). فمن المستحسن أن التطبيقات التي تستخدم getUserMedia() API أولا الاختيار الأجهزة الموجودة ومن ثم يحدد القيد الذي يطابق الجهاز المحدد باستخدام deviceId القيد. كما إذا كان ذلك ممكنا، يتم تكوين الأجهزة وفقا لالقيود. يمكننا تمكين إلغاء الصدى على الميكروفونات أو مجموعة محددة أو الحد الأدنى العرض والارتفاع من شريط الفيديو من الكاميرا.

 async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Open camera with at least minWidth and minHeight capabilities
async function openCamera(cameraId, minWidth, minHeight) {
    const constraints = {
        'audio': {'echoCancellation': true},
        'video': {
            'deviceId': cameraId,
            'width': {'min': minWidth},
            'height': {'min': minHeight}
            }
        }

    return await navigator.mediaDevices.getUserMedia(constraints);
}

const cameras = getConnectedDevices('videoinput');
if (cameras && cameras.length > 0) {
    // Open first available video camera with a resolution of 1280x720 pixels
    const stream = openCamera(cameras[0].deviceId, 1280, 720);
}
 

وثائق كاملة عن MediaStreamConstraints ويمكن الاطلاع على واجهة على مستندات الويب MDN .

محلي التشغيل

مرة واحدة تم فتح جهاز وسائط ولدينا MediaStream المتاحة، يمكننا إسناد ذلك إلى الفيديو أو عنصر الصوت لتشغيل تيار محليا.

 async function playVideoFromCamera() {
    try {
        const constraints = {'video': true, 'audio': true};
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const videoElement = document.querySelector('video#localVideo');
        videoElement.srcObject = stream;
    } catch(error) {
        console.error('Error opening video camera.', error);
    }
}
 

وHTML اللازمة لعنصر الفيديو نموذجي استخدامها مع getUserMedia() وعادة ما يكون سمات autoplay و playsinline . و autoplay وسمة يسبب تيارات جديدة المسندة إلى عنصر للعب تلقائيا. و playsinline السمة تسمح الفيديو للعب مضمنة، بدلا من فقط في وضع ملء الشاشة، على بعض متصفحات الجوال. فمن المستحسن أيضا استخدام controls="false" للتيارات حية، إلا إذا يجب أن يكون المستخدم قادرا على إيقافها بشكل مؤقت.

 <html>
<head><title>Local video playback</video></head>
<body>
    <video id="localVideo" autoplay playsinline controls="false"/>
</body>
</html>