دوربین، میکروفون و بلندگو را از برنامه وب خود انتخاب کنید

سام داتون

مرورگرهای مدرن امکان انتخاب دستگاه های ورودی و خروجی از جمله دوربین، میکروفون و بلندگو را فراهم می کنند.

مثلا:

  • در تلفن، دوربین جلو یا عقب را انتخاب کنید.
  • در لپ تاپ، بلندگوهای داخلی یا بلندگوی متصل به بلوتوث را انتخاب کنید.
  • برای چت تصویری، میکروفون یا دوربین داخلی یا خارجی را انتخاب کنید.

همه این قابلیت‌ها توسط شی MediaDevices نمایش داده می‌شوند که توسط navigator.mediaDevices برگردانده می‌شود.

MediaDevices دو روش دارد که هر دو در Chrome 47 روی دسک‌تاپ و اندروید پیاده‌سازی شده‌اند: enumerateDevices() و getUserMedia() .

انتخاب دستگاه خروجی صدا

enumerateDevices()

یک Promise را برمی‌گرداند که به آرایه‌ای از اشیاء MediaDeviceInfo برای دستگاه‌های موجود دسترسی دارد.

این روش مشابه MediaStreamTrack.getSources() است، اما برخلاف آن روش (که تنها در کروم پیاده‌سازی شده بود) مطابق با استانداردها است و شامل دستگاه‌های خروجی صدا می‌شود. می توانید این کار را با دموهای زیر امتحان کنید.

در اینجا چند کد کمی ساده شده از یکی از دموها آمده است:

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() می شود، اما به جای استفاده از یک تماس، یک Promise برمی گرداند که به 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() در کروم بدون پرچم است، در حالی که برای MediaDevices.getUserMedia() همچنان باید ویژگی‌های Experimental Web Platform را در chrome://flags فعال کنید یا از پرچم خط فرمان زیر استفاده کنید:

--enable-blink-features=GetUserMedia

به همین ترتیب برای setSinkId() : ویژگی های Experimental Web Platform را فعال کنید یا از یک پرچم استفاده کنید:

--enable-blink-features=AudioOutputDevices

جزئیات بیشتر در مورد پشتیبانی مرورگر در زیر.

آینده

کنترل‌کننده رویداد ondevicechange پیشنهادی همان کاری را انجام می‌دهد که می‌گوید: رویداد devicechange زمانی فعال می‌شود که مجموعه دستگاه‌های موجود تغییر کند، و در یک handler می‌توانید برای دریافت لیست جدید دستگاه‌ها enumerateDevices() فراخوانی کنید. این هنوز در هیچ مرورگری اجرا نشده است.

پیش نویس Screen Capture یک برنامه افزودنی برای Media Capture API است که یک متد MediaDevices.getDisplayMedia() را پیشنهاد می کند که امکان استفاده از مناطق نمایش کاربر را به عنوان منبع جریان رسانه ای فراهم می کند. همچنین یک پیشنهاد برنامه افزودنی MediaDevices برای getSupportedConstraints() وجود دارد که اطلاعاتی در مورد محدودیت‌هایی که می‌توان برای تماس getUserMedia() استفاده کرد ارائه می‌کند: قابلیت‌های صوتی و تصویری پشتیبانی‌شده توسط مرورگر.

دموها

اطلاعات بیشتر