Access Device Camera from static HTML page using Javascript Camera API

Using Javascript Camera API you can access the device’s front and back camera from your Static HTML page. It doesn’t require any library or module to be installed. you can do this 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 your 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 are parameter options. It's a configuration object which we will pass to restrict or allow some of its features. 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 a 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… :)

I am a web developer - both front end developer / designer and backend programmer and passionate about new technologies.