VideoTrackGenerator

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Note: This feature is only available in Dedicated Web Workers.

The VideoTrackGenerator interface of the Insertable Streams for MediaStreamTrack API has a WritableStream property that acts as a MediaStreamTrack source, by consuming a stream of VideoFrames as input.

Constructor

VideoTrackGenerator() Experimental: Creates a new VideoTrackGenerator object which accepts VideoFrame objects.

Instance properties

VideoTrackGenerator.muted Experimental: A Boolean property to temporarily halt or resume the generation of video frames in the output track.
VideoTrackGenerator.track Experimental: The output MediaStreamTrack.
VideoTrackGenerator.writable Experimental: The input WritableStream.

The following example is from the article Unbundling MediaStreamTrackProcessor and VideoTrackGenerator. It transfers a camera MediaStreamTrack to a worker for processing. The worker creates a pipeline that applies a sepia tone filter to the video frames and mirrors them. The pipeline culminates in a VideoTrackGenerator whose MediaStreamTrack is transferred back and played. The media now flows in real time through the transform off the main thread.

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