HTML5 video标签无法显示摄像头视频流 求问题排查指导

你遇到的问题主要来自三个核心点：DOM加载时机错误、过时API的兼容性问题，以及现代浏览器中媒体流的正确处理方式，下面给你逐一拆解并给出修复方案：

1. DOM加载时机问题 #

你的脚本放在<head>标签里，当浏览器执行这段代码时，<body>中的<video>元素还没被渲染出来，导致document.querySelector("#video")返回null，后续所有针对video的操作自然都无效。

2. 废弃的getUserMedia API #

Firefox 57已经完全支持标准的navigator.mediaDevices.getUserMedia()接口，旧的navigator.getUserMedia属于过时的非标准API，虽然你做了兼容写法，但这类旧API在现代浏览器中可能存在行为异常，甚至部分厂商已经停止维护。

3. 媒体流赋值方式错误 #

window.URL.createObjectURL(stream)在现代浏览器中已被废弃，正确的做法是直接将媒体流赋值给video.srcObject；另外，即使设置了视频源，浏览器在授予权限后也不会自动播放视频，需要手动调用video.play()。

修改后的完整代码 #

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <title>webcam</title> 
</head> 
<body> 
    <table border="1" width="900" align="center"> 
        <tr align="center"> 
            <td> 
                Web Camera 
                <div id="camera" style="height:300px; width:400px; border-style:solid;"> 
                    <video id="video" width="400" height="300" autoplay playsinline></video> 
                </div> 
            </td> 
            <td> 
                Photo Frame 
                <div id="frame" style="height:300px; width:400px; border-style:solid;"> 
                    <canvas id="canvas" width="400" height="300"></canvas> 
                </div> 
            </td> 
        </tr> 
        <tr align="center"> 
            <td colspan="2"> 
                <button id="snap" onclick="snap()">Snap Photo</button> 
            </td> 
        </tr> 
    </table>

    <script type="text/javascript"> 
        // 确保DOM完全加载后再执行代码
        document.addEventListener('DOMContentLoaded', function() {
            const video = document.querySelector("#video");

            // 使用标准的媒体设备API
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({ video: true })
                    .then(function(stream) {
                        // 正确给video绑定媒体流
                        video.srcObject = stream;
                        // 手动触发播放（兼容部分不支持autoplay的场景）
                        video.play().catch(err => {
                            console.error("视频播放失败:", err);
                        });
                    })
                    .catch(function(e) {
                        console.error("摄像头权限获取失败:", e);
                        alert("无法访问摄像头，请检查浏览器权限设置");
                    });
            } else {
                alert("你的浏览器不支持摄像头访问功能，请升级浏览器");
            }
        });

        // 补充拍照功能的实现逻辑
        function snap() {
            const canvas = document.querySelector("#canvas");
            const ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        }
    </script> 
</body> 
</html>

额外优化说明 #

• 在<video>标签中添加autoplay和playsinline属性：autoplay辅助自动播放（部分浏览器仍需代码调用play()），playsinline解决移动端视频强制全屏的问题。
• 使用Promise形式的API更符合现代JavaScript写法，错误处理也更清晰直观。
• 将脚本放在<body>末尾或用DOMContentLoaded事件包裹，确保能正确获取到页面元素。

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