Wybierz kamery, mikrofony i głośniki w aplikacji internetowej

Nowoczesne przeglądarki pozwalają wybrać urządzenia wejściowe i wyjściowe, takie jak kamery, mikrofony i głośniki.

Na przykład:

  • W telefonie wybierz przedni lub tylny aparat.
  • Na laptopie wybierz głośniki wewnętrzne lub głośniki połączone przez Bluetooth.
  • W przypadku czatu wideo wybierz mikrofon wewnętrzny lub zewnętrzny albo kamerę.

Wszystkie te funkcje są ujawniane przez obiekt Mediadevices, który jest zwracany przez navigator.mediaDevices.

Mediadevices ma 2 metody, zarówno zaimplementowane w Chrome 47 na komputerach, jak i na Androidzie: enumerateDevices() i getUserMedia().

Wybieram wyjście audio.

enumerateDevices()

Zwraca obietnicę dostępu do tablicy obiektów MediaDeviceInfo dostępnych urządzeń.

Ta metoda jest podobna do metody MediaStreamTrack.getSources(), ale w odróżnieniu od niej (która nigdy nie była zaimplementowana w Chrome) jest zgodna ze standardami i obejmuje wyjścia audio. Możesz to wypróbować za pomocą poniższych prezentacji.

Oto nieco uproszczony kod z jednej z wersji demonstracyjnych:

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);
    }

    ...

}

Po pobraniu identyfikatorów dostępnych urządzeń z enumerateDevices() możesz użyć setSinkId() (zdefiniowanych w interfejsie Audio Exit Devices API), aby zmienić miejsce docelowe wyjścia audio elementu wideo lub audio:

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

Ta metoda ustawia urządzenie wyjściowe audio z elementu. Po wywołaniu setSinkId() możesz uzyskać identyfikator bieżącego wyjściowego urządzenia audio dla elementu za pomocą właściwości sinkId.

getUserMedia()

Zastępuje to polecenie navigator.getUserMedia(), ale zamiast wywołania zwrotnego zwraca obietnicę, która przyznaje dostęp do funkcji MediaStream. Zachęcamy deweloperów do korzystania z tagu MediaDevices.getUserMedia(), ale nie zamierzasz go usuwać: navigator.getUserMedia()pozostawał on częścią specyfikacji.

W witrynie z przykładami z WebRTC dostępna jest wersja demonstracyjna.

Oto fragment kodu z wersji demonstracyjnej:

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) {
    // ...
    }

Rezygnacja z flagi

Metoda enumerateDevices() jest „bez flag” w Chrome, podczas gdy w przypadku interfejsu MediaDevices.getUserMedia() nadal musisz włączyć eksperymentalne funkcje platformy internetowej na chrome://flags lub użyć tej flagi wiersza poleceń:

--enable-blink-features=GetUserMedia

Podobnie w przypadku setSinkId(): włącz eksperymentalne funkcje platformy internetowej lub użyj flagi:

--enable-blink-features=AudioOutputDevices

Więcej informacji o obsłudze przeglądarek znajdziesz poniżej.

Przyszłość

Proponowany moduł obsługi zdarzeń ondevicechange działa zgodnie z opisem: zdarzenie devicechange jest wywoływane, gdy zestaw dostępnych urządzeń się zmieni, a w module obsługi możesz wywoływać metodę enumerateDevices(), aby pobrać nową listę urządzeń. Funkcja ta nie została jeszcze zaimplementowana w żadnej przeglądarce.

Wersja robocza zrzutu ekranu to rozszerzenie interfejsu Media Capture API, które proponuje metodę MediaDevices.getDisplayMedia() umożliwiającą wykorzystywanie regionów wyświetlacza użytkownika jako źródła strumienia multimediów. Dostępna jest też propozycja rozszerzenia MediaDevices na temat getSupportedConstraints() z informacjami o ograniczeniach, których można używać w połączeniu w usłudze getUserMedia(): z funkcjami audio i wideo obsługiwanymi przez przeglądarkę.

Przykłady

Więcej informacji