本文详解解决canvas.capturestream()返回黑屏问题的关键：必须启用临时视频元素的autoplay属性，否则视频帧无法解码，导致canvas内容为空。
在Web实时音视频处理中，一个常见需求是：捕获用户摄像头流 → 在
核心原因在于：
你的代码中创建了temp_video用于接收原始流，但遗漏了关键一行：
temp_video.autoplay = true; // ✅ 必须添加！
此外，还需注意以下几点以确保稳定性：
- 等待元数据就绪：在设置srcObject后，应监听loadedmetadata事件，确保视频尺寸可用后再初始化Canvas尺寸，避免videoWidth为0；
- 主动触发播放：部分浏览器（尤其移动端）对自动播放策略更严格，建议调用temp_video.play().catch(...)增强兼容性；
- 帧率同步优化：setInterval易受JS执行延迟影响，推荐改用requestAnimationFrame实现更平滑的逐帧捕获；
- Canvas尺寸动态适配：视频分辨率可能随设备变化，应在resize或loadedmetadata中更新Canvas宽高。
修正后的完整可运行示例：
⚠️ 注意事项总结：
- temp_video必须设置autoplay = true且建议muted = true，否则在多数现代浏览器（尤其iOS Safari、Chrome on Android）中无法解码帧；
- 不要依赖setInterval控制帧率——captureStream()本身会按需采集Canvas最新状态，requestAnimationFrame更可靠；
- captureStream()返回的流默认以Canvas刷新频率为基准，无需手动传入帧率参数（传入反而可能引发兼容性问题）；
- 若需音频同步，请额外从原始流中分离音频轨道并合并至处理后的视频流（使用new MediaStream([videoTrack, audioTrack])）。
掌握这一关键点，即可稳定实现“摄像头→Canvas处理→MediaStream输出”的闭环流程。
