اختيار الكاميرات والميكروفونات ومكبرات الصوت من تطبيق الويب

Sam Dutton

تتيح المتصفّحات الحديثة اختيار أجهزة الإدخال والإخراج، بما في ذلك الكاميرات والميكروفونات ومكبّرات الصوت.

على سبيل المثال:

  • على الهاتف، اختَر الكاميرا الأمامية أو الخلفية.
  • على الكمبيوتر المحمول، اختَر مكبّرات الصوت الداخلية أو مكبّر صوت متصل عبر البلوتوث.
  • لإجراء مكالمة فيديو، اختَر ميكروفونًا أو كاميرا داخليَين أو خارجيَين.

توفّر واجهة برمجة التطبيقات MediaDevices كل هذه الوظائف، وهي واجهة يتم عرضها بواسطة navigator.mediaDevices.

تتضمّن MediaDevices طريقتَين تم تنفيذهما في الإصدار 47 من Chrome على أجهزة الكمبيوتر المكتبي و Android: enumerateDevices() وgetUserMedia().

اختيار جهاز إخراج الصوت

enumerateDevices()

تعرِض وعدًا يمنح إمكانية الوصول إلى صفيف من عناصر MediaDeviceInfo للأجهزة المتوفّرة.

تشبه هذه الطريقة MediaStreamTrack.getSources()، ولكن على عكس هذه الطريقة (التي لم يتم تنفيذها إلا في Chrome)، فهي متوافقة مع المعايير وتشمل أجهزة إخراج الصوت. يمكنك تجربة ذلك من خلال العروض التوضيحية أدناه.

في ما يلي بعض الرموز المبسّطة قليلاً من أحد العروض التوضيحية:

navigator.mediaDevices.enumerateDevices()
    .then(gotDevices)
    .catch(errorCallback);
...
function gotDevices(deviceInfos) {

    ...

    for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    var option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
        option.text = deviceInfo.label ||
        'Microphone ' + (audioInputSelect.length + 1);
        audioInputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'audiooutput') {
        option.text = deviceInfo.label || 'Speaker ' +
        (audioOutputSelect.length + 1);
        audioOutputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'videoinput') {
        option.text = deviceInfo.label || 'Camera ' +
        (videoSelect.length + 1);
        videoSelect.appendChild(option);
    }

    ...

}

بعد استرداد أرقام تعريف الأجهزة المتاحة باستخدام enumerateDevices()، يمكنك استخدام setSinkId() (المحدّد في Audio Output Devices API) لتغيير وجهة إخراج الصوت لفيديو أو عنصر صوتي:

element.setSinkId(sinkId)
    .then(function() {
    console.log('Audio output device attached: ' + sinkId);
    })
    .catch(function(error) {
    // ...
    });

تضبط هذه الطريقة جهاز إخراج الصوت من العنصر. بعد استدعاء setSinkId()، يمكنك الحصول على معرّف جهاز الصوت الحالي للإخراج للعنصر الذي يحتوي على السمة sinkId.

getUserMedia()

يحلّ هذا الإجراء محلّ navigator.getUserMedia()، ولكن بدلاً من استخدام دالة استدعاء، يعرض وعدًا يمنح إذن الوصول إلى MediaStream. ننصح المطوّرين باستخدام MediaDevices.getUserMedia()، ولكن لا توجد خطة لإزالة navigator.getUserMedia(): سيظلّ جزءًا من المواصفات.

يتوفّر عرض توضيحي على موقع نماذج WebRTC الإلكتروني.

في ما يلي مقتطف رمز من العرض التجريبي:

navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream) {
    var videoTracks = stream.getVideoTracks();
    console.log('Got stream with constraints:', constraints);
    console.log('Using video device: ' + videoTracks[0].label);
    stream.onended = function() {
        console.log('Stream ended');
    };
    window.stream = stream; // make variable available to console
    video.srcObject = stream;
    })
    .catch(function(error) {
    // ...
    }

إلغاء البلاغ

لا تتطلّب طريقة enumerateDevices() تفعيل علامة في Chrome، ولكن بالنسبة إلى MediaDevices.getUserMedia()، عليك تفعيل ميزات منصّة الويب التجريبية في chrome://flags أو استخدام علامة سطر الأوامر التالية:

--enable-blink-features=GetUserMedia

وبالمثل بالنسبة إلى setSinkId(): فعِّل ميزات قاعدة الويب التجريبية أو استخدِم علامة:

--enable-blink-features=AudioOutputDevices

يمكنك الاطّلاع أدناه على مزيد من التفاصيل حول المتصفّحات المتوافقة.

المستقبل

ينفِّذ معالِج الحدث المقترَح ondevicechange ما يُفترَض به: يتم تشغيل الحدث devicechange عند تغيير مجموعة الأجهزة المتاحة، ويمكنك في معالِج الحدث استدعاء enumerateDevices() للحصول على قائمة الأجهزة الجديدة. لم يتم تنفيذ ذلك في أي متصفّح حتى الآن.

مسودة ميزة "التقاط الشاشة" هي إضافة إلى Media Capture API تقترح طريقة MediaDevices.getDisplayMedia() تتيح استخدام أجزاء من شاشة المستخدم كمصدر لبث الوسائط. هناك أيضًا اقتراح لإضافة MediaDevices إلى getSupportedConstraints() ، يقدّم معلومات عن القيود التي يمكن استخدامها في مكالمة getUserMedia(): إمكانات الصوت والفيديو المتوافقة مع المتصفّح.

إصدارات تجريبية

التعرف على المزيد