Flux insérables pour MediaStreamTrack

Thomas Steiner

Publié le 4 mai 2021

Dans le contexte de l' API Media Capture and Streams , l'interface MediaStreamTrack représente une seule piste média dans un flux. Il s'agit généralement de pistes audio ou vidéo tracks, mais d'autres types de pistes peuvent exister.

MediaStream objets sont constitués d' un ou de plusieurs MediaStreamTrack objets, 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 média, comme un signal audio associé à un haut-parleur donné, par exemple gauche ou droit dans une piste audio stéréo.

Que sont les flux insérables pour MediaStreamTrack ?

L'idée principale des flux insérables pour MediaStreamTrack est d'exposer le contenu d'un MediaStreamTrack sous la forme d'une collection de flux (tels que définis par l'API WHATWG Streams). 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), ils peuvent appliquer des modifications directement au flux. En revanche, la même tâche de manipulation vidéo avec des méthodes traditionnelles nécessite que les développeurs utilisent des intermédiaires tels que des éléments <canvas>. (Pour en savoir plus sur ce type de processus, consultez, par exemple, la vidéo + canvas = magic.)

Prise en charge des navigateurs

Les flux insérables pour MediaStreamTrack sont compatibles avec Chrome 94 et 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

Comment utiliser les flux insérables pour MediaStreamTrack

Détectez les flux insérables pour la prise en charge de 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 le MediaStreamTrack en deux composants :

  • Le MediaStreamTrackProcessor, qui utilise la source d'un objet MediaStreamTrack et génère un flux de frames média, en particulier VideoFrame ou AudioFrame) objets. 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.
  • Le MediaStreamTrackGenerator, qui utilise un flux de frames média et expose une MediaStreamTrack interface. Il peut être fourni à n'importe quel récepteur, comme une piste de getUserMedia(). Il prend des frames média comme entrée.

Le MediaStreamTrackProcessor

Un objet MediaStreamTrackProcessor expose une propriété, readable. Il permet de lire les frames à partir du 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 média dans le MediaStreamTrackGenerator, qui est lui-même un MediaStreamTrack. Si l'attribut kind est "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'une frame est écrite dans writable, la méthode close() de la frame est automatiquement appelée, de sorte que ses ressources média ne sont plus accessibles à partir de JavaScript.

Un MediaStreamTrackGenerator est une piste pour laquelle une source personnalisée peut être implémentée en écrivant des frames média 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 → Transformation → Générateur → Récepteurs de plate-forme

L'exemple ci-dessous illustre cette chaîne pour une application de lecteur de codes-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 codes QR de la section ci-dessus en action sur un navigateur pour ordinateur ou mobile. Placez un code QR devant l'appareil photo. L'application le détectera et le mettra en évidence. 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 des mécanismes existants dans la plate-forme Web. Les données étant exposées à l'aide de l'interface VideoFrame et AudioFrame, les règles de ces interfaces pour traiter les données contaminées par l'origine s'appliquent. Par exemple, les données provenant de ressources inter-origines ne sont pas accessibles en raison des restrictions existantes concernant l'accès à ces ressources (par exemple, il n'est pas possible d'accéder aux pixels d' une image ou d'un élément vidéo inter-origines). De plus, l'accès aux données média provenant d'appareils photo, de microphones, ou d'é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 souhaite connaître votre expérience avec les flux insérables pour MediaStreamTrack.

Parlez-nous de la conception de l'API

Y a-t-il quelque chose dans l'API qui ne fonctionne pas comme prévu ? Ou y a-t-il des méthodes ou des propriétés manquantes dont vous avez besoin pour mettre en œuvre votre idée ? Avez-vous 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 lié à l'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 pour la reproduction et saisissez Blink>MediaStream dans la zone Components (Composants).

Compatibilité avec 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 avec le hashtag #InsertableStreams et indiquez-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. Elle a été examinée par Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout, et François Beaufort.