HTML5 – How to access and take picture using Camera API
HTML5 – How to access and take picture using Camera API
HTML5 has introduced some great features and APIs. One of the APIs is getUserMedia API. This API provide access to the Camera. To make this API work we have to do simple JavaScript with HTML5.
Here is a simple HTML5 code structure that you can use.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>HTML5 Camera API</title> </head> <body> <video id="video" width="640" height="480" autoplay></video> <button id="picture">Take Picture</button> <canvas id="canvas" width="640" height="480"></canvas> </body> </html>
This code structure defines a video element and a button to take picture, that would be placed the picture inside a canvas element.
<video id="video" width="640" height="480" autoplay></video> <button id="picture">Take Picture</button> <canvas id="canvas" width="640" height="480"></canvas>
Below is the JavaScript code for accessing the camera and taking a picture. I will explain it later below.
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo takedocument.getElementById("picture").addEventListener("click", function()
{context.drawImage(video, 0, 0, 640, 480);});
}, false);
After load of document, we get canvas element from HTML and then 2d context and video element.
After that we check that whether user’s browser supports the getUserMedia API using standard, webkit and Firefox prefixes.
Once the getUserMedia API is initialized
video.src = window.URL.createObjectURL(stream) or video.src = stream
method sets the video element’s src to the user’s live camera/webcam.
To take picture from the live video we need to add code for the click event of “Take Picture” button as under.
// Trigger photo take
document.getElementById("picture").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
The cod above will draw an image on canvas from live video.
Below is the complete working code for accessing Camera and taking a picture with some simple CSS.
Save the code below in a file named “index.html” form example and then run ina modern browser like Firefox or Chrome and see the magic of HTML5 getUserMedia API .
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5 Camera API</title>
<style>
.demo-frame header, .demo-frame h1, .demo-frame .demo-conversion {
display: none;
}
.demo-wrapper {
min-height: 500px;
}
.bsap {
position: absolute;
top: 0;
right: 0;
}
video { border: 1px solid #ccc; display: block; margin: 0 0 20px 0; }
#canvas { margin-top: 20px; border: 1px solid #ccc; display: block; }
</style>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="picture">Take Picture</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("picture").addEventListener("click", function()
{ context.drawImage(video, 0, 0, 640, 480); });
}, false);
</script>
</body>
</html>
In next tutorial we will discuss more advanced features of HTML5. Stay tuned.
Zip code file to download
Note: inspired this article from David Walsh.
About Author
maz
Maz is a software engineer, and a Zend Certified Engineer . His area of expertise contains PHP /Mysql, Node JS / MongoDB, Angular JS, IOS and android.
