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

Mit modernen Browsern können Eingabe- und Ausgabegeräte wie Kameras, Mikrofone und Lautsprecher ausgewählt werden.

Beispiel:

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

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

MediaGeräte haben zwei Methoden, die beide in Chrome 47 für 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 der MediaStreamTrack.getSources(), ist aber im Gegensatz zu dieser Methode, die bisher nur in Chrome implementiert wurde, standardkonform und umfasst Audioausgabegeräte. Sie können dies 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 Sie die IDs der verfügbaren Geräte mit enumerateDevices() abgerufen haben, können Sie mit setSinkId() (in der Audio Output Devices API definiert) 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 die Audioausgabe des Elements festgelegt. Nachdem setSinkId() aufgerufen wurde, kannst du die ID des aktuellen Audioausgabegeräts für das Element mit der Eigenschaft sinkId abrufen.

getUserMedia()

Dadurch wird navigator.getUserMedia() ersetzt, aber statt eines Callbacks wird ein Promise zurückgegeben, das Zugriff auf ein MediaStream gewährt. Entwicklern wird empfohlen, MediaDevices.getUserMedia() zu verwenden, es gibt jedoch keinen Plan, navigator.getUserMedia() zu entfernen: Es bleibt Teil der Spezifikation.

Auf der WebRTC-Beispielwebsite finden Sie 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) {
    // ...
    }

Flaggenverzicht

Die enumerateDevices()-Methode ist in Chrome „flagless“, während du für MediaDevices.getUserMedia() noch die Experimental Web Platform-Funktionen unter chrome://flags aktivieren oder das folgende Befehlszeilen-Flag verwenden musst:

--enable-blink-features=GetUserMedia

Ähnlich verhält es sich bei setSinkId(): Aktivieren Sie Funktionen der experimentellen Webplattform oder verwenden Sie ein Flag:

--enable-blink-features=AudioOutputDevices

Weitere Informationen zur Browserunterstützung findest du unten.

Die Zukunft

Der vorgeschlagene ondevicechange-Event-Handler tut das, was er sagt: Das devicechange-Ereignis wird ausgelöst, wenn sich die Gruppe der verfügbaren Geräte ändert. In einem Handler können Sie enumerateDevices() aufrufen, um die neue Geräteliste abzurufen. Dies wurde noch in keinem Browser implementiert.

Der Entwurf für Bildschirmaufnahme ist eine Erweiterung der Media Capture API. Sie schlägt eine MediaDevices.getDisplayMedia()-Methode vor, mit der Regionen eines Nutzerdisplays als Quelle eines Medienstreams verwendet werden können. Es gibt auch einen Vorschlag zur Erweiterung MediaDevices für getSupportedConstraints(), der Informationen dazu enthält, welche Einschränkungen für einen getUserMedia()-Aufruf verwendet werden können: vom Browser unterstützte Audio- und Videofunktionen.

Demos

Weitere Informationen