如何在 JavaScript 中打开网络摄像头？

在本文中，我们将了解如何使用 JavaScript 打开网络摄像头并显示实时视频。为此，我们将使用 Navigator 媒体设备。

Navigator Media Devices：它是一个只读属性，它返回一个 Media Devices 对象，它帮助我们访问连接的媒体输入设备，如相机和麦克风。

句法 ：

var mediaDevices = navigator.mediaDevices;

例子：

HTML

  
    
    
    
    Web Cam
    
      document.addEventListener("DOMContentLoaded", () => {
        var but = document.getElementById("but");
        var video = document.getElementById("vid");
        var mediaDevices = navigator.mediaDevices;
        vid.muted = true;
        but.addEventListener("click", () => {
  
          // Accessing the user camera and video.
          mediaDevices
            .getUserMedia({
              video: true,
              audio: true,
            })
            .then((stream) => {
  
              // Changing the source of video to current stream.
              video.srcObject = stream;
              video.addEventListener("loadedmetadata", () => {
                video.play();
              });
            })
            .catch(alert);
        });
      });
    
  
  
  
    div {
      width: 500px;
      height: 400px;
      border: 2px solid black;
      position: relative;
    }
    video {
      width: 500px;
      height: 400px;
      object-fit: cover;
    }
  
  
  
    
      
        
      
      
      
        Open WebCam
      
    
  

输出 ：

• 单击按钮之前：

  

• 点击按钮后：