Scegli videocamere, microfoni e altoparlanti dalla tua app web

Sam Dutton

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

Ad esempio:

  • Su uno smartphone, seleziona la fotocamera anteriore o posteriore.
  • Su un laptop, scegli gli altoparlanti interni o un altoparlante connesso tramite Bluetooth.
  • Per una chat video, scegli il microfono o la videocamera interni o esterni.

Tutta questa funzionalità è esposta dall'oggetto MediaDevices, che viene restituito da navigator.mediaDevices.

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

Selezione di un dispositivo di output audio.

enumerateDevices()

Restituisce un valore Promise che concede l'accesso a un array di oggetti MediaDeviceInfo per i dispositivi disponibili.

Il metodo è simile a MediaStreamTrack.getSources(), ma a differenza di quel metodo (che è stato implementato solo in Chrome) è conforme agli standard e include dispositivi di output audio. Puoi fare una prova con le demo riportate di seguito.

Ecco un codice leggermente semplificato tratto da 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 output audio di un elemento video o audio:

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

Questo metodo consente di impostare il dispositivo di output per l'audio dall'elemento. Dopo che setSinkId() è stato chiamato, puoi ottenere l'ID del dispositivo audio di output corrente per l'elemento con la proprietà sinkId.

getUserMedia()

Sostituisce navigator.getUserMedia(), ma invece di utilizzare un callback, restituisce una Promessa che concede l'accesso a un MediaStream. Gli sviluppatori sono invitati a utilizzare MediaDevices.getUserMedia(), ma non hanno in programma di rimuovere navigator.getUserMedia(): rimane parte della specifica.

Puoi trovare una demo sul sito degli esempi di 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) {
    // ...
    }

Rinuncia alle bandiere

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

--enable-blink-features=GetUserMedia

Allo stesso modo per setSinkId(): abilita le funzionalità sperimentali della piattaforma web o utilizza un flag:

--enable-blink-features=AudioOutputDevices

Di seguito puoi trovare ulteriori dettagli sul supporto dei browser.

Il futuro

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

La bozza di acquisizione schermo è 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. È presente anche una proposta di estensione di MediaDevices per getSupportedConstraints() , che fornisce informazioni sui vincoli che possono essere utilizzati per una chiamata getUserMedia(): funzionalità audio e video supportate dal browser.

Demo

Scopri di più