如何使用 JavaScript 集成网络摄像头

大家好，在本教程中，我们将尝试解决下面提到的查询。同时，我们还将分享一个简单的JavaScript代码片段，您可以通过它轻松地将网络摄像头集成到网页中。

常见查询

如何使用 JavaScript 在 HTML5 中访问网络摄像头
如何使用 JavaScript 访问网络摄像头
如何使用 JavaScript 集成网络摄像头

首先，我们需要使用以下代码片段创建 HTML DOM 结构。为了将网络摄像头集成到网页中，我们将使用 HTML<video>标签。

<video id="video" width="100%" height="100%" autoplay></video>

使用 JavaScript 逐步集成网络摄像头

首先，我们需要创建两个文件index.html和style.css，然后我们需要为其编写代码。

集成网络摄像头步骤：1

在 index.html 中添加以下代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>How to Integrate Webcam using JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
</head>

<body>
    <div class="webcam">
        <div class="video-outer">
            <video id="video" height="100%" width="100%" autoplay></video>
        </div>

        <div class="webcam-start-stop">
            <a href="#!" class="btn-start" onclick="start()">Start</a>
            <a href="#!" class="btn-stop" onclick="StopWebCam()">Stop</a>
        </div>
    </div>


    <script>
        var StopWebCam = function () {
            var stream = video.srcObject;
            var tracks = stream.getTracks();

            for (var i = 0; i < tracks.length; i++) {
                var track = tracks[i];
                track.stop();
            }
            video.srcObject = null;
        }

        var start = function () {
            var video = document.getElementById("video"),
                vendorURL = window.URL || window.webkitURL;

            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({ video: true })
                    .then(function (stream) {
                        video.srcObject = stream;
                    }).catch(function (error) {
                        console.log("Something went wrong");
                    });
            }
        }
        $(function () { start(); });
    </script>
</body>

</html>

集成网络摄像头步骤：2

然后我们需要添加style.css的代码，我在下面的屏幕中提供了该代码。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Oswald', sans-serif;
}
body {
  height: 100vh;
  width: 100vw;
  background: #f2f4f6;
  overflow: hidden;
}
.webcam-start-stop {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 5px 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.webcam-start-stop > a {
  text-decoration: unset;
  color: #000;
  background: #fff;
  padding: 10px 20px;
}

集成网络摄像头视频输出：

集成网络摄像头 Codepen 输出：

我最好的教程

像地图一样缩放图像

自定义二维码生成器

如何制作像 CodePen 这样的网站

文章来源：https://dev.to/stackfindover/how-to-integrate-webcam-using-javascript-3fji