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 una bocina conectada por Bluetooth.
  • Para un videochat, elige el micrófono o la cámara interno o externo.

El objeto MediaDevices expone toda esta funcionalidad, que muestra navigator.mediaDevices.

MediaDevices tiene dos métodos, ambos implementados en Chrome 47 en computadoras de escritorio y Android: enumerateDevices() y getUserMedia().

Seleccionar un dispositivo de salida de audio

enumerateDevices()

Muestra una promesa que otorga acceso a un array de objetos MediaDeviceInfo para los dispositivos disponibles.

El método es similar a MediaStreamTrack.getSources(), pero a diferencia de ese método (que solo se implementó en Chrome), cumple con los estándares y, además, incluye dispositivos de salida de audio. Puedes probar esto con las demostraciones que se indican a continuación.

Este es un código ligeramente simplificado 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);
    }

    ...

}

Después de recuperar los IDs de los dispositivos disponibles con enumerateDevices(), puedes usar setSinkId() (definido en la API de Audio Output Devices) para cambiar el destino de salida de audio de un elemento de video o audio:

element.setSinkId(sinkId)
    .then(function() {
    console.log('Audio output device attached: ' + sinkId);
    })
    .catch(function(error) {
    // ...
    });

Este método establece el dispositivo de salida de audio del elemento. Una vez que se haya llamado a setSinkId(), puedes 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 planes 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) {
    // ...
    }

Anulación de la marca

El método enumerateDevices() no tiene marcas en Chrome, mientras que para MediaDevices.getUserMedia(), aún debes habilitar las funciones experimentales de la plataforma web 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 experimentales de la plataforma web o usa una marca:

--enable-blink-features=AudioOutputDevices

A continuación, encontrarás más detalles sobre la compatibilidad con navegadores.

El futuro

El controlador de eventos 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. 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 las restricciones que se podrían usar para una llamada getUserMedia(): las capacidades de audio y video que admite el navegador.

Demostraciones

Más información