Scegli videocamere, microfoni e altoparlanti dalla tua app web

Sam Dutton

I browser moderni consentono di selezionare dispositivi di input e output, tra cui videocamere, microfoni e altoparlanti.

Ad esempio:

  • Su uno smartphone, seleziona la fotocamera anteriore o posteriore.
  • Su un laptop, scegli gli altoparlanti interni o uno speaker collegato tramite Bluetooth.
  • Per una videochiamata, scegli il microfono o la videocamera interno o esterno.

Tutte queste funzionalità sono esposte dall'oggetto MediaDevices, restituito da navigator.mediaDevices.

MediaDevices ha due metodi, entrambi implementati in Chrome 47 su computer e Android: enumerateDevices() e getUserMedia().

Selezionare un dispositivo di uscita audio.

enumerateDevices()

Restituisce una promessa che consente di accedere a un array di oggetti MediaDeviceInfo per i dispositivi disponibili.

Il metodo è simile a MediaStreamTrack.getSources(), ma a differenza di questo metodo (che è stato implementato solo in Chrome), è conforme agli standard e include i dispositivi di output audio. Puoi provare questa funzionalità con le demo riportate di seguito.

Ecco un codice leggermente semplificato di una delle demo:

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

    ...

}

Dopo aver recuperato gli ID dei dispositivi disponibili con enumerateDevices(), puoi utilizzare setSinkId() (definito nell'API Audio Output Devices) per modificare la destinazione di uscita audio per un elemento video o audio:

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

Questo metodo imposta il dispositivo di uscita per l'audio dall'elemento. Una volta chiamato setSinkId(), puoi ottenere l'ID del dispositivo audio di output corrente per l'elemento con la proprietà sinkId.

getUserMedia()

Sostituisce navigator.getUserMedia(), ma anziché utilizzare un callback, restituisce una promessa che consente di accedere a un MediaStream. Gli sviluppatori sono invitati a utilizzare MediaDevices.getUserMedia(), ma non è prevista la rimozione navigator.getUserMedia(): rimane parte della specifica.

Puoi trovare una demo sul sito di esempi WebRTC.

Ecco un frammento di codice della demo:

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) {
    // ...
    }

Mancata segnalazione

Il metodo enumerateDevices() è "senza flag" in Chrome, mentre per MediaDevices.getUserMedia() devi comunque attivare le funzionalità sperimentali della piattaforma web in chrome://flags o utilizzare il seguente flag della riga di comando:

--enable-blink-features=GetUserMedia

Analogamente per setSinkId(): attiva le funzionalità sperimentali della piattaforma web o utilizza un flag:

--enable-blink-features=AudioOutputDevices

Di seguito sono riportati ulteriori dettagli sul supporto dei browser.

Il futuro

Il gestore di eventi ondevicechange proposto fa ciò che dice: l'evento devicechange viene attivato quando l'insieme di dispositivi disponibili cambia e in un gestore puoi chiamare enumerateDevices() per ottenere il nuovo elenco di dispositivi. Questa funzionalità non è ancora stata implementata in nessun browser.

La bozza di acquisizione schermata è un'estensione dell'API Media Capture che propone un metodo MediaDevices.getDisplayMedia() che consente di utilizzare le regioni del display di un utente come origine di uno stream multimediale. Esiste anche una proposta di estensione MediaDevices per getSupportedConstraints() , che fornisce informazioni sui vincoli che potrebbero essere utilizzati per una chiamata getUserMedia(): funzionalità audio e video supportate dal browser.

Demo

Scopri di più