Insertable Streams for MediaStreamTrack API

Beim Verarbeiten von Echtzeitvideos möchten Sie manchmal visuelle Elemente einfügen oder den Videoframe-Stream anderweitig verarbeiten. Beispielsweise könnte eine Anwendung zwei Tracks enthalten, die kombiniert werden müssen, wie eine Wetterkarte und ein Video eines Präsentators, der die Karte erklärt. Oder Sie möchten eine Verarbeitung auf einem Track durchführen, 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, diesen in Echtzeit zu manipulieren.

Um optimale Leistung zu gewährleisten, sind die APIs nur in dedizierten Workern verfügbar (sofern nicht anders angegeben).

MediaStreamTrackProcessor Experimentell

Konsumiert die Quelle eines MediaStreamTrack-Objekts und erzeugt einen Stream von Videoframes.

VideoTrackGenerator Experimentell

Erstellt einen WritableStream, der als MediaStreamTrack-Videoquelle fungiert.

MediaStreamTrackGenerator Experimentell Nicht standardisiert

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

Das folgende Beispiel stammt aus dem Artikel Unbundling MediaStreamTrackProcessor and VideoTrackGenerator. Es überträgt eine Kamera MediaStreamTrack an einen Worker zur Verarbeitung. Der Worker erstellt eine Pipeline, die einen Sepiaton-Filter auf die Videoframes anwendet und sie 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);
};