网页摄像头流不可见是否由编解码器导致？求排查方案

先修复代码里的致命错误 #

你的代码里有两个直接导致视频不显示的问题：

1. <body&quot;> 是语法错误，应该改成 <body>
2. 在getUserMedia的成功回调里绑定DOMContentLoaded事件完全没必要——你的脚本已经写在<video>标签后面，此时DOM早就加载完成了，这个事件根本不会触发，等于从来没把媒体流绑定到视频元素上。另外catch块里的参数是error，但你写了console.log("error camera acces", e);，e未定义会触发控制台报错。

修复后的完整代码：

<html lang="fr">
    <head>
    </head>

    <body>
        <main>
            <video style="background-color: blue;" id="playback" width="60%" height="60%" autoplay muted playsinline></video>
            <script>
                const constraints = {
                    video: {
                        width: {
                            min: 1280,
                            ideal: 1920,
                            max: 2560,
                        },
                        height: {
                            min: 720,
                            ideal: 1080,
                            max: 1440
                        },
                    }
                };

                if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
                    console.log("OK getUserMedia")
                } else {
                    console.log("!OK getUserMedia")
                }

                navigator.mediaDevices.getUserMedia(constraints)
                .then(function(stream){
                    console.log("cam on");
                    const video = document.getElementById("playback");
                    video.srcObject = stream;
                })
                .catch(function(error) {
                    console.log("error camera acces", error);
                })
            </script>
        </main>
    </body>
</html>

关于编解码器的疑问 #

• 从你测试本地视频也无法播放的情况来看，不是编解码器的问题——如果是编解码器不支持，本地视频至少会显示播放控件但无法播放，而你连画面都看不到，说明视频元素本身没被正确初始化。
• 确实可以通过constraints指定编解码器，但写法要符合规范，比如针对Chrome可以这么写：

  const constraints = {
      video: {
          width: {...},
          height: {...},
          optional: [{ codec: 'H264' }]
      }
  };
  

  但你的问题根源不在这，先搞定代码错误再说。

其他排查方向 #

• 打开浏览器控制台（F12）看是否有报错：之前的catch块写错变量名会报错，修复后如果还有其他错误，直接看提示就能定位问题。
• 确认浏览器权限：虽然console显示"cam on"，但手动去浏览器设置里检查一下摄像头权限是否真的给了当前页面，有时候权限弹窗会被广告拦截工具挡住。
• 简化测试：写一个最极简的demo，只保留必要的video标签和getUserMedia代码，排除任何多余的样式或结构干扰，看看能不能正常显示。
• 检查视频元素样式：确保没有display: none、opacity: 0这类隐藏元素的样式，虽然你说设置了visibility，但再确认一遍。

内容的提问来源于stack exchange，提问作者Tsu'Na