Invoegbare streams voor MediaStreamTrack

Thomas Steiner

Gepubliceerd: 4 mei 2021

In de context van de Media Capture and Streams API vertegenwoordigt de MediaStreamTrack interface een enkele mediatrack binnen een stream. Meestal gaat het om audio- of videotracks, maar er kunnen ook andere tracktypen voorkomen.

MediaStream objecten bestaan ​​uit nul of meer MediaStreamTrack objecten, die verschillende audio- of videosporen vertegenwoordigen. Elke MediaStreamTrack kan één of meer kanalen hebben. Een kanaal vertegenwoordigt de kleinste eenheid van een mediastroom, zoals een audiosignaal dat is gekoppeld aan een bepaalde luidspreker, bijvoorbeeld links of rechts in een stereo-audiospoor.

Wat zijn invoegbare streams voor MediaStreamTrack ?

Het kernidee achter invoegbare streams voor MediaStreamTrack is om de inhoud van een MediaStreamTrack beschikbaar te stellen als een verzameling streams (zoals gedefinieerd door de WHATWG Streams API ). Deze streams kunnen worden gemanipuleerd om nieuwe componenten toe te voegen.

Door ontwikkelaars rechtstreeks toegang te geven tot de video- (of audio)stream, kunnen ze direct wijzigingen aanbrengen in de stream. Bij traditionele methoden is het daarentegen nodig om tussenpersonen zoals <canvas> -elementen te gebruiken voor dezelfde videobewerking. (Zie bijvoorbeeld video + canvas = magic voor meer informatie over dit proces.)

Browserondersteuning

Invoegbare streams voor MediaStreamTrack worden vanaf Chrome 94 ondersteund.

Gebruiksvoorbeelden

Gebruiksscenario's voor invoegbare streams voor MediaStreamTrack omvatten, maar zijn niet beperkt tot:

  • Gadgets voor videoconferenties, zoals 'grappige hoedjes' of virtuele achtergronden.
  • Stemverwerking zoals software- vocoders .

Hoe gebruik je invoegbare streams voor MediaStreamTrack

Detecteer invoegbare streams voor MediaStreamTrack -ondersteuning als volgt.

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

Kernconcepten

Invoegbare streams voor MediaStreamTrack bouwen voort op concepten die eerder door WebCodecs zijn voorgesteld en splitsen MediaStreamTrack conceptueel op in twee componenten:

  • De MediaStreamTrackProcessor , die de bron van een MediaStreamTrack object verbruikt en een stroom mediaframes genereert (specifiek VideoFrame of AudioFrame objecten). Je kunt dit zien als een track sink die de niet-gecodeerde frames van de track beschikbaar kan stellen als een ReadableStream .
  • De MediaStreamTrackGenerator , die een stroom mediaframes verwerkt en een MediaStreamTrack interface beschikbaar stelt. Deze kan aan elke sink worden doorgegeven, net als een track van getUserMedia() . De interface neemt mediaframes als invoer.

De MediaStreamTrackProcessor

Een MediaStreamTrackProcessor object heeft één eigenschap, readable . Deze eigenschap maakt het mogelijk om de frames van de MediaStreamTrack te lezen. Als het een videotrack is, zullen de uit readable gelezen frames VideoFrame -objecten zijn. Als het een audiotrack is, zullen de uit readable gelezen frames AudioFrame objecten zijn.

De MediaStreamTrackGenerator

Een MediaStreamTrackGenerator object heeft eveneens één eigenschap, writable , die een WritableStream is waarmee mediaframes naar de MediaStreamTrackGenerator kunnen worden geschreven. De MediaStreamTrackGenerator zelf is een MediaStreamTrack . Als het attribuut kind "audio" is, accepteert de stream AudioFrame objecten en wordt elk ander type geweigerd. Als `kind` "video" is, accepteert de stream VideoFrame objecten en wordt elk ander type geweigerd. Wanneer een frame naar writable wordt geschreven, wordt de ` close() `-methode van het frame automatisch aangeroepen, zodat de mediaresources niet langer toegankelijk zijn vanuit JavaScript.

Een MediaStreamTrackGenerator is een track waarvoor een aangepaste bron kan worden geïmplementeerd door mediaframes naar het writable veld te schrijven.

Alles samenbrengen

Het kernidee is om de volgende verwerkingsketen te creëren:

Platformspoor → Processor → Transformator → Generator → Platformafvoer

Het onderstaande voorbeeld illustreert deze keten voor een barcodescanner-applicatie die gedetecteerde barcodes in een live videostream markeert.

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;

Demo

Je kunt de QR-codescannerdemo uit het bovenstaande gedeelte in actie zien op een desktop- of mobiele browser. Houd een QR-code voor de camera en de app detecteert en markeert deze. De broncode van de applicatie is te vinden op GitHub .

Een QR-codescanner die in een browsertabblad op het bureaublad draait, toont een gedetecteerde en gemarkeerde QR-code op de telefoon die de gebruiker voor de camera van de laptop houdt.

Beveiligings- en privacyoverwegingen

De beveiliging van deze API is gebaseerd op bestaande mechanismen in het webplatform. Omdat gegevens worden ontsloten via de VideoFrame en AudioFrame interfaces, gelden de regels van die interfaces voor het omgaan met data die mogelijk is aangetast door de herkomst. Zo is het bijvoorbeeld niet mogelijk om toegang te krijgen tot data van bronnen van een andere oorsprong vanwege bestaande beperkingen op de toegang tot dergelijke bronnen (het is bijvoorbeeld niet mogelijk om de pixels van een afbeelding of video-element van een andere oorsprong te benaderen). Daarnaast is toegang tot mediadata van camera's, microfoons of schermen onderworpen aan gebruikersautorisatie. De mediadata die deze API ontsluit, zijn al beschikbaar via andere API's.

Feedback

Het Chromium-team wil graag meer horen over uw ervaringen met invoegbare streams voor MediaStreamTrack .

Vertel ons iets over het API-ontwerp.

Werkt er iets aan de API niet zoals je had verwacht? Of ontbreken er methoden of eigenschappen die je nodig hebt om je idee te implementeren? Heb je een vraag of opmerking over het beveiligingsmodel? Dien een specificatieprobleem in op de bijbehorende GitHub-repository , of voeg je gedachten toe aan een bestaand probleem.

Meld een probleem met de implementatie.

Heb je een bug gevonden in de implementatie van Chromium? Of wijkt de implementatie af van de specificatie? Meld een bug op new.crbug.com . Vermeld zoveel mogelijk details, instructies voor het reproduceren van de bug en voer Blink>MediaStream in bij het veld Components .

Ondersteuning voor de API

Ben je van plan om invoegbare streams te gebruiken voor MediaStreamTrack ? Jouw publieke steun helpt het Chromium-team bij het prioriteren van functies en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Stuur een tweet naar @ChromiumDev met de hashtag #InsertableStreams en laat ons weten waar en hoe je het gebruikt.

Dankbetuigingen

De specificatie voor invoegbare streams voor MediaStreamTrack is geschreven door Harald Alvestrand en Guido Urdaneta . Deze specificatie is beoordeeld door Harald Alvestrand, Joe Medley , Ben Wagner , Huib Kleinhout en François Beaufort .