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