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

浏览器兼容性

另见