VideoTrackGenerator
注意:此功能仅在 专用 Web Worker 中可用。
VideoTrackGenerator
接口属于 Insertable Streams for MediaStreamTrack API,它有一个 WritableStream
属性,该属性通过接收 VideoFrame
帧流作为输入,充当 MediaStreamTrack
的源。
构造函数
VideoTrackGenerator()
Experimental-
创建一个新的
VideoTrackGenerator
对象,该对象接受VideoFrame
对象。
实例属性
VideoTrackGenerator.muted
Experimental-
一个布尔属性,用于临时暂停或恢复输出轨道上的视频帧生成。
VideoTrackGenerator.track
Experimental-
输出的
MediaStreamTrack
。 VideoTrackGenerator.writable
Experimental-
输入的
WritableStream
。
示例
以下示例来自文章 Unbundling MediaStreamTrackProcessor and VideoTrackGenerator。它将相机 MediaStreamTrack
传输到工作线程进行处理。工作线程创建一个管道,对视频帧应用棕褐色滤镜并进行镜像。该管道最终汇聚到一个 VideoTrackGenerator
,其 MediaStreamTrack
被传输回来并播放。媒体现在通过主线程的变换实时流动。
js
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
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);
};
规范
规范 |
---|
使用流进行 MediaStreamTrack 可插入媒体处理 # videotrackgenerator |
浏览器兼容性
加载中…