Insertable Streams for MediaStreamTrack API

Beim Verarbeiten von Video- oder Audiodaten möchten Sie manchmal zusätzliche Elemente einfügen oder den Stream anderweitig verarbeiten. Zum Beispiel könnte eine Anwendung zwei Tracks beinhalten, die kombiniert werden müssen, wie eine Wetterkarte und ein Video eines Sprechers, der die Karte erklärt. Oder Sie möchten einen Track verarbeiten, um Hintergründe zu verwischen, Hintergrundgeräusche zu entfernen oder andere Elemente einzuführen (z. B. lustige Hüte auf Personen setzen usw.). Diese API bietet eine Methode, dies zu tun, indem sie direkten Zugriff auf den Stream gewährt und somit dessen Manipulation ermöglicht.

MediaStreamTrackGenerator

Erstellt einen WritableStream, der als Quelle für einen MediaStreamTrack dient.

MediaStreamTrackProcessor

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

Das folgende Beispiel stammt aus dem Artikel Insertable streams for MediaStreamTrack und demonstriert eine Barcode-Scanner-Anwendung, die einen Barcode in einem Videostream hervorhebt. Dies transformiert den Stream, der über MediaStreamTrackProcessor.readable abgerufen wird.

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);