Insertable Streams for MediaStreamTrack API

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 in dedizierten Workern verfügbar (es sei denn, es ist anders angegeben).

Schnittstellen

MediaStreamTrackProcessor Experimentell

Verbraucht die Quelle eines MediaStreamTrack Objekts und erzeugt einen Strom von Videoframes.

VideoTrackGenerator Experimentell

Erstellt einen WritableStream, der als Videoquelle für einen MediaStreamTrack fungiert.

MediaStreamTrackGenerator Experimentell Nicht standardisiert

Erstellt einen WritableStream, der als Quelle für einen MediaStreamTrack für entweder Video oder Audio fungiert. Nur im Hauptthread verfügbar.

Beispiele

Das folgende Beispiel stammt aus dem Artikel Unbundling 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 einem VideoTrackGenerator, dessen MediaStreamTrack zurück übertragen und abgespielt wird. Die Medien fließen nun in Echtzeit durch die Transformation außerhalb des Hauptthreads.

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