DieInsertable Streams für die MediaStreamTrack API bieten eine Möglichkeit, die Videoframes einesMediaStreamTrack zu verarbeiten, während sie konsumiert werden.

Konzepte und Verwendung

Bei der Verarbeitung von Echtzeit-Video möchten Sie manchmal visuelle Elemente einfügen oder den Stream der Videoframes anderweitig verarbeiten. Zum Beispiel könnte eine Anwendung zwei Tracks enthalten, die kombiniert werden müssen, wie eine Wetterkarte und ein Video eines Moderators, der die Karte erklärt. Oder Sie möchten einen Track bearbeiten, um Hintergründe zu verwischen oder andere Elemente einzuführen (wie das Hinzufügen lustiger Hüte zu Personen usw.). Die hier beschriebenen APIs bieten direkten Zugriff auf den Videostream und ermöglichen es Ihnen, ihn in Echtzeit zu manipulieren.

Um eine optimale Leistung sicherzustellen, sind die APIs nur indedizierten Workern verfügbar (es sei denn, es ist anders angegeben).

Schnittstellen

MediaStreamTrackProcessorExperimentell

Verbraucht die Quelle einesMediaStreamTrack Objekts und erzeugt einen Strom von Videoframes.

VideoTrackGeneratorExperimentell

Erstellt einenWritableStream, der als Videoquelle für einenMediaStreamTrack fungiert.

MediaStreamTrackGeneratorExperimentellNicht standardisiert

Erstellt einenWritableStream, der als Quelle für einenMediaStreamTrack für entweder Video oder Audio fungiert. Nur imHauptthread verfügbar.

Beispiele

Das folgende Beispiel stammt aus dem ArtikelUnbundling MediaStreamTrackProcessor and VideoTrackGenerator. Esüberträgt einen Kamera-MediaStreamTrack zu einem Worker zur Verarbeitung. Der Worker erstellt eine Pipeline, die einen Sepia-Filter auf die Videoframes anwendet und diese spiegelt. Die Pipeline endet in einemVideoTrackGenerator, dessenMediaStreamTrack zurück übertragen und abgespielt wird. Die Medien fließen nun in Echtzeit durch die Transformation außerhalb desHauptthreads.

const stream = await navigator.mediaDevices.getUserMedia({ video: true });const [track] = stream.getVideoTracks();const worker = new Worker("worker.js");worker.postMessage({ track }, [track]);const { data } = await new Promise((r) => (worker.onmessage = r));video.srcObject = new MediaStream([data.track]);

worker.js:

onmessage = async ({ data: { track } }) => {  const vtg = new VideoTrackGenerator();  self.postMessage({ track: vtg.track }, [vtg.track]);  const { readable } = new MediaStreamTrackProcessor({ track });  await readable    .pipeThrough(new TransformStream({ transform }))    .pipeTo(vtg.writable);};

Spezifikationen

Browser-Kompatibilität