MediaStreamTrackProcessor/Generator：视频帧处理与特效管线

概述`MediaStreamTrackProcessor` 可将媒体轨转换为带 `VideoFrame` 的可读流，`MediaStreamTrackGenerator` 将帧写回为媒体轨。结合 TransformStream 可进行帧级处理与特效。用法/示例const stream = await navigator.mediaDevices.getUserMedia({ video: true })

const track = stream.getVideoTracks()[0]

const processor = new MediaStreamTrackProcessor({ track })

const generator = new MediaStreamTrackGenerator({ kind: 'video' })

const transformer = new TransformStream({

async transform(frame, controller) {

// 示例：直接透传，实际可用 Canvas/WebGL 进行滤镜处理

controller.enqueue(frame)

frame.close()

}

})

processor.readable.pipeThrough(transformer).pipeTo(generator.writable)

const output = new MediaStream([generator])

工程建议在 Worker/OffscreenCanvas 中进行处理，降低主线程干扰；控制分辨率与帧率以稳定时延。规范帧的关闭与资源回收，避免内存泄漏；对失败帧做保护性处理。在不支持环境回退到 `<canvas>` 渲染与 `captureStream()`。参考与验证MDN：VideoFrame — https://developer.mozilla.org/docs/Web/API/VideoFrameweb.dev：Bring your own effects — https://web.dev/articles/mediastreamtrackprocessor