摄像头输入经Canvas处理后返回MediaStream失败，输出黑屏求助

你的代码出现黑屏的核心原因是临时视频元素未正确加载播放，导致绘制到Canvas时没有有效画面，同时还有几处细节问题需要修正：

主要错误点 #

• 临时创建的temp_video没有设置autoplay、muted、playsinline属性，受浏览器自动播放策略限制，视频不会自动开始播放，drawImage始终拿不到画面
• 直接在设置srcObject后就启动定时器绘制，此时视频还未加载完成（没有获取到视频的宽高信息），绘制操作无效
• drawImage时使用了temp_video.width元素宽高，而非视频的实际宽高videoWidth/videoHeight，会导致画面拉伸或绘制空白

修复后的完整代码 #

<html>
<head></head>
<body>
    <video id="video-id" playsinline autoplay></video>
</body>
<script type="application/javascript">
    const video = document.getElementById('video-id');

    function manipulatedVideoStream(stream) {
        const temp_video = document.createElement('video');
        const temp_canvas = document.createElement('canvas');

        // 必须设置这些属性才能让视频自动播放
        temp_video.autoplay = true;
        temp_video.muted = true;
        temp_video.playsinline = true;
        temp_video.srcObject = stream;

        let animationId;
        // 等视频加载完成后再开始绘制
        temp_video.addEventListener('loadedmetadata', () => {
            temp_canvas.width = temp_video.videoWidth;
            temp_canvas.height = temp_video.videoHeight;
            const context = temp_canvas.getContext('2d');

            // 使用requestAnimationFrame替代setInterval，更贴合浏览器渲染帧率
            function drawFrame() {
                context.drawImage(temp_video, 0, 0, temp_video.videoWidth, temp_video.videoHeight);
                // 在这里添加自定义绘制逻辑
                animationId = requestAnimationFrame(drawFrame);
            }
            drawFrame();
        });

        // 捕获流时指定帧率
        return temp_canvas.captureStream(30);
    }

    const constraints = {
        audio: false,
        video: true
    };

    function handleSuccess(stream) {
        video.srcObject = manipulatedVideoStream(stream);
    }

    function handleError(error) {
        console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
    }

    navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
</script>
</html>

关键修复说明 #

1. 临时视频元素配置：给temp_video添加autoplay、muted、playsinline，绕过浏览器自动播放限制，确保视频能自动加载播放
2. 等待视频加载完成：监听loadedmetadata事件，确保视频宽高信息已获取后再初始化Canvas并开始绘制
3. 使用requestAnimationFrame：相比setInterval，它能和浏览器渲染周期同步，避免丢帧或绘制不同步的问题
4. 正确使用视频宽高：绘制时使用videoWidth和videoHeight，保证画面尺寸和原视频一致

内容的提问来源于stack exchange，提问作者Kris