Insertable Streams for MediaStreamTrack API

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Hinweis: Diese Funktion ist nur in Dedicated Web Workers verfügbar.

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

In diesem Artikel

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

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

VideoTrackGenerator

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

MediaStreamTrackGenerator

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.

js
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:

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

Spezifikation

MediaStreamTrack Insertable Media Processing using Streams

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden