Google si impegna a far progredire equità razziale per le comunità nere. Vedi come.
Questa pagina è stata tradotta dall'API Cloud Translation.
Switch to English

Iniziare con dispositivi multimediali

Quando si sviluppa per il web, lo standard WebRTC fornisce API per accedere telecamere e microfoni collegati al computer o smartphone. Questi dispositivi sono comunemente noti come dispositivi multimediali e possono essere raggiunti con JavaScript attraverso il navigator.mediaDevices oggetto, che implementa il MediaDevices interfaccia. Da questo oggetto possiamo enumerare tutti i dispositivi collegati, ascoltare per le modifiche dei dispositivi (quando un dispositivo viene collegato o scollegato), e aprire un dispositivo per il recupero di un Media Stream (vedi sotto).

Il modo più comune questo è usato è attraverso la funzione getUserMedia() , che restituisce una promessa che risolverà a un MediaStream per i dispositivi multimediali di corrispondenza. Questa funzione impiega singoli MediaStreamConstraints oggetto che specifica i requisiti che abbiamo. Per esempio, per aprire semplicemente il microfono e fotocamera di default, avremmo fatto quanto segue.

utilizzando Promises

 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);
    });
 

Utilizzando async / 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 chiamata a getUserMedia() attiverà una richiesta di permessi. Se l'utente accetta il permesso, la promessa è risolto con un MediaStream contenente un video e una traccia audio. Se l'autorizzazione viene negata, un PermissionDeniedError è gettato. Nel caso ci sono dispositivi collegati corrispondente, un NotFoundError sarà gettato.

Il riferimento API completa per la MediaDevices interfaccia è disponibile a MDN documenti web .

Interrogazione dispositivi multimediali

In un'applicazione più complessa, ci sarà molto probabilmente si desidera controllare tutte le telecamere ei microfoni collegati e fornire il feedback appropriato per l'utente. Questo può essere fatto chiamando la funzione enumerateDevices() . Ciò restituirà la promessa che si risolve in una matrice di MediaDevicesInfo che descrivono ciascun dispositivo multimediale noto. Possiamo usare questo per presentare un'interfaccia utente per l'utente, che andiamo a loro scegliere quello che preferiscono. Ogni MediaDevicesInfo contiene una proprietà denominata kind con il valore audioinput , audiooutput o videoinput , indicando quale tipo di dispositivo multimediale che è.

utilizzando Promises

 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));
 

Utilizzando async / 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);
 

Ascolto per i dispositivi modifiche

La maggior parte dei computer supportano collegare vari dispositivi durante il runtime. Potrebbe essere una webcam collegata tramite USB, un auricolare Bluetooth, o un set di altoparlanti esterni. Al fine di supportare correttamente questo, un'applicazione web dovrebbe ascoltare per i cambiamenti di dispositivi multimediali. Questo può essere fatto con l'aggiunta di un listener per navigator.mediaDevices per il 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);
});
 

vincoli media

I vincoli oggetto, che deve implementare l' MediaStreamConstraints interfaccia, che passiamo come parametro a getUserMedia() ci permette di aprire un dispositivo di supporto che corrisponde a un determinato requisito. Questo requisito può essere molto genericamente definito (audio e / o video), o molto specifico (risoluzione minima telecamera o un ID del dispositivo esatto). Si raccomanda di applicazioni che utilizzano il getUserMedia() API primo controllo dispositivi esistenti e quindi specifica un vincolo che corrisponde al dispositivo esatta utilizzando il deviceId vincolo. Dispositivi anche, se possibile, essere configurate secondo i vincoli. Possiamo attivare cancellazione dell'eco microfoni o impostare una specifica o larghezza minima e l'altezza del video dalla telecamera.

 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 documentazione completa per il MediaStreamConstraints interfaccia può essere trovato sui documenti web MDN .

la riproduzione locale

Una volta che un dispositivo multimediale è stato aperto e abbiamo una MediaStream disponibili, possiamo assegnarlo ad un video o un elemento audio per riprodurre il flusso a livello locale.

 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);
    }
}
 

Il codice HTML necessario per un elemento video tipico usato con getUserMedia() di solito hanno l'attributi autoplay e playsinline . La autoplay attributo causerà nuovi flussi assegnati all'elemento per riprodurre automaticamente. Il playsinline attributo consente video da riprodurre in linea, invece che solo a schermo intero, su alcuni browser mobili. Si raccomanda inoltre di utilizzare controls="false" per i flussi in tempo reale, a meno che l'utente dovrebbe essere in grado di mettere in pausa la loro.

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