如何将摄像头流经 Canvas 处理后正确输出为 MediaStream

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