Capture et contraintes liées à l'élément multimédia

La partie multimédia de WebRTC explique comment accéder au matériel capable de capturer des vidéos et des contenus audio, comme les caméras et les micros, et comment fonctionne les flux multimédias. Elle couvre également les médias display, ce qui permet à une application d'effectuer des captures d'écran.

Périphériques multimédias

Toutes les caméras et les micros compatibles avec le navigateur sont accessibles et gérés via l'objet navigator.mediaDevices. Les applications peuvent récupérer la liste actuelle des appareils connectés et détecter les modifications, étant donné que de nombreuses caméras et microhpones se connectent via USB et peuvent être connectées et dissociées pendant le cycle de vie de l'application. L'état d'un appareil multimédia peut changer à tout moment. C'est pourquoi nous vous recommandons de vous inscrire aux modifications que vous apportez aux appareils afin de gérer correctement ces changements.

Contraintes

Lorsque vous accédez à des appareils multimédias, il est recommandé de fournir des contraintes aussi détaillées que possible. Même s'il est possible d'ouvrir la caméra et le micro par défaut avec une contrainte simple, ils peuvent générer un flux multimédia très éloigné de l'application qui convient le mieux.

Les contraintes spécifiques sont définies dans un objet MediaTrackConstraint, un pour l'audio et l'autre pour la vidéo. Les attributs de cet objet sont de type ConstraintLong, ConstraintBoolean, ConstraintDouble ou ConstraintDOMString. Il peut s'agir d'une valeur spécifique (par exemple, un nombre, d'une valeur booléenne ou d'une chaîne), d'une plage (LongRange ou DoubleRange avec une valeur minimale et maximale) ou d'un objet de définition ideal ou exact. Pour une valeur spécifique, le navigateur tente de sélectionner un élément aussi proche que possible. Pour une plage, la meilleure valeur est utilisée. Lorsque exact est spécifié, seuls les flux multimédias qui correspondent exactement à cette contrainte sont renvoyés.

À proximité

// Camera with a resolution as close to 640x480 as possible
{
    "video": {
        "width": 640,
        "height": 480
    }
}

Plage

// Camera with a resolution in the range 640x480 to 1024x768
{
    "video": {
        "width": {
            "min": 640,
            "max": 1024
        },
        "height": {
            "min": 480,
            "max": 768
        }
    }
}

Exact

// Camera with the exact resolution of 1024x768
{
    "video": {
        "width": {
            "exact": 1024
        },
        "height": {
            "exact": 768
        }
    }
}

Pour déterminer la configuration réelle d'une piste d'un flux multimédia, nous pouvons appeler MediaStreamTrack.getSettings(), qui renvoie le MediaTrackSettings appliqué.

Il est également possible de mettre à jour les contraintes d'une piste à partir d'un appareil multimédia que nous avons ouvert, en appelant applyConstraints() sur la piste. Cela permet à une application de reconfigurer un appareil multimédia sans avoir à fermer le flux existant.

Élément multimédia pour le Réseau Display

Une application qui souhaite pouvoir capturer et enregistrer l'écran doit utiliser l'API Display Media. La fonction getDisplayMedia() (qui fait partie de navigator.mediaDevices) est semblable à getUserMedia() et permet d'ouvrir le contenu de l'écran (ou d'une partie de celui-ci, par exemple une fenêtre). Le MediaStream affiché fonctionne de la même manière que lorsque vous utilisez getUserMedia().

Les contraintes pour getDisplayMedia() diffèrent de celles utilisées pour les entrées vidéo ou audio standards.

{
    video: {
        cursor: 'always' | 'motion' | 'never',
        displaySurface: 'application' | 'browser' | 'monitor' | 'window'
    }
}

La capture de code ci-dessus illustre le fonctionnement des contraintes spéciales liées à l'enregistrement d'écran. Notez que ceux-ci peuvent ne pas être compatibles avec tous les navigateurs compatibles avec le format display.

Flux et pistes

Un MediaStream représente un flux de contenu multimédia, composé de pistes (MediaStreamTrack) de contenu audio et vidéo. Vous pouvez récupérer toutes les pistes de MediaStream en appelant MediaStream.getTracks(), qui renvoie un tableau d'objets MediaStreamTrack.

Piste multimédia

Une propriété MediaStreamTrack possède une propriété kind qui est audio ou video, indiquant le type de contenu multimédia qu'elle représente. Vous pouvez désactiver le son de chaque canal en activant ou en désactivant sa propriété enabled. Une piste possède une propriété booléenne remote qui indique si elle provient d'un RTCPeerConnection et provient d'un pair distant.