如何在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>
输出:
Git源: https://github.com/gauravnewton/html5-js-live-cam