VideoTrackGenerator
注意:此功能仅在 专用 Web Worker 中可用。
VideoTrackGenerator 接口属于 Insertable Streams for MediaStreamTrack API,它有一个 WritableStream 属性,该属性通过接收 VideoFrame 帧流作为输入,充当 MediaStreamTrack 的源。
构造函数
VideoTrackGenerator()Experimental-
创建一个新的
VideoTrackGenerator对象,该对象接受VideoFrame对象。
实例属性
VideoTrackGenerator.mutedExperimental-
一个布尔属性,用于临时暂停或恢复输出轨道上的视频帧生成。
VideoTrackGenerator.trackExperimental-
输出的
MediaStreamTrack。 VideoTrackGenerator.writableExperimental-
输入的
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 |
浏览器兼容性
加载中…