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

Sam Dutton

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

مثال:

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

يتم عرض كل هذه الوظائف من خلال الكائن MediaDevices الذي يعرضه navigator.mediaDevices.

هناك طريقتان لاستخدام MediaDevices، وهما منفّذتان في Chrome 47 على أجهزة الكمبيوتر المكتبي و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() (الموضّحة في واجهة برمجة تطبيقات أجهزة إخراج الصوت) لتغيير وجهة إخراج الصوت لعنصر فيديو أو عنصر صوتي:

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 Take API التي تقترح طريقة MediaDevices.getDisplayMedia() تتيح استخدام مناطق من عرض المستخدم كمصدر لبث الوسائط. هناك أيضًا اقتراح MediaDevices لإضافة getSupportedConstraints()، والذي يوفّر معلومات حول القيود التي يمكن استخدامها لمكالمة getUserMedia()، وهي إمكانات الصوت والفيديو التي يوفّرها المتصفّح.

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

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