本文详解为何 `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 后再绘制——即可稳定获得可操作、可输出的实时处理流。
