Los navegadores modernos permiten seleccionar dispositivos de entrada y salida, como cámaras, micrófonos y bocinas.
Por ejemplo:
- En un teléfono, selecciona la cámara frontal o posterior.
- En una laptop, elige las bocinas internas o las bocinas conectadas por Bluetooth.
- Para un videochat, elige el micrófono o la cámara internos o externos.
Toda esta funcionalidad se expone mediante el objeto MediaDevices, que muestra navigator.mediaDevices
.
MediaDevices tiene dos métodos, ambos implementados en Chrome 47 para computadoras y Android: enumerateDevices()
y getUserMedia()
.
enumerateDevices()
Muestra una promesa que brinda acceso a un array de objetos MediaDeviceInfo
para
dispositivos disponibles.
El método es similar a MediaStreamTrack.getSources()
, pero, a diferencia de este (que solo se implementó en Chrome), cumple con los estándares e incluye dispositivos de salida de audio. Puedes probarlo con las demostraciones que aparecen a continuación.
A continuación, se incluye un código un poco más simple de una de las demostraciones:
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);
}
...
}
Una vez que recuperes los IDs de dispositivos disponibles con enumerateDevices()
, puedes usar setSinkId()
(definido en la API de dispositivos de salida de audio) para cambiar el destino de salida de audio de un elemento de video o de audio:
element.setSinkId(sinkId)
.then(function() {
console.log('Audio output device attached: ' + sinkId);
})
.catch(function(error) {
// ...
});
Este método establece el dispositivo de salida para el audio del elemento. Una vez que se haya llamado a setSinkId()
, podrás obtener el ID del dispositivo de audio de salida actual del elemento con la propiedad sinkId
.
getUserMedia()
Esto reemplaza a navigator.getUserMedia()
, pero en lugar de usar una devolución de llamada, muestra una promesa que otorga acceso a un MediaStream
. Se recomienda a los desarrolladores que usen MediaDevices.getUserMedia()
, pero no hay un plan para quitar navigator.getUserMedia()
: sigue siendo parte de la especificación.
Hay una demostración en el sitio de muestras de WebRTC.
Este es un fragmento de código de la demostración:
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) {
// ...
}
Renuncia a la bandera
El método enumerateDevices()
no tiene marcas en Chrome, mientras que, para MediaDevices.getUserMedia()
, debes habilitar las funciones de plataforma web experimental en chrome://flags o usar la siguiente marca de línea de comandos:
--enable-blink-features=GetUserMedia
Del mismo modo para setSinkId()
: Habilita las funciones de la plataforma web experimental o usa una marca:
--enable-blink-features=AudioOutputDevices
Aquí tienes más detalles sobre la compatibilidad con navegadores.
El futuro
El controlador del evento ondevicechange
propuesto hace lo que dice: el evento devicechange
se activa cuando cambia el conjunto de
dispositivos disponibles y, en un controlador, puedes llamar a enumerateDevices()
para
obtener la nueva lista de dispositivos. Esto aún no se implementó en ningún navegador.
El borrador de captura de pantalla es una extensión de la API de Media Capture que propone un método MediaDevices.getDisplayMedia()
que permite que las regiones de la pantalla de un usuario se usen como fuente de una transmisión de contenido multimedia. También hay una propuesta de extensión MediaDevices
para getSupportedConstraints()
, que proporciona información sobre qué restricciones se podrían usar en una llamada a getUserMedia()
: funciones de audio y video compatibles con el navegador.
Demostraciones
- getUserMedia()
- enumerateDevices():
- Corrección de compatibilidad de MediaDevices
Más información
- Red de desarrolladores de Mozilla: dispositivos de medios
- Estado de implementación
- Borrador del editor de transmisiones y capturas de contenido multimedia: MediaDevices
- API de Audio Output Devices