Выбирайте камеры, микрофоны и динамики в своем веб-приложении.

Сэм Даттон

Современные браузеры позволяют выбирать устройства ввода и вывода, включая камеры, микрофоны и динамики.

Например:

  • На телефоне выберите переднюю или заднюю камеру.
  • На ноутбуке выберите внутренние динамики или динамик, подключенный через Bluetooth.
  • Для видеочата выберите внутренний или внешний микрофон или камеру.

Вся эта функциональность предоставляется объектом MediaDevices, который возвращается navigator.mediaDevices .

MediaDevices имеет два метода, оба реализованные в Chrome 47 для настольных компьютеров и Android: enumerateDevices() и getUserMedia() .

Выбор устройства вывода звука.

перечислитьУстройства()

Возвращает обещание, предоставляющее доступ к массиву объектов 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() (определенный в 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() в Chrome не имеет флага, тогда как для MediaDevices.getUserMedia() вам все равно необходимо включить функции экспериментальной веб-платформы в chrome://flags или использовать следующий флаг командной строки:

--enable-blink-features=GetUserMedia

Аналогично для setSinkId() : включите функции экспериментальной веб-платформы или используйте флаг:

--enable-blink-features=AudioOutputDevices

Более подробная информация о поддержке браузера приведена ниже.

Будущее

Предлагаемый обработчик событий ondevicechange делает то, что говорит: событие devicechange запускается при изменении набора доступных устройств, и в обработчике вы можете вызвать enumerateDevices() чтобы получить новый список устройств. Это еще не реализовано ни в одном браузере.

Проект Screen Capture — это расширение API Media Capture, которое предлагает метод MediaDevices.getDisplayMedia() , который позволяет использовать области дисплея пользователя в качестве источника медиапотока. Существует также предложение расширения MediaDevices для getSupportedConstraints() , которое предоставляет информацию о том, какие ограничения могут использоваться для вызова getUserMedia() : возможности аудио и видео, поддерживаемые браузером.

Демо

Узнать больше