JS使用navigator.mediaDevices.getUserMedia调用摄像头报srcObject空对象错误如何解决

• ID选择错误：document.getElementById() 方法的入参不需要加#前缀（#是querySelector的选择器语法），且你实际<video>标签的id属性值为videoElement，代码中错误填写为videoInput，导致获取到的video对象为null，赋值srcObject时触发空对象报错。
• 标签语法错误：<video>标签未闭合，可能导致DOM解析异常。
• 执行时机错误：JS代码在DOM未完成渲染时就执行，此时还未解析到<video>标签，也会获取到空对象。
• 环境要求错误：调用getUserMedia接口的页面必须运行在localhost或HTTPS环境下，否则浏览器会默认禁止权限申请。

<video autoplay="true" id="videoElement"></video>
<script>
// 等待DOM完全加载后再执行摄像头初始化逻辑
document.addEventListener('DOMContentLoaded', initialize_camera);

function initialize_camera(){
  // 正确获取video元素，入参为标签id属性的值，不需要加#
  let video = document.getElementById("videoElement");
  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
      .then(function(stream) {
          video.srcObject = stream;
          video.play();
      })
      .catch(function(err) {
          console.log("An error occurred! " + err);
      });
}
</script>

• 如果你需要给opencv.js读取视频帧，需要给<video>标签额外设置width和height属性，保证画布尺寸匹配你的处理需求。
• 调用cv.VideoCapture读取帧的逻辑需要在摄像头成功开启、video元素触发canplay事件后再执行，避免读取到空帧。

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