Le contenu d'un MediaStreamTrack est exposé sous la forme d'un flux qui peut être manipulé ou utilisé pour générer de nouveaux contenus
Contexte
Dans le contexte de l'API Media Capture and Streams, l'interface MediaStreamTrack représente une seule piste multimédia 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 sont constitués de zéro, un ou plusieurs objets MediaStreamTrack, représentant diverses pistes audio ou vidéo. Chaque MediaStreamTrack peut être associé à une ou plusieurs chaînes. Le canal représente la plus petite unité d'un flux multimédia, par exemple un signal audio associé à un locuteur donné, comme une piste audio gauche ou droite dans une piste audio stéréo.
Qu'est-ce que des flux insérables pour MediaStreamTrack ?
L'objectif principal des flux insérables pour MediaStreamTrack est d'exposer le contenu d'un MediaStreamTrack sous la forme d'un ensemble de flux (tel que défini par l'API Streams de WHATWG). Ces flux peuvent être manipulés pour introduire de nouveaux composants.
En autorisant les développeurs à accéder directement au flux vidéo (ou audio), ils peuvent y appliquer 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 des éléments <canvas>. (Pour en savoir plus sur ce type de processus, consultez, par exemple, video + canevas = magic.)
Prise en charge des navigateurs
Les flux insérables pour MediaStreamTrack sont compatibles avec Chrome 94.
Cas d'utilisation
Voici quelques cas d'utilisation de flux insérables pour MediaStreamTrack:
- Gadgets de visioconférence, tels que "chapeaux amusants" ou arrière-plans virtuels.
- le traitement vocal tel que les vocodeurs logiciels ;
Utiliser des flux insérables pour MediaStreamTrack
Détection de fonctionnalités
Vous pouvez détecter les flux insérables de caractéristiques 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 les concepts précédemment proposés par WebCodecs et divisent de manière conceptuelle le MediaStreamTrack en deux composants:
- Le
MediaStreamTrackProcessor, qui utilise la source d'un objetMediaStreamTracket génère un flux d'images multimédias, en particulier des objetsVideoFrameouAudioFrame. Vous pouvez le considérer comme un récepteur de piste capable d'exposer les trames non encodées de la piste comme unReadableStream. - Le
MediaStreamTrackGenerator, qui consomme un flux d'images multimédias et expose une interfaceMediaStreamTrack. Il peut être fourni à n'importe quel récepteur, comme une piste provenant degetUserMedia(). Il accepte des images multimédias en entrée.
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 fragments lus à partir de readable sont des objets VideoFrame. Si la piste est une piste audio, les fragments lus à partir de readable sont des objets AudioFrame.
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 "audio", le flux accepte les objets AudioFrame et échoue avec tout autre type. Si le genre est "video", le flux accepte les objets VideoFrame et échoue avec tout autre type. Lorsqu'un frame est écrit sur writable, la méthode close() du frame est automatiquement appelée, de sorte que ses ressources multimédias ne soient 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 de base est de créer une chaîne de traitement comme suit:
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 code-barres qui met en avant un 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émonstration
Vous pouvez regarder 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 pour que l'application le détecte et le met en surbrillance. Vous pouvez afficher le code source de l'application sur Glitch.
Considérations sur la sécurité et la confidentialité
La sécurité de cette API repose sur les mécanismes existants dans la plate-forme Web. Lorsque les données sont exposées à l'aide des interfaces VideoFrame et AudioFrame, les règles de ces interfaces concernant la gestion des données liées à l'origine s'appliquent. Par exemple, il est impossible d'accéder aux données provenant de ressources multi-origines en raison de restrictions existantes concernant l'accès à ces ressources (par exemple, il est impossible d'accéder aux pixels d'une image ou d'un élément vidéo multi-origines). En outre, l'accès aux données multimédias des appareils photo, des micros ou des écrans est soumis à l'autorisation de l'utilisateur. Les données multimédias exposées par cette API sont déjà disponibles via d'autres API.
Commentaires
L'équipe Chromium souhaite connaître votre avis sur les flux pouvant être insérés pour MediaStreamTrack.
Décrivez-nous la conception de l'API.
Y a-t-il quelque chose dans l'API qui ne fonctionne pas comme prévu ? Ou manque-t-il des méthodes ou des propriétés 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 d'implémentation
Avez-vous détecté un bug dans l'implémentation de Chromium ? Ou l'implémentation est-elle différente des spécifications ?
Signalez un bug à l'adresse new.crbug.com. Veillez à inclure autant de détails que possible, ainsi que des instructions simples pour reproduire le bug, puis saisissez Blink>MediaStream dans la zone Composants.
Glitch est idéal pour partager des reproductions simples et rapides.
Afficher la compatibilité avec l'API
Prévoyez-vous d'utiliser des flux insérables pour MediaStreamTrack ? Votre soutien au 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.
Liens utiles
Remerciements
Les flux insérables pour la spécification MediaStreamTrack ont été écrits par Harald Alvestrand et Guido Urdaneta.
Cet article a été lu par Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout et François Beaufort. Image héros de Chris Montgomery sur Unsplash.