Webcam应用出现overload resolution failed报错问题求助

错误原因 #

• 事件回调参数错误
  你在绑定canplay事件时写的是video.addEventListener('canplay', paint())，加了括号的paint()会在代码执行到这一行时立即调用函数，此时摄像头流还未完成加载，video.videoWidth和video.videoHeight的取值都是0。后续调用ctx.drawImage(video,0,0,width,height)时传入了非法的0值宽高，无法匹配drawImage的合法参数重载，就会触发overload resolution failed报错。
  正确写法是传入函数引用，不需要加括号：video.addEventListener('canplay', paint)

• 视频流赋值逻辑错误
  video.srcObject = window.URL.createObjectURL(localMediaStream)的参数类型不匹配：srcObject属性仅接受MediaStream、MediaSource、Blob、File类型的对象，你传入的是createObjectURL生成的字符串，不符合参数要求。
  目前主流浏览器已经支持直接给srcObject赋值流对象，不需要额外转URL，直接修改为video.srcObject = localMediaStream即可。如果需要兼容旧浏览器，也可以改成video.src = window.URL.createObjectURL(localMediaStream)。

修复后完整代码 #

const video = document.getElementById('webcam');
const canvas = document.getElementById('photo');
const ctx = canvas.getContext('2d');

function getVideo() {
  navigator.mediaDevices.getUserMedia({audio: false, video: true})
    .then(localMediaStream => {
      // 修复流赋值逻辑
      video.srcObject = localMediaStream;
      video.play();
    })
    // 建议加上错误捕获，方便排查权限等问题
    .catch(err => console.error('摄像头访问失败：', err));
}

function paint() {
  const width = video.videoWidth;
  const height = video.videoHeight;
  canvas.width = width;
  canvas.height = height;
  setInterval(() => {
    ctx.drawImage(video, 0, 0, width, height);
  }, 16);
} 

// 修复事件回调传参，传入函数引用而非执行结果
video.addEventListener('canplay', paint);
getVideo();

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