如何在HTML5上使用JavaScript整合网络摄像头

在这篇文章中，我们将分享一个非常简单的JavaScript代码片段，通过它，你可以很容易地将你的网络摄像头集成到HTML5网页中。现在，大多数网站都提供实时的网络摄像头集成，用于上传个人资料图片或任何账户验证步骤。

首先，使用以下代码片断创建一个HTML DOM结构。为了将网络摄像头与网页结合起来，我们将使用HTML<video>标签。我们将使用Bootstrap和jQuery来使我们的网页具有互动性。

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

示例：本示例使用HTML5、Bootstrap、JavaScript和jQuery将网络摄像头与页面整合。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        How to Integrate Webcam using
        JavaScript on HTML5 ?
    </title>
    <link rel="stylesheet" href="css/style.css">
    <link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
            rel="stylesheet">
  
    <script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" 
    type="text/javascript">
  
    </script>
  
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js">
    </script>
</head>
  
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <h5 class="card-header h5 text-center">
                        HTML 5 & JS live Cam
                    </h5>
                    <div class="card-body">
                        <div class="booth">
                            <video id="video" width="100%" 
                                height="100%" autoplay>
                            </video>
                        </div>
  
                        <div class="text-right">
                            <a href="#!" class="btn btn-danger" 
                                onClick="stop()">
                                Stop Cam
                            </a>
                            <a href="#!" class="btn btn-success"
                                onClick="start()">
                                Start Cam
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <script>
        var stop = 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>

输出:
如何在HTML5上使用JavaScript整合网络摄像头？