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 un altoparlante connesso tramite Bluetooth.
  • Per una videochiamata, scegli un microfono o una videocamera interni o esterni.

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

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

Selezione di un dispositivo di output audio.

enumerateDevices()

Restituisce una promessa che dà accesso a un array di MediaDeviceInfo oggetti per tra i dispositivi disponibili.

Il metodo è simile a MediaStreamTrack.getSources() ma a differenza di quest'ultimo (applicato solo in Chrome), sia conforme agli standard include i dispositivi di output audio. Puoi fare una prova con le demo riportate di seguito.

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

    ...

}

Una volta recuperati gli ID dei dispositivi disponibili con enumerateDevices(), puoi utilizzare setSinkId() (definito nell'API Audio Output Devices) per modificare la destinazione dell'output 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 output per l'audio dall'elemento. Dopo aver chiamato setSinkId(), puoi ottenere l'ID del dispositivo audio di output corrente per l'elemento con la proprietà sinkId.

getUserMedia()

Questo 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 è prevista la rimozione navigator.getUserMedia(): rimane parte della specifica.

È disponibile una demo sul sito di esempio 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 alla bandiera

Il metodo enumerateDevices() è "flagless" in Chrome, mentre per MediaDevices.getUserMedia() devi ancora attivare l'opzione Experimental Web Funzionalità della piattaforma in chrome://flags o utilizza il seguente flag della riga di comando:

--enable-blink-features=GetUserMedia

Allo stesso modo per setSinkId(): attiva 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 l'insieme di cambia i dispositivi disponibili; inoltre, in un gestore puoi chiamare enumerateDevices() visualizzare il nuovo elenco di dispositivi. Questa impostazione non è stata implementata in nessun browser .

La bozza di acquisizione schermo è un'estensione all'API Media Capture che propone un metodo MediaDevices.getDisplayMedia() che consente di utilizzare le regioni del display di un utente come fonte di un contenuto multimediale flusso di dati. È disponibile anche una proposta di estensione di MediaDevices per getSupportedConstraints() , che fornisce informazioni sui vincoli che è possibile utilizzare per un Chiamata getUserMedia(): funzionalità audio e video supportate dal browser.

Demo

Scopri di più