媒体流轨道 API 的可插入流

媒体流轨道 API 的可插入流提供了一种向MediaStreamTrack添加新组件的方法。

概念和用法

在处理视频或音频时，有时您可能希望插入其他元素或以其他方式处理流。例如，应用程序可能包含需要组合在一起的两个轨道，例如天气地图和解释地图的演示者的视频。或者，您可能希望对轨道进行处理以模糊背景、消除背景噪音或引入其他元素（例如为人们添加有趣的帽子等等）。此 API 通过提供对流的直接访问权限，从而允许对其进行操作，从而提供了一种执行此操作的方法。

接口

MediaStreamTrackGenerator: 创建一个充当MediaStreamTrack源的WritableStream。
MediaStreamTrackProcessor: 使用MediaStreamTrack对象的源并生成媒体帧流。

示例

以下示例来自文章媒体流轨道上的可插入流，并演示了一个条形码扫描仪应用程序，该应用程序突出显示视频流中的条形码。这将通过 MediaStreamTrackProcessor.readable 访问的流进行转换。

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);