Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
Note: Consider using VideoTrackGenerator instead.
The MediaStreamTrackGenerator interface of the Insertable Streams for MediaStreamTrack API creates a WritableStream that acts as a MediaStreamTrack source. The object consumes a stream of media frames as input, which can be audio or video frames.
MediaStreamTrackGenerator() Experimental Non-standard
Creates a new MediaStreamTrackGenerator object which accepts either VideoFrame or AudioData objects.
This interface also inherits properties from MediaStreamTrack.
MediaStreamTrackGenerator.writable Experimental Non-standard
This interface doesn't implement any specific methods, but inherits methods from MediaStreamTrack.
The following example is from the article Insertable streams for MediaStreamTrack, and demonstrates a barcode scanner application, which process barcodes and highlights them before writing the transformed frames to the writable stream of MediaStreamTrackGenerator.writable.
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);
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
MediaStreamTrackGenerator |
94 | 94 | No | 80 | No | 94 | No | 66 | No | 17.0 | 94 | No |
MediaStreamTrackGenerator |
94 | 94 | No | 80 | No | 94 | No | 66 | No | 17.0 | 94 | No |
writable |
94 | 94 | No | 80 | No | 94 | No | 66 | No | 17.0 | 94 | No |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrackGenerator