Google is committed to advancing racial equity for Black communities. See how.
ترجمت واجهة Cloud Translation API‏ هذه الصفحة.
Switch to English

الشروع في استخدام أجهزة الوسائط

عند التطوير للويب ، يوفر معيار WebRTC واجهات برمجة تطبيقات للوصول إلى الكاميرات والميكروفونات المتصلة بالكمبيوتر أو الهاتف الذكي. يُشار إلى هذه الأجهزة باسم أجهزة الوسائط ويمكن الوصول إليها باستخدام JavaScript من خلال كائن 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 حل الوعد باستخدام MediaStream يحتوي على مقطع فيديو واحد ومسار صوتي واحد. إذا تم رفض PermissionDeniedError يتم طرح PermissionDeniedError . في حالة عدم وجود أجهزة مطابقة متصلة ، سيتم طرح NotFoundError .

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

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

في تطبيق أكثر تعقيدًا ، من المرجح أن نرغب في فحص جميع الكاميرات والميكروفونات المتصلة وتقديم التعليقات المناسبة للمستخدم. يمكن القيام بذلك عن طريق استدعاء الدالة enumerateDevices() . سيؤدي ذلك إلى إرجاع وعد يتم MediaDevicesInfo إلى مجموعة من 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 أو سماعة رأس Bluetooth أو مجموعة من مكبرات الصوت الخارجية. من أجل دعم هذا بشكل صحيح ، يجب أن يستمع تطبيق الويب للتغييرات التي تطرأ على أجهزة الوسائط. يمكن القيام بذلك عن طريق إضافة مستمع إلى 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 getUserMedia() بفحص الأجهزة الموجودة أولاً ثم تحديد قيد يطابق الجهاز الدقيق باستخدام قيد 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>