Flux insérables pour MediaStreamTrack

Le contenu d'un MediaStreamTrack est exposé sous forme de flux qui peut être manipulé ou utilisé pour générer du contenu.

Thomas Steiner

Arrière-plan

Dans le contexte de l'API Media Capture and Streams, l'interface MediaStreamTrack représente une piste multimédia unique dans un flux. Il s'agit généralement de pistes audio ou vidéo, mais d'autres types de pistes peuvent exister. Les objets MediaStream se composent d'un ou de plusieurs objets MediaStreamTrack, représentant différentes pistes audio ou vidéo. Chaque MediaStreamTrack peut comporter un ou plusieurs canaux. Le canal représente la plus petite unité d'un flux multimédia, comme un signal audio associé à un haut-parleur donné, comme gauche ou droit dans une piste audio stéréo.

Que sont les flux insérables pour MediaStreamTrack ?

L'idée principale derrière les flux insérables pour MediaStreamTrack est d'exposer le contenu d'un MediaStreamTrack en tant que collection de flux (tels que définis par l'API Streams WHATWG). Ces flux peuvent être manipulés pour introduire de nouveaux composants.

En accordant aux développeurs un accès direct au flux vidéo (ou audio), vous leur permettez d'y apporter des modifications directement. En revanche, pour réaliser la même tâche de manipulation vidéo avec des méthodes traditionnelles, les développeurs doivent utiliser des intermédiaires tels que les éléments <canvas>. (Pour en savoir plus sur ce type de processus, consultez, par exemple, Vidéo + Canvas = Magie.)

Prise en charge des navigateurs

Les flux insérables pour MediaStreamTrack sont compatibles avec Chrome 94 et les versions ultérieures.

Cas d'utilisation

Voici quelques exemples de cas d'utilisation des flux insérables pour MediaStreamTrack :

  • Gadgets de visioconférence tels que des "chapeaux amusants" ou des arrière-plans virtuels.
  • Traitement de la voix comme les vocodeurs logiciels.

Utiliser des flux insérables pour MediaStreamTrack

Détection de caractéristiques

Vous pouvez détecter les flux insérables pour la compatibilité avec MediaStreamTrack comme suit.

if ('MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window) {
  // Insertable streams for `MediaStreamTrack` is supported.
}

Concepts fondamentaux

Les flux insérables pour MediaStreamTrack s'appuient sur des concepts précédemment proposés par WebCodecs et divisent conceptuellement MediaStreamTrack en deux composants :

  • Le MediaStreamTrackProcessor, qui consomme la source d'un objet MediaStreamTrack et génère un flux de frames multimédias, plus précisément des objets VideoFrame ou AudioFrame. Vous pouvez considérer cela comme un récepteur de piste capable d'exposer les frames non encodées de la piste en tant que ReadableStream.
  • MediaStreamTrackGenerator, qui consomme un flux de frames multimédias et expose une interface MediaStreamTrack. Il peut être fourni à n'importe quel récepteur, comme une piste de getUserMedia(). Il prend des frames média en entrée.

Le MediaStreamTrackProcessor

Un objet MediaStreamTrackProcessor expose une propriété, readable. Il permet de lire les frames à partir de MediaStreamTrack. Si la piste est une piste vidéo, les blocs lus à partir de readable seront des objets VideoFrame. Si la piste est une piste audio, les blocs lus à partir de readable seront des objets AudioFrame.

Le MediaStreamTrackGenerator

Un objet MediaStreamTrackGenerator expose également une propriété, writable, qui est un WritableStream permettant d'écrire des frames multimédias dans MediaStreamTrackGenerator, qui est lui-même un MediaStreamTrack. Si l'attribut kind est défini sur "audio", le flux accepte les objets AudioFrame et échoue avec tout autre type. Si le type est "video", le flux accepte les objets VideoFrame et échoue avec tout autre type. Lorsqu'un frame est écrit dans writable, la méthode close() du frame est automatiquement appelée, de sorte que ses ressources multimédias ne sont plus accessibles depuis JavaScript.

Un MediaStreamTrackGenerator est une piste pour laquelle une source personnalisée peut être implémentée en écrivant des frames multimédias dans son champ writable.

Conclusion

L'idée principale est de créer une chaîne de traitement comme suit :

Piste de plate-forme → Processeur → Transformer → Générateur → Récepteurs de plate-forme

L'exemple ci-dessous illustre cette chaîne pour une application de lecteur de code-barres qui met en évidence le code-barres détecté dans un flux vidéo en direct.

const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];

const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' });

const transformer = new TransformStream({
  async transform(videoFrame, controller) {
    const barcodes = await detectBarcodes(videoFrame);
    const newFrame = highlightBarcodes(videoFrame, barcodes);
    videoFrame.close();
    controller.enqueue(newFrame);
  },
});

trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable);

const videoBefore = document.getElementById('video-before');
const videoAfter = document.getElementById('video-after');
videoBefore.srcObject = stream;
const streamAfter = new MediaStream([trackGenerator]);
videoAfter.srcObject = streamAfter;

Démo

Vous pouvez voir la démonstration du lecteur de code QR de la section ci-dessus en action sur un navigateur pour ordinateur ou mobile. Placez un code QR devant la caméra. L'application le détecte et le met en surbrillance. Vous pouvez consulter le code source de l'application sur GitHub.

Lecteur de code QR s&#39;exécutant dans un onglet de navigateur sur ordinateur de bureau, affichant un code QR détecté et mis en évidence sur le téléphone que l&#39;utilisateur tient devant la caméra de l&#39;ordinateur portable.

Considérations sur la sécurité et la confidentialité

La sécurité de cette API repose sur les mécanismes existants de la plate-forme Web. Étant donné que les données sont exposées à l'aide des interfaces VideoFrame et AudioFrame, les règles de ces interfaces pour traiter les données contaminées par l'origine s'appliquent. Par exemple, il est impossible d'accéder aux données des ressources d'origine croisée en raison des restrictions existantes concernant l'accès à ces ressources (par exemple, il n'est pas possible d'accéder aux pixels d'un élément d'image ou vidéo d'origine croisée). De plus, l'accès aux données multimédias provenant des caméras, des micros ou des écrans est soumis à l'autorisation de l'utilisateur. Les données média exposées par cette API sont déjà disponibles via d'autres API.

Commentaires

L'équipe Chromium aimerait connaître votre avis sur les flux insérables pour MediaStreamTrack.

Parlez-nous de la conception de l'API

Y a-t-il un aspect de l'API qui ne fonctionne pas comme prévu ? Ou bien manquent-ils des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre votre idée ? Vous avez une question ou un commentaire sur le modèle de sécurité ? Signalez un problème de spécification dans le dépôt GitHub correspondant ou ajoutez vos commentaires à un problème existant.

Signaler un problème d'implémentation

Avez-vous trouvé un bug dans l'implémentation de Chromium ? Ou l'implémentation est-elle différente de la spécification ? Signalez un bug sur new.crbug.com. Veillez à inclure autant de détails que possible, des instructions simples pour reproduire le problème et saisissez Blink>MediaStream dans la zone Composants.

Soutenir l'API

Prévoyez-vous d'utiliser des flux insérables pour MediaStreamTrack ? Votre soutien public aide l'équipe Chromium à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.

Envoyez un tweet à @ChromiumDev en utilisant le hashtag #InsertableStreams et dites-nous où et comment vous l'utilisez.

Remerciements

La spécification des flux insérables pour MediaStreamTrack a été rédigée par Harald Alvestrand et Guido Urdaneta. Cet article a été examiné par Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout et François Beaufort. Image héros de Chris Montgomery sur Unsplash.