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

Les navigateurs récents 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 propose deux méthodes, toutes deux implémentées dans Chrome 47 sur ordinateur et Android: enumerateDevices() et getUserMedia().

Sélection d'un périphérique de sortie audio.

enumerateDevices()

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

La méthode est semblable à MediaStreamTrack.getSources(), mais contrairement à celle-ci (qui n'a jamais été implémentée dans Chrome), elle est conforme aux normes et inclut des périphériques de sortie audio. Pour essayer, suivez les démonstrations ci-dessous.

Voici du 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 pour l'élément avec la propriété sinkId.

getUserMedia()

Cela remplace navigator.getUserMedia(), mais au lieu d'utiliser un rappel, il renvoie une promesse qui donne accès à un MediaStream. Nous encourageons les développeurs à utiliser MediaDevices.getUserMedia(), mais nous ne prévoyons pas de supprimer navigator.getUserMedia(): il reste inclus dans les spécifications.

Une démonstration est disponible sur le site d'exemples WebRTC.

Voici un fragment de code tiré 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) {
    // ...
    }

Levée de drapeau

La méthode enumerateDevices() est "sans indicateur" 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'indicateur de ligne de commande suivant:

--enable-blink-features=GetUserMedia

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

--enable-blink-features=AudioOutputDevices

Vous trouverez plus d'informations sur les navigateurs compatibles 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 d'appareils disponibles change. Dans un gestionnaire, vous pouvez appeler enumerateDevices() pour obtenir la nouvelle liste d'appareils. Cette fonctionnalité n'a encore été mise en œuvre dans aucun 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 zones 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(): les fonctionnalités audio et vidéo compatibles avec le navigateur.

Démonstrations

En savoir plus