with switch:

The webpage development technology can be used to realize the function of real-time previewing and shooting of the local camera in the webpage. Specifically, WebRTC technology can be used to call the getUserMedia interface provided by the browser through JavaScript code to obtain the video stream of the local camera and display it on the web page.

Here is sample code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>实时预览本地摄像头</title>
  </head>
  <body>
    <video id="localVideo" autoplay="true"></video>

    <script>
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
      if (navigator.getUserMedia) {
        navigator.getUserMedia({video: true}, function(stream) {
          var localVideo = document.getElementById("localVideo");
          localVideo.srcObject = stream;
        }, function(error) {
          console.error(error);
        });
      } else {
        alert("您的浏览器不支持获取本地摄像头！");
      }
    </script>
  </body>
</html>

Among them, navigator.getUserMedia is the interface provided by WebRTC, and the parameter object {video: true} means to obtain the video stream. If you need to obtain the audio stream at the same time, you can set {audio: true}. After successfully obtaining the video stream of the local camera, assign it to the srcObject attribute of the video element to realize real-time preview.

Without switch:

HTML code for real-time preview and shooting of local camera:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Camera</title>
</head>
<body>
    <video id="video" width="640" height="480"></video>
    <button id="startButton">Start</button>
    <button id="stopButton">Stop</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    <button id="captureButton">Capture</button>

    <script>
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function(stream) {
                var video = document.querySelector('#video');
                video.srcObject = stream;
                video.onloadedmetadata = function(e) {
                    video.play();
                };
            })
            .catch(function(err) {
                console.log("An error occurred: " + err);
            });

        var startButton = document.querySelector('#startButton');
        var stopButton = document.querySelector('#stopButton');
        var captureButton = document.querySelector('#captureButton');
        var video = document.querySelector('#video');
        var canvas = document.querySelector('#canvas');

        startButton.onclick = function() {
            video.play();
        };

        stopButton.onclick = function() {
            video.pause();
        };

        captureButton.onclick = function() {
            var context = canvas.getContext('2d');
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            var image = canvas.toDataURL();
            // 将图像数据发送到服务器或本地存储
        };
    </script>
</body>
</html>

The above code uses the media technology API of HTML5, obtains the media stream of the local camera through the getUserMedia method, and displays it in the video element. Users can control video play and pause by clicking the "Start" and "Stop" buttons. At the same time, the page also contains a canvas element and a "Capture" button. When the user clicks the "Capture" button, the page will draw the current video frame on the canvas and store the drawn image data into a variable. You can send image data in this variable to server or local storage.

The above code is referenced from [ 3 ]. It should be noted that this code uses the HTML5 media technology API, so you need to confirm whether the browser supports the API before using it. In actual application, you need to modify and adjust according to your needs.

Real-time preview of local camera-html code

with switch:

Without switch:

Guess you like