Invoegbare streams voor MediaStreamTrack

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

Thomas Steiner

Achtergrond

In de context van de Media Capture en Streams API vertegenwoordigt de MediaStreamTrack interface een enkele mediatrack binnen een stream; Normaal gesproken 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 een of meer kanalen hebben. Het kanaal vertegenwoordigt de kleinste eenheid van een mediastream, zoals een audiosignaal dat bij een bepaalde luidspreker hoort, zoals links of rechts in een stereoaudiotrack.

Wat zijn invoegbare streams voor MediaStreamTrack ?

Het kernidee achter invoegbare streams voor MediaStreamTrack is om de inhoud van een MediaStreamTrack weer te geven als een verzameling streams (zoals gedefinieerd door de WHATWG Streams API ). Deze stromen kunnen worden gemanipuleerd om nieuwe componenten te introduceren.

Door ontwikkelaars rechtstreeks toegang te geven tot de video- (of audio-)stream, kunnen ze wijzigingen rechtstreeks op de stream aanbrengen. Daarentegen vereist het realiseren van dezelfde videomanipulatietaak met traditionele methoden dat ontwikkelaars tussenpersonen zoals <canvas> -elementen gebruiken. (Zie bijvoorbeeld video + canvas = magie voor details over dit type proces.)

Browser-ondersteuning

Invoegbare streams voor MediaStreamTrack worden ondersteund vanaf Chrome 94.

Gebruiksgevallen

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

  • Gadgets voor videoconferenties zoals "grappige hoeden" of virtuele achtergronden.
  • Spraakverwerking zoals softwarevocoders .

Hoe u invoegbare streams kunt gebruiken voor MediaStreamTrack

Functiedetectie

U kunt invoegbare streams voor MediaStreamTrack ondersteuning als volgt detecteren.

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

Hoofdconcepten

Invoegbare streams voor MediaStreamTrack bouwen voort op concepten die eerder door WebCodecs zijn voorgesteld en splitsen de MediaStreamTrack conceptueel 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 in staat is om de niet-gecodeerde frames van de track weer te geven als een ReadableStream .
  • De MediaStreamTrackGenerator , die een stroom mediaframes verbruikt en een MediaStreamTrack interface blootlegt. Het kan aan elke sink worden geleverd, net als een track van getUserMedia() . Er zijn mediaframes nodig als invoer.

De MediaStreamTrackProcessor

Een MediaStreamTrackProcessor object geeft één eigenschap weer, readable . Hiermee kunnen de frames van de MediaStreamTrack worden gelezen. Als de track een videotrack is, zullen de gelezen stukken uit readable VideoFrame objecten zijn. Als de track een audiotrack is, zijn de uit readable delen gelezen AudioFrame objecten.

De MediaStreamTrackGenerator

Een MediaStreamTrackGenerator object stelt eveneens één eigenschap beschikbaar, writable , wat een WritableStream is waarmee mediaframes naar de MediaStreamTrackGenerator kunnen worden geschreven, die zelf een MediaStreamTrack is. Als het kind attribuut "audio" is, accepteert de stream AudioFrame objecten en mislukt het met elk ander type. Als de soort "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, zodat 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.

Het allemaal samenbrengen

Het kernidee is om als volgt een verwerkingsketen te creëren:

Platformspoor → Processor → Transformeren → Generator → Platformgootstenen

Het onderstaande voorbeeld illustreert deze keten voor een streepjescodescannertoepassing die gedetecteerde streepjescodes 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

U 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 zal deze detecteren en markeren. U kunt de broncode van de applicatie bekijken op Glitch .

QR-codescanner actief op het browsertabblad van de desktop en 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 afhankelijk van bestaande mechanismen in het webplatform. Omdat gegevens worden vrijgegeven met behulp van de VideoFrame en AudioFrame interfaces, zijn de regels van die interfaces voor het omgaan met oorsprongsbesmette gegevens van toepassing. Gegevens uit cross-origin bronnen zijn bijvoorbeeld 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 de toegang tot mediagegevens van camera's, microfoons of schermen onderworpen aan toestemming van de gebruiker. De mediagegevens die deze API openbaar maakt, zijn al beschikbaar via andere API's.

Feedback

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

Vertel ons over het API-ontwerp

Is 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? Heeft u een vraag of opmerking over het beveiligingsmodel? Dien een spec issue in op de corresponderende GitHub repository , of voeg uw gedachten toe aan een bestaand issue.

Meld een probleem met de implementatie

Heb je een bug gevonden in de implementatie van Chromium? Of wijkt de uitvoering af van de specificaties? Dien een bug in op new.crbug.com . Zorg ervoor dat u zoveel mogelijk details en eenvoudige instructies voor het reproduceren opneemt, en voer Blink>MediaStream in het vak Componenten in. Glitch werkt uitstekend voor het delen van snelle en gemakkelijke reproducties.

Toon ondersteuning voor de API

Bent u 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 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 .