Webcam Integration using pure Js on HTML 5
Hello geeks, hope you all are doing well. In this blog post i am going to share a very simple java script code snippet through you can easily integrate your webcam into any html 5 web page.
Now, a day most of the website provides real time webcam integration for profile picture upload or any account verification step. Some of them as per my experience are : Bitbns , Electronieum and list goes on.
Here i am using html 5 video tag, and as source of video i am integrating webcam using java script.
So, first create html DOM structure using following code snippet.
Now, a day most of the website provides real time webcam integration for profile picture upload or any account verification step. Some of them as per my experience are : Bitbns , Electronieum and list goes on.
Here i am using html 5 video tag, and as source of video i am integrating webcam using java script.
So, first create html DOM structure using following code snippet.
<video id="video" width="100%" height="100%" autoplay></video>
Next include video src for video tag in js.
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!");
});
}
That's, all for your code starts working, here i am added bootstrap and jQuery just to make our page beautiful and user interactive.
Here is the complete index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</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>
</iv>
</div>
<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>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
And my script file looks like as follows.
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();
});
In case your laptop has not inegrated webcam then you can also use external webcam or your smartphone as webcam.
Here is the working lvie example : Live Demo
Even you can found the whole source code of this on my git :https://github.com/gauravnewton/html5-js-live-cam
Comments
Post a Comment