javascript - 如何解决未捕获（承诺），无法在网络摄像头媒体设备上设置属性“innerHTML”为空

Question

我正在研究“ mediaDevices”以尝试使用 javascript 捕获网络摄像头。下面是我的代码。

'use strict';

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap = document.getElementById("snap");
const errorMsgElement = document.querySelector('span#errorMsg');

const constraints = {
  audio: true,
  video: {
    width: 1280, height: 720
  }
};
// Access webcam
async function init() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
  } catch (e) {
    //console.error('navigator.getUserMedia error:', e);
    errorMsgElement.innerHTML = e.toString();
  }
}

// Success
function handleSuccess(stream) {
  //console.log('getUserMedia() got stream:', stream);
  window.stream = stream;
  video.srcObject = stream;
}

// Load init
init();

我已经在 google chrome 中启用了网络摄像头设置，但我有 ' Cannot set property 'innerHTML' of null' 代替。我是javascript新手，任何建议或指导将不胜感激，谢谢。

Answer 1

这里有两件事可能不正确：

1. 您不小心拼错了 id 标签。（错误消息）
2. 您已经尝试在元素加载到 DOM 之前选择元素。

尝试以下操作：

document.addEventListener('DOMContentLoaded', function() {
   // your code here
});