Sélectionnez des caméras, des micros et des haut-parleurs depuis votre application Web

Sam Dutton

Les navigateurs modernes permettent de sélectionner des périphériques d'entrée et de sortie, y compris des caméras, des micros et des haut-parleurs.

Exemple :

  • Sur un téléphone, sélectionnez la caméra avant ou arrière.
  • Sur un ordinateur portable, choisissez les haut-parleurs internes ou un haut-parleur connecté via Bluetooth.
  • Pour un chat vidéo, choisissez un micro ou une caméra interne ou externe.

Toutes ces fonctionnalités sont exposées par l'objet MediaDevices, qui est renvoyé par navigator.mediaDevices.

MediaDevices comporte deux méthodes, toutes deux implémentées dans Chrome 47 sur ordinateur et Android: enumerateDevices() et getUserMedia().

Sélection d'un appareil de sortie audio.

enumerateDevices()

Renvoie une promesse donnant accès à un tableau d'objets MediaDeviceInfo pour les appareils disponibles.

Cette méthode est semblable à MediaStreamTrack.getSources(), mais contrairement à cette méthode (qui n'a jamais été implémentée que dans Chrome), elle est conforme aux normes et inclut les périphériques de sortie audio. Vous pouvez essayer cela avec les démonstrations ci-dessous.

Voici un code légèrement simplifié tiré de l'une des démonstrations:

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

    ...

}

Après avoir récupéré les ID des appareils disponibles avec enumerateDevices(), vous pouvez utiliser setSinkId() (défini dans l'API Audio Output Devices) pour modifier la destination de sortie audio d'un élément vidéo ou audio:

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

Cette méthode définit le périphérique de sortie pour l'audio de l'élément. Une fois setSinkId() appelé, vous pouvez obtenir l'ID de l'appareil audio de sortie actuel de l'élément avec la propriété sinkId.

getUserMedia()

Cette méthode remplace navigator.getUserMedia(), mais au lieu d'utiliser un rappel, elle renvoie une promesse qui donne accès à un MediaStream. Les développeurs sont encouragés à utiliser MediaDevices.getUserMedia(), mais il n'est pas prévu de supprimer navigator.getUserMedia(): il reste dans la spécification.

Vous trouverez une démonstration sur le site des exemples WebRTC.

Voici un fragment de code de la démonstration:

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

Renonciation à l'option

La méthode enumerateDevices() est "sans flag" dans Chrome, tandis que pour MediaDevices.getUserMedia(), vous devez toujours activer les fonctionnalités expérimentales de la plate-forme Web dans chrome://flags ou utiliser l'option de ligne de commande suivante:

--enable-blink-features=GetUserMedia

De même pour setSinkId(): activez les fonctionnalités expérimentales de la plate-forme Web ou utilisez un flag:

--enable-blink-features=AudioOutputDevices

Pour en savoir plus sur la compatibilité des navigateurs, consultez les informations ci-dessous.

L'avenir

Le gestionnaire d'événements ondevicechange proposé fait ce qu'il dit: l'événement devicechange est déclenché lorsque l'ensemble des appareils disponibles change, et dans un gestionnaire, vous pouvez appeler enumerateDevices() pour obtenir la nouvelle liste des appareils. Cette fonctionnalité n'a pas encore été implémentée dans un navigateur.

Le brouillon de capture d'écran est une extension de l'API Media Capture qui propose une méthode MediaDevices.getDisplayMedia() permettant d'utiliser des régions de l'écran d'un utilisateur comme source d'un flux multimédia. Il existe également une proposition d'extension MediaDevices pour getSupportedConstraints(), qui fournit des informations sur les contraintes pouvant être utilisées pour un appel getUserMedia(): fonctionnalités audio et vidéo compatibles avec le navigateur.

Démonstrations

En savoir plus