Invoegbare streams voor MediaStreamTrack

De inhoud van een MediaStreamTrack wordt weergegeven als een stroom die kan worden gemanipuleerd of gebruikt om nieuwe inhoud te genereren

Thomas Steiner

Achtergrond

In de context van de Media Capture and Streams API vertegenwoordigt de MediaStreamTrack interface één mediatrack binnen een stream; doorgaans zijn dit audio- of videotracks, maar er kunnen ook andere tracktypen bestaan. MediaStream objecten bestaan ​​uit nul of meer MediaStreamTrack objecten, die verschillende audio- of videotracks vertegenwoordigen. Elke MediaStreamTrack kan één of meer kanalen hebben. Het kanaal vertegenwoordigt de kleinste eenheid van een mediastream, zoals een audiosignaal dat is gekoppeld aan een bepaalde luidspreker, zoals links of rechts in een stereo-audiotrack.

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 te introduceren.

Door ontwikkelaars rechtstreeks toegang te geven tot de video- (of audio-)stream, kunnen ze wijzigingen direct in de stream aanbrengen. Om dezelfde videomanipulatietaak met traditionele methoden uit te voeren, moeten ontwikkelaars echter tussenpersonen gebruiken, zoals <canvas> -elementen. (Zie bijvoorbeeld video + canvas = magic voor meer informatie over dit type proces.)

Browserondersteuning

Invoegbare streams voor MediaStreamTrack worden ondersteund vanaf Chrome 94.

Gebruiksscenario's

Gebruiksscenario's voor invoegbare streams voor MediaStreamTrack omvatten onder andere:

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

Hoe invoegbare streams voor MediaStreamTrack te gebruiken

Functiedetectie

U kunt als volgt invoegbare streams voor MediaStreamTrack ondersteuning detecteren.

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 gebruikt en een stroom mediaframes genereert, met name VideoFrame of AudioFrame -objecten. Je kunt dit zien als een track-sink die de ongecodeerde frames van de track kan weergeven als een ReadableStream .
  • De MediaStreamTrackGenerator , die een stroom mediaframes gebruikt en een MediaStreamTrack interface beschikbaar stelt. Deze kan aan elke sink worden geleverd, net als een track van getUserMedia() . Hij accepteert mediaframes als invoer.

De MediaStreamTrackProcessor

Een MediaStreamTrackProcessor object maakt één eigenschap beschikbaar: readable . Hiermee kunnen de frames van de MediaStreamTrack worden gelezen. Als het spoor een videospoor is, worden de fragmenten die van readable worden gelezen, VideoFrame -objecten. Als het spoor een audiospoor is, worden de fragmenten die van readable worden gelezen, AudioFrame objecten.

De MediaStreamTrackGenerator

Een MediaStreamTrackGenerator -object maakt eveneens één eigenschap beschikbaar, namelijk writable , een WritableStream waarmee mediaframes naar de MediaStreamTrackGenerator kunnen worden geschreven, die zelf een MediaStreamTrack is. Als het kenmerk kind "audio" is, accepteert de stream AudioFrame -objecten en mislukt deze met elk ander type. Als kind "video" is, accepteert de stream VideoFrame objecten en mislukt deze met elk ander type. Wanneer een frame naar writable wordt geschreven, wordt de close() methode van het frame automatisch aangeroepen, waardoor de mediabronnen 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 bij elkaar brengen

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

Platformspoor → Processor → Transformeren → Generator → Platformputten

Het onderstaande voorbeeld illustreert deze keten voor een barcodescannertoepassing 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;

Demonstratie

Je kunt de demo van de QR-codescanner 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. Je kunt de broncode van de applicatie bekijken op GitHub .

QR-codescanner die in het browsertabblad op de desktop 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 binnen het webplatform. Omdat data wordt vrijgegeven via de interfaces VideoFrame en AudioFrame , gelden de regels van die interfaces voor het omgaan met brongerelateerde data. Zo zijn data van cross-origin bronnen niet toegankelijk vanwege bestaande beperkingen op de toegang tot dergelijke bronnen (het is bijvoorbeeld niet mogelijk om toegang te krijgen tot de pixels van een cross-origin afbeelding of video-element). Bovendien is toegang tot mediadata van camera's, microfoons of schermen onderworpen aan autorisatie van de gebruiker. De mediadata die deze API vrijgeeft, zijn al beschikbaar via andere API's.

Feedback

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

Vertel ons over het API-ontwerp

Werkt er iets aan de API dat niet werkt 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 spec-issue in op de betreffende GitHub-repository of voeg je mening toe aan een bestaand issue.

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 . Zorg ervoor dat je zoveel mogelijk details geeft, eenvoudige instructies voor reproductie, en voer Blink>MediaStream in het vak Componenten in.

Toon ondersteuning voor de API

Bent u van plan invoegbare streams te gebruiken voor MediaStreamTrack ? Uw 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 deze gebruikt.

Dankbetuigingen

De invoegbare streams voor MediaStreamTrack specificatie zijn geschreven door Harald Alvestrand en Guido Urdaneta . Dit artikel is beoordeeld door Harald Alvestrand, Joe Medley , Ben Wagner , Huib Kleinhout en François Beaufort . Heldenafbeelding door Chris Montgomery op Unsplash .