Google se compromete a avanzar en la equidad racial para las comunidades negras. Ver cómo.
Se usó la API de Cloud Translation para traducir esta página.
Switch to English

Primeros pasos con dispositivos de medios

Al desarrollar para la web, el estándar WebRTC proporciona APIs para acceder a cámaras y micrófonos conectados a la computadora o un teléfono inteligente. Estos dispositivos se denominan comúnmente como dispositivos de medios y se puede acceder con JavaScript a través de la navigator.mediaDevices objeto, que implementa el MediaDevices de interfaz. A partir de este objeto podemos enumerar todos los dispositivos conectados, escuchar los cambios de dispositivo (cuando se conecta o desconecta un dispositivo), y abrir un dispositivo para recuperar una corriente de medios (véase más adelante).

La forma más común de esto se utiliza es a través de la función getUserMedia() , que devuelve una promesa que se resolverá a un MediaStream para los dispositivos de medios coincidentes. Esta función toma un solo MediaStreamConstraints objeto que especifica los requisitos que tenemos. Por ejemplo, simplemente abrir el micrófono y la cámara por defecto, haríamos lo siguiente.

El uso de promesas

 const constraints = {
    'video': true,
    'audio': true
}
navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        console.log('Got MediaStream:', stream);
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });
 

El uso asíncrono / Await

 const openMediaDevices = async (constraints) => {
    return await navigator.mediaDevices.getUserMedia(constraints);
}

try {
    const stream = openMediaDevices({'video':true,'audio':true});
    console.log('Got MediaStream:', stream);
} catch(error) {
    console.error('Error accessing media devices.', error);
}
 

La llamada a getUserMedia() dará lugar a una solicitud de permisos. Si el usuario acepta la autorización, la promesa se resuelve con una MediaStream que contiene un vídeo y una pista de audio. Si se deniega el permiso, un PermissionDeniedError es lanzada. En caso de que no hay dispositivos coincidentes conectados, un NotFoundError será lanzada.

La referencia de la API completa para el MediaDevices interfaz está disponible en el MDN documentos web .

Consulta de dispositivos de medios

En una aplicación más compleja, lo más probable es que desee comprobar todas las cámaras y micrófonos conectados y proporcionar la información adecuada a los usuarios. Esto se puede hacer llamando a la función enumerateDevices() . Esto devolverá una promesa que se resuelve en una matriz de MediaDevicesInfo que describen cada dispositivo de medios conocida. Podemos usar esto para presentar una interfaz de usuario para el usuario, que permiten recoger de ellas la que ellos prefieren. Cada MediaDevicesInfo contiene una propiedad denominada kind con el valor audioinput , audiooutput o videoinput , indicando qué tipo de dispositivo de medios que es.

El uso de promesas

 function getConnectedDevices(type, callback) {
    navigator.mediaDevices.enumerateDevices()
        .then(devices => {
            const filtered = devices.filter(device => device.kind === type);
            callback(filtered);
        });
}

getConnectedDevices('videoinput', cameras => console.log('Cameras found', cameras));
 

El uso asíncrono / Await

 async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

const videoCameras = getConnectedDevices('videoinput');
console.log('Cameras found:', videoCameras);
 

La escucha de dispositivos cambios

La mayoría de los equipos son compatibles conectar varios dispositivos en tiempo de ejecución. Podría ser una cámara web conectada por USB, un auricular Bluetooth o un conjunto de altavoces externos. Con el fin de apoyar adecuadamente esto, una aplicación web debe escuchar a los cambios de dispositivos de medios. Esto puede hacerse mediante la adición de un oyente a navigator.mediaDevices para la devicechange evento.

 // Updates the select element with the provided set of cameras
function updateCameraList(cameras) {
    const listElement = document.querySelector('select#availableCameras');
    listElement.innerHTML = '';
    cameras.map(camera => {
        const cameraOption = document.createElement('option');
        cameraOption.label = camera.label;
        cameraOption.value = camera.deviceId;
    }).forEach(cameraOption => listElement.add(cameraOption));
}

// Fetch an array of devices of a certain type
async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Get the initial set of cameras connected
const videoCameras = getConnectedDevices('videoinput');
updateCameraList(videoCameras);

// Listen for changes to media devices and update the list accordingly
navigator.mediaDevices.addEventListener('devicechange', event => {
    const newCameraList = getConnectedDevices('video');
    updateCameraList(newCameraList);
});
 

las limitaciones de los medios

Las limitaciones de objeto, que debe implementar la MediaStreamConstraints interfaz, que se pasa como parámetro a getUserMedia() nos permite abrir un dispositivo de medios que coincide con un cierto requisito. Este requisito puede ser muy vagamente definido (audio y / o vídeo), o muy específicas (resolución de la cámara mínimo o un ID de dispositivo exacto). Se recomienda que las aplicaciones que utilizan el getUserMedia() API compruebe primero los dispositivos existentes y luego especifica una restricción que corresponda al dispositivo exacta con el deviceId restricción. Dispositivos también, si es posible, ser configurados de acuerdo con las restricciones. Podemos activar la cancelación de eco en los micrófonos o un conjunto específico o una anchura mínima y la altura del vídeo de la cámara.

 async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Open camera with at least minWidth and minHeight capabilities
async function openCamera(cameraId, minWidth, minHeight) {
    const constraints = {
        'audio': {'echoCancellation': true},
        'video': {
            'deviceId': cameraId,
            'width': {'min': minWidth},
            'height': {'min': minHeight}
            }
        }

    return await navigator.mediaDevices.getUserMedia(constraints);
}

const cameras = getConnectedDevices('videoinput');
if (cameras && cameras.length > 0) {
    // Open first available video camera with a resolution of 1280x720 pixels
    const stream = openCamera(cameras[0].deviceId, 1280, 720);
}
 

La documentación completa para la MediaStreamConstraints interfaz se puede encontrar en los documentos web MDN .

reproducción local

Una vez que un dispositivo de medios ha sido abierto y tenemos un MediaStream disponibles, podemos asignar a un elemento de vídeo o de audio para reproducir la secuencia localmente.

 async function playVideoFromCamera() {
    try {
        const constraints = {'video': true, 'audio': true};
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const videoElement = document.querySelector('video#localVideo');
        videoElement.srcObject = stream;
    } catch(error) {
        console.error('Error opening video camera.', error);
    }
}
 

El código HTML necesario para un elemento de vídeo típica utilizada con getUserMedia() por lo general tienen los atributos autoplay y playsinline . La autoplay atributo hará que nuevos flujos asignados al elemento para reproducir automáticamente. El playsinline atributo permite que el vídeo juego en línea, en lugar de sólo en pantalla completa, en algunos navegadores móviles. También se recomienda el uso de controls="false" para transmisiones en directo, a menos que el usuario debe ser capaz de hacer una pausa en ellos.

 <html>
<head><title>Local video playback</video></head>
<body>
    <video id="localVideo" autoplay playsinline controls="false"/>
</body>
</html>