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()
.
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
- getUserMedia()
- enumerateDevices():
- Shim für MediaGeräte
Weitere Informationen
- Mozilla Developer Network: Mediengeräte
- Implementierungsstatus
- Entwurf des Media Capture- und Streams-Editors: MediaDevices
- Audio Output Devices API