本文详解为何 `canvas.capturestream()` 返回黑屏视频，并指出关键缺失：未启用临时 `
在 Web 实时音视频处理中，常见模式是：通过 getUserMedia 获取摄像头 MediaStream → 将其赋给一个隐藏
关键问题在于：你创建了 temp_video 元素并设置了 srcObject = stream，但 未启用 autoplay 属性 。根据 HTML 视频规范，仅设置 srcObject 并不足以触发媒体解码； 浏览器 需明确知道该视频应自动播放（尤其在无用户交互上下文中），否则 video.videoWidth 和 video.videoHeight 将长期为 0，drawImage 实际绘制的是 0×0 区域——Canvas 内容为空白，captureStream() 自然输出黑帧。
✅ 正确做法是立即启用 autoplay 和 muted（尤其在无用户手势的上下文中，Chrome/Firefox 要求静音视频才能自动播放）：
const temp_video = document.createElement('video'); temp_video.srcObject = stream; temp_video.autoplay = true; // ← 必须添加 temp_video.muted = true; // ← 强烈推荐（避免 autoplay 策略拦截）此外，原代码中使用 setInterval + 固定毫秒间隔存在隐患：
- 若 drawImage 执行耗时超过间隔（如复杂滤镜、高分辨率），会导致帧堆积或跳帧；
- videoWidth/videoHeight 在流初始化完成前可能仍为 0，需等待 loadedmetadata 事件再启动绘制循环。
以下是修复后的健壮实现：
function manipulatedVideoStream(stream) {const temp_video = document.createElement('video'); const temp_canvas = document.createElement('canvas'); const ctx = temp_canvas.getContext('2d'); // 关键：启用 autoplay & muted temp_video.srcObject = stream; temp_video.autoplay = true; temp_video.muted = true; return new Promise((resolve) => {temp_video.addEventListener('loadedmetadata', () => {// 同步 canvas 尺寸 temp_canvas.width = temp_video.videoWidth; temp_canvas.height = temp_video.videoHeight; // 使用 requestAnimationFrame 实现更稳定的帧捕获 function render() {if (temp_video.readyState === temp_video.HAVE_ENOUGH_DATA) {ctx.drawImage(temp_video, 0, 0, temp_canvas.width, temp_canvas.height); // ✅ 此处可添加图像处理：ctx.filter = 'grayscale(100%)'; 或 getImageData + 操作像素 } requestAnimationFrame(render); } render(); // 启动 captureStream（建议使用 30fps，单位为 fps，非毫秒）resolve(temp_canvas.captureStream(30)); }); }); } // 使用示例（注意 Promise 处理）async function handleSuccess(stream) {try { const processedStream = await manipulatedVideoStream(stream); video.srcObject = processedStream; } catch (err) {console.error('Stream processing failed:', err); } }⚠️ 注意事项：
- captureStream() 在部分旧版 Safari 中不可用，生产环境建议检测支持性：’captureStream’ in HTMLCanvasElement.prototype；
- 若需音频处理，需额外合并 stream.getAudioTracks() 到新流中（captureStream() 仅输出视频轨道）；
- 长时间运行时注意内存：避免在 drawImage 前频繁重设 canvas.width/height（会清空缓冲区并触发 重绘 开销）；
- 用户隐私提示：getUserMedia 需在安全上下文（HTTPS 或 localhost）中运行。
总结：captureStream 黑屏的“元凶”常是上游视频未播放。牢记三要素——autoplay=true、muted=true、loadedmetadata 后再绘制——即可稳定获得可操作、可输出的实时处理流。
