本文详解解决canvas.capturestream()返回黑屏问题的关键：必须启用临时视频元素的autoplay属性，否则无法触发帧捕获，导致输出流无画面。
在使用 canvas.captureStream() 将处理后的视频帧重新封装为 MediaStream 时，一个常见但极易被忽略的陷阱是：用于绘制源视频的 。你的代码中创建了 temp_video，但未设置 autoplay = true，也未等待其 loadeddata 或 canplay 事件，导致 temp_video.videoWidth 和 temp_video.videoHeight 初始为 0，drawImage 实际未绘制任何有效帧——因此 captureStream() 捕获到的是一系列空白帧，最终呈现为黑屏。
✅ 正确做法是：
- 设置 temp_video.autoplay = true 和 temp_video.muted = true（后者为避免浏览器静音策略阻断自动播放）；
- 等待 temp_video 进入可播放状态（推荐监听 'canplay' 事件），再启动绘制循环；
- 确保 canvas 尺寸在视频尺寸确定后才设置，避免 0×0 绘制；
- 使用 requestAnimationFrame 替代 setInterval，以实现更精准、更节能的帧同步（尤其在高负载或低性能设备上）。
以下是修复后的完整可运行示例：
⚠️ 注意事项：
- captureStream() 在 Chrome/Edge 中支持良好，Firefox 也已支持（需较新版本），但 Safari 目前不支持 canvas.captureStream()（截至 Safari 17+ 仍不可用），生产环境需做特性检测与降级处理；
- 若需音频同步处理，请结合 AudioContext 和 MediaStreamAudioSourceNode，但本例仅聚焦视频流；
- 避免在 drawImage 前频繁修改 canvas.width/height（会清空画布并重置上下文），应在尺寸稳定后统一设置。
总结：黑屏并非 captureStream 失效，而是上游数据未就绪所致。确保视频元素可播放、尺寸已知、绘制持续触发，即可稳定输出处理后的媒体流。
