Elige cámaras, micrófonos y bocinas de tu aplicación web

Sam Dutton

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().

Selección de un dispositivo de salida de audio.

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

Más información