Access Device Camera from static HTML page using Javascript Camera API
I am a web developer - both front end developer / designer and backend programmer and passionate about new technologies.
Using Javascript Camera API you can access the device's Front and back camera from your Static HTML page. It doesn't required any library or module to be installed. you can do by just writing a small code. Will explain step by step.
First you have to add a html5 video tag to your index.html
<video id="video"></video>
In your camera.js file add the following code snippet. First check if you browser is supporting navigator.mediaDevices.
if(navigator && navigator.mediaDevices){
//Your browser is supporting camera API.
}else{
console.log("camera API is not supported by your browser")
}
In the next step, we will add the camera API code.
if(navigator && navigator.mediaDevices){
navigator.mediaDevices.getUserMedia(options)
.then(function(stream) {
//use the stream to you code
})
.catch(function(err) {
//Handle error here
});
}else{
console.log("camera API is not supported by your browser")
}
as you can see that in the above code there is a parameter options. Its a configuration object which we will to pass to restrict or allow some of its feature. For example, to allow the audio:
{ audio: true }
to access the front camera:
{ video: { facingMode: "user" } }
to access the back camera:
{ video: { facingMode: { exact: "environment" } } }
for more information about configuration, visit this doc . We are almost done with the configuration, Now will assign stream to the video tag.
if(navigator && navigator.mediaDevices){
const options = { audio: false, video: { facingMode: "user", width: 200, height: 200 } }
navigator.mediaDevices.getUserMedia(options)
.then(function(stream) {
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) {
//Handle error here
});
}else{
console.log("camera API is not supported by your browser")
}
So, We are almost done till now, now we will add a button to capture the image from the video and display it on canvas. This is our final camera.js file
var video, canvas, ctx;
if(navigator && navigator.mediaDevices){
const options = { audio: false, video: { facingMode: "user", width: 300, height: 300 } }
navigator.mediaDevices.getUserMedia(options)
.then(function(stream) {
video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext('2d');
})
.catch(function(err) {
//Handle error here
});
}else{
console.log("camera API is not supported by your browser")
}
function clickPhoto() {
ctx.drawImage(video, 0,0, canvas.width, canvas.height);
}
Here is our final index.html file.
<body>
<div style="text-align: center;">
<video id="video" style="text-align: center; border-radius: 20px;"></video>
</div>
<div style="text-align: center;">
<button type="button" class="btn btn-warning" onclick="clickPhoto();">Take Photo</button>
</div>
<div style="text-align: center;">
<canvas id="myCanvas" width="300" height="300" style="text-align: center; border-radius: 20px;"></canvas>
</div>
</body>
Download the final codebase repo.
See the demo here.
If you like the blog, please share it. Happy coding... :)
