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

Sam Dutton

In modernen Browsern können Sie Ein- und Ausgabegeräte wie Kameras, Mikrofone und Lautsprecher auswählen.

Beispiel:

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

Diese Funktionen werden alle ü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 unter Android implementiert sind: enumerateDevices() und getUserMedia().

Audiogerät für Ausgabe auswählen

enumerateDevices()

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

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

Hier ist ein leicht 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() (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, können Sie die ID des aktuellen Audioausgabegeräts für das Element mit der Eigenschaft sinkId abrufen.

getUserMedia()

Diese Methode ersetzt navigator.getUserMedia(), gibt aber anstelle eines Callbacks ein Promise zurück, das Zugriff auf ein MediaStream bietet. Entwickler sollten MediaDevices.getUserMedia() verwenden. Es ist jedoch nicht geplant, 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) {
    // ...
    }

Fahnen schwenken

Die enumerateDevices()-Methode ist in Chrome „flagless“, während Sie für MediaDevices.getUserMedia() weiterhin Experimentelle Webplattformfunktionen in chrome://flags aktivieren oder das folgende Befehlszeilen-Flag verwenden müssen:

--enable-blink-features=GetUserMedia

Das gilt auch für setSinkId(): Aktivieren Sie Experimentelle Webplattformfunktionen oder verwenden Sie ein Flag:

--enable-blink-features=AudioOutputDevices

Weitere Informationen zur Browserunterstützung finden Sie unten.

Die Zukunft

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

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

Demos

Weitere Informationen