Kameras, Mikrofone und Lautsprecher in der Web-App auswählen

Sam Dutton

Moderne Browser ermöglichen die Auswahl von Eingabe- und Ausgabegeräten wie Kameras, Mikrofonen und Lautsprechern.

Beispiel:

  • Wählen Sie auf einem Smartphone die Front- oder Rückkamera aus.
  • Wählen Sie auf einem Laptop die internen Lautsprecher oder einen per Bluetooth verbundenen Lautsprecher aus.
  • Wählen Sie für einen Videochat ein internes oder externes Mikrofon oder eine interne oder externe Kamera aus.

Alle diese Funktionen werden über das MediaDevices-Objekt bereitgestellt, das von navigator.mediaDevices zurückgegeben wird.

MediaDevices hat zwei Methoden, die beide in Chrome 47 auf dem Computer und Android implementiert sind: enumerateDevices() und getUserMedia().

Audioausgabegerät auswählen

enumerateDevices()

Gibt ein Promise zurück, das Zugriff auf ein Array von MediaDeviceInfo-Objekten für verfügbare Geräte gewährt.

Die Methode ähnelt MediaStreamTrack.getSources(), ist aber im Gegensatz zu dieser Methode (die nur in Chrome implementiert wurde) standardskonform und umfasst Audioausgabegeräte. Sie können das mit den folgenden Demos ausprobieren.

Hier ist ein etwas vereinfachter Code aus einer der Demos:

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

    ...

}

Nachdem du die IDs der verfügbaren Geräte mit enumerateDevices() abgerufen hast, kannst du mit setSinkId() (definiert in der Audio Output Devices API) das Audioausgabeziel für ein Video- oder Audioelement ändern:

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

Mit dieser Methode wird das Ausgabegerät für Audio vom Element festgelegt. Nachdem setSinkId() aufgerufen wurde, kannst du die ID des aktuellen Ausgabeaudiogeräts für das Element mit der Property sinkId abrufen.

getUserMedia()

Dieser ersetzt navigator.getUserMedia(), gibt aber anstelle eines Callbacks ein Versprechen zurück, das Zugriff auf eine MediaStream gewährt. Entwicklern wird empfohlen, MediaDevices.getUserMedia() zu verwenden. navigator.getUserMedia() wird jedoch nicht entfernt: Es bleibt Teil der Spezifikation.

Auf der WebRTC-Beispielwebsite gibt es eine Demo.

Hier ist ein Codefragment aus der Demo:

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

Waving

Für die enumerateDevices()-Methode ist in Chrome kein Flag erforderlich. Bei MediaDevices.getUserMedia() müssen Sie jedoch die Experimentellen Webplattformfunktionen unter chrome://flags aktivieren oder das folgende Befehlszeilen-Flag verwenden:

--enable-blink-features=GetUserMedia

Das gilt auch für setSinkId(): Aktivieren Sie die experimentellen Funktionen der Webplattform oder verwenden Sie ein Flag:

--enable-blink-features=AudioOutputDevices

Weitere Informationen zur Browserunterstützung finden Sie unten.

Die Zukunft

Der vorgeschlagene ondevicechange-Ereignishandler macht genau das, was er verspricht: Das devicechange-Ereignis wird ausgelöst, wenn sich die verfügbaren Geräte ändern. In einem Handler können Sie enumerateDevices() aufrufen, um die neue Geräteliste abzurufen. Diese Funktion ist noch in keinem Browser implementiert.

Der Entwurf für die Bildschirmaufnahme ist eine Erweiterung der Media Capture API. Er schlägt eine MediaDevices.getDisplayMedia()-Methode vor, mit der Bereiche des Displays eines Nutzers als Quelle eines Medienstreams verwendet werden können. Es gibt auch einen MediaDevices-Erweiterungsvorschlag für getSupportedConstraints(), der Informationen dazu enthält, welche Einschränkungen für einen getUserMedia()-Aufruf verwendet werden könnten: Audio- und Videofunktionen, die vom Browser unterstützt werden.

Demos

Weitere Informationen