MediaStreamTrack 的内容会以流的形式公开，可进行操控或用于生成新内容
背景
在 Media Capture and Streams API 的上下文中，MediaStreamTrack 接口表示流中的单个媒体轨道；通常，这些是音频或视频轨道，但也可能存在其他轨道类型。MediaStream 对象由零个或多个 MediaStreamTrack 对象组成，代表各种音频轨道或视频轨道。每个 MediaStreamTrack 可以有一个或多个通道。声道表示媒体流的最小单元，例如与给定扬声器关联的音频信号，例如立体声音轨中的左声道或右声道。
什么是 MediaStreamTrack 的可插入式数据流？
MediaStreamTrack 可插入式数据流背后的核心理念是将 MediaStreamTrack 的内容作为一系列数据流（如 WHATWG Streams API 所定义）进行公开。这些数据流可用于引入新组件。
直接向开发者授予对视频（或音频）串流的访问权限，可让他们直接对串流应用修改。相比之下，若要使用传统方法实现相同的视频处理任务，开发者需要使用 <canvas> 元素等中介。（如需详细了解此类流程，请参阅视频 + 画布 = 魔力一文。）
浏览器支持
从 Chrome 94 开始，系统支持 MediaStreamTrack 的可插入式数据流。
使用场景
MediaStreamTrack 的可插入式串流的用例包括但不限于：
- 视频会议小工具，例如“搞笑的帽子”或虚拟背景。
- 语音处理，例如软件声码器。
如何为 MediaStreamTrack 使用可插入式数据流
功能检测
您可以按如下方式针对 MediaStreamTrack 支持进行可插入式数据流特征检测。
if ('MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window) {
// Insertable streams for `MediaStreamTrack` is supported.
}
核心概念
MediaStreamTrack 的可插入流基于 WebCodecs 之前提出的概念，并在概念上将 MediaStreamTrack 拆分为两个组件：
MediaStreamTrackProcessor，用于使用MediaStreamTrack对象的来源并生成媒体帧流，具体而言是VideoFrame或AudioFrame对象。您可以将其视为轨道接收器，该接收器能够将轨道中的未编码帧公开为ReadableStream。MediaStreamTrackGenerator，用于使用媒体帧流并公开MediaStreamTrack接口。它可以提供给任何接收器，就像getUserMedia()中的轨道一样。它将媒体帧作为输入。
MediaStreamTrackProcessor
MediaStreamTrackProcessor 对象公开一个属性：readable。它允许从 MediaStreamTrack 读取帧。如果轨道是视频轨道，则从 readable 读取的块将是 VideoFrame 对象。如果轨道是音轨，则从 readable 读取的块将是 AudioFrame 对象。
MediaStreamTrackGenerator
MediaStreamTrackGenerator 对象同样公开了一个属性，即 writable，它是一个 WritableStream，允许将媒体帧写入 MediaStreamTrackGenerator（本身就是一个 MediaStreamTrack）。如果 kind 属性为 "audio"，则串流接受 AudioFrame 对象，并会因任何其他类型而失败。如果 kind 为 "video"，则串流接受 VideoFrame 对象，并会在遇到任何其他类型时失败。当某个帧被写入 writable 时，系统会自动调用该帧的 close() 方法，这样，您将无法再通过 JavaScript 访问其媒体资源。
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);
const videoBefore = document.getElementById('video-before');
const videoAfter = document.getElementById('video-after');
videoBefore.srcObject = stream;
const streamAfter = new MediaStream([trackGenerator]);
videoAfter.srcObject = streamAfter;
演示
您可以在桌面浏览器或移动浏览器中查看上一部分中的二维码扫描器演示。将二维码放在摄像头前方，应用会检测到二维码并将其突出显示。您可以在 Glitch 上查看应用的源代码。
安全与隐私注意事项
此 API 的安全性依赖于 Web 平台中的现有机制。由于数据是使用 VideoFrame 和 AudioFrame 接口公开的，因此适用这些接口关于处理有源污点的数据的规则。例如，由于对访问跨源资源的数据施加了限制（例如，无法访问跨源图片或视频元素的像素），因此无法访问来自跨源资源的数据。此外，应用必须获得用户授权，才能访问摄像头、麦克风或屏幕中的媒体数据。此 API 公开的媒体数据已通过其他 API 提供。
反馈
Chromium 团队希望了解您使用 MediaStreamTrack 插入式串流的体验。
请向我们说明 API 设计
API 是否有某些方面未按预期运行？或者，您是否缺少实现想法所需的方法或属性？您对安全模型有疑问或意见吗？在相应的 GitHub 代码库中提交规范问题，或在现有问题中添加您的想法。
报告实现方面的问题
您是否发现了 Chromium 实现方面的错误？或者，实现是否与规范不同？
在 new.crbug.com 上提交 bug。请务必提供尽可能多的详情以及有关重现的简单说明，并在组件框中输入 Blink>MediaStream。故障非常适合分享快速简便的重现步骤。
表示对 API 的支持
您是否打算为 MediaStreamTrack 使用可插入式串流？您的公开支持有助于 Chromium 团队确定功能的优先级，并向其他浏览器供应商表明支持这些功能的重要性。
使用 #InsertableStreams 标签向 @ChromiumDev 发送推文，告诉我们您在哪里以及如何使用该工具。
实用链接
致谢
MediaStreamTrack 规范的可插入流由 Harald Alvestrand 和 Guido Urdaneta 编写。本文由 Harald Alvestrand、Joe Medley、Ben Wagner、Huib Kleinhout 和 François Beaufort 审核。主打图片由 Unsplash 用户 Chris Montgomery 提供。