Как решить Uncaught (в обещании), Не могу установить свойство 'innerHTML' для null на медиа-устройствах Webcam

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.(errorMsg)
2. Вы пытались выбрать элемент до его загрузки в DOM.

Попробуйте выполнить следующее:

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