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()-
Creates a new
VideoTrackGeneratorobject which acceptsVideoFrameobjects.
Instance properties
VideoTrackGenerator.muted-
A Boolean property to temporarily halt or resume the generation of video frames in the output track.
VideoTrackGenerator.track-
The output
MediaStreamTrack. VideoTrackGenerator.writable-
The input
WritableStream.
Examples
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);
};
Specifications
| Specification |
|---|
| MediaStreamTrack Insertable Media Processing using Streams # videotrackgenerator |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
VideoTrackGenerator
|
|
|
|
|
|
|
|
|
|
|
|
|
VideoTrackGenerator() constructor
|
|
|
|
|
|
|
|
|
|
|
|
|
muted
|
|
|
|
|
|
|
|
|
|
|
|
|
track
|
|
|
|
|
|
|
|
|
|
|
|
|
writable
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.