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

Sam Dutton

Nowoczesne przeglądarki umożliwiają wybór urządzeń wejściowych i wyjściowych, w tym kamer, mikrofonów i głośników.

Na przykład:

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

Wszystkie te funkcje są dostępne w obiekcie MediaDevices, który jest zwracany przez funkcję navigator.mediaDevices.

MediaDevices ma 2 metody, obie zaimplementowane w Chrome 47 na komputerach i na Androidzie: enumerateDevices() i getUserMedia().

Wybieranie urządzenia wyjściowego audio.

enumerateDevices()

Zwraca obietnicę, która zapewnia dostęp do tablicy obiektów MediaDeviceInfo na dostępnych urządzeniach.

Metoda jest podobna do MediaStreamTrack.getSources(), ale w odróżnieniu od niej (która była implementowana tylko w Chrome) jest zgodna ze standardami i obsługuje urządzenia wyjściowe audio. Możesz to sprawdzić na przykładzie poniższych demonstracji.

Oto nieco uproszczony kod z jednego z demo:

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ń za pomocą enumerateDevices() możesz użyć setSinkId() (zdefiniowanego w Audio Output Devices API), aby zmienić miejsce wyjściowe dźwięku dla elementu wideo lub dźwięku:

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

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

getUserMedia()

Zastępuje ona funkcję navigator.getUserMedia(), ale zamiast wywołania zwrotnego zwraca obietnicę, która zapewnia dostęp do MediaStream. Zachęcamy deweloperów do używania MediaDevices.getUserMedia(), ale nie planujemy usuwania navigator.getUserMedia(): nadal jest ona częścią specyfikacji.

Demo znajdziesz na stronie z przykładami WebRTC.

Oto fragment kodu z demonstracji:

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

Flaga

Metoda enumerateDevices() nie wymaga flagi w Chrome, podczas gdy w przypadku metody MediaDevices.getUserMedia() nadal musisz włączyć eksperymentalne funkcje platformy internetowej w chrome://flags lub użyć tego parametru wiersza polecenia:

--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 przetwarzacz zdarzeń ondevicechange działa zgodnie z nazwą: zdarzenie devicechange jest wywoływane, gdy zmienia się zestaw dostępnych urządzeń. W przetwarzaczu możesz wywołać funkcję enumerateDevices(), aby uzyskać nową listę urządzeń. Ta funkcja nie została jeszcze zaimplementowana w żadnej przeglądarce.

Projekt interfejsu Screen Capture to rozszerzenie interfejsu Media Capture API, które proponuje metodę MediaDevices.getDisplayMedia() umożliwiającą używanie regionów ekranu użytkownika jako źródła strumienia multimediów. Jest też propozycja rozszerzenia MediaDevices dla getSupportedConstraints(), która zawiera informacje o tym, jakie ograniczenia można zastosować w przypadku połączenia getUserMedia(): możliwości audio i wideo obsługiwane przez przeglądarkę.

Prezentacje

Więcej informacji