带开关的:

可以使用网页开发技术来实现在网页中实时预览拍摄本地摄像头的功能。具体来说，可以使用WebRTC技术，通过JavaScript代码调用浏览器提供的getUserMedia接口来获取本地摄像头的视频流，并将其显示在网页上。

以下是示例代码：

<!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>

其中，navigator.getUserMedia是WebRTC提供的接口，参数对象{video: true}表示获取视频流，如果需要同时获取音频流，可以设置{audio: true}。在成功获取到本地摄像头的视频流后，将其赋值给video元素的srcObject属性即可实现实时预览。

不带开关的:

实时预览和拍摄本地摄像头的HTML代码：

<!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>

以上代码使用了HTML5的媒体技术API，通过getUserMedia方法获取本地摄像头的媒体流，并将其显示在video元素中。用户可以通过点击“Start”和“Stop”按钮来控制视频播放和暂停。同时，页面中还包含一个canvas元素和一个“Capture”按钮。当用户点击“Capture”按钮时，页面会将当前视频帧绘制到canvas上，并将绘制的图像数据存储到一个变量中。您可以将该变量中的图像数据发送到服务器或本地存储。

以上代码参考自[3]。需要注意的是，该代码使用了HTML5的媒体技术API，因此在使用前需要确认浏览器是否支持该API。在实际应用中，您需要根据您的需求进行修改和调整。

扫描二维码关注公众号，回复： 15131647 查看本文章

实时预览本地摄像头-html代码

带开关的:

不带开关的:

猜你喜欢