Как отобразить веб-камеру в Div с помощью JavaScript

Чтобы получить доступ и отобразить изображение с веб-камеры в элементе

с помощью JavaScript, вы можете использовать API WebRTC. Вот пример того, как этого можно добиться:

<!DOCTYPE html>
<html>
<head>
  <title>Webcam on Div - JavaScript</title>
</head>
<body>
  <div id="videoContainer"></div>
  <script>
    // Access the user's webcam
    navigator.mediaDevices.getUserMedia({ video: true })
      .then(function(stream) {
        var video = document.createElement('video');
        video.srcObject = stream;
        video.autoplay = true;
        var videoContainer = document.getElementById('videoContainer');
        videoContainer.appendChild(video);
      })
      .catch(function(error) {
        console.log('Error accessing webcam:', error);
      });
  </script>
</body>
</html>

В этом примере мы используем метод navigator.mediaDevices.getUserMedia()для запроса доступа к веб-камере пользователя. Если пользователь предоставляет разрешение, поток веб-камеры получается и назначается динамически создаваемому элементу . Затем элемент добавляется к элементу

с идентификатором videoContainer, который будет отображать изображение с веб-камеры.