Last updated on August 11th, 2017 at 12:41 pm

Today in this tut i will explain you how we can capture and save image with help of HTML5  and PHP without any help of flash or any other plugin

capture image using html5

 

HTML5 is very powerfull tool in web today. And its realy help you to save your important time by giving you lots of feature which is not easy to made if you want to create by your own.

HTML5 is now supported by all majour browser like Google Chrome, Firefox, IE 9+, Opera, Safari etc.

Now we start creating this small piece of application.

For creating this app we are using html5 getUserMedia().

Currently chrome, mozilla, opera supports getUsermedia API. So this is a limitation of this application we never know from which browser user access this application.

GetUserMedia() tag use different prefix for chrome and Mozilla corresponding to web engine i.e., for chrome we have to use“webkitGetUserMedia” function and for Mozilla we use “mozGetUserMedia” function and for For Opera no need to add any prefix simply use “getUserMedia”.

By default getUserMedia disabled in chrome and mozilla.

To enable getUserMedia in Chrome type ‘chrome://flags/’ in URL bar and enable “Enable screen capture support in getUserMedia(). Mac, Windows, Linux, Chrome OS” option.

To enable getUserMedia in Mozilla type ‘about:config’ in URL bar search for ”media.navigator.enabled” and set it True.

Safari and InternetExplorer does not support getUserMedia.

Now we code to access our webcam with HTML5

Code: index.html

<body>
<video id="video" autoplay></video>
<button id="snap">Capture</button>
<button id="new">New</button>
<canvas id="canvas" width="640" height="480"></canvas>
<button id="upload">Upload</button>
</body>

Above code is the main code we write inside the body. We simply use <video> and <canvas> tag of HTML5 to display your data capture by your webcam.

And next we will write javascript code to make thing work.


<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) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
// Littel effects
$('#video').fadeOut('slow');
$('#canvas').fadeIn('slow');
$('#snap').hide();
$('#new').show();
// Allso show upload button
//$('#upload').show();
});
// Capture New Photo
document.getElementById("new").addEventListener("click", function() {
$('#video').fadeIn('slow');
$('#canvas').fadeOut('slow');
$('#snap').show();
$('#new').hide();
});
// Upload image to sever
document.getElementById("upload").addEventListener("click", function(){
var dataUrl = canvas.toDataURL();
$.ajax({
type: "POST",
url: "camsave.php",
data: {
imgBase64: dataUrl
}
}).done(function(msg) {
console.log('saved');
// Do Any thing you want
});
});
}, false);
</script>

view raw

captureImageJavascript.js

hosted with ❤ by GitHub

Now understanding getUserMedia().

HTML5 getUserMedia function take three arguments like constraints, successCallback, FailureCallback. The syntax is shown below.

navigator.getUserMedia ( constraints, successCallback, errorCallback );

constraints:

{ video: true, audio: true }

getUserMedia constraints are nothing but which media streams to use i.e., audio or video.And it is required field

successCallback:

successcallback is the function we call when media stream is loaded successfully in our case put it into video tag.success callback is required field.

errorCallback:

Failure callback is the function we call when media stream cannot be loaded it display error. It is a required field in Mozila

Save capture Image:

Now we ready to cature image but we also save the capture image to our server. We use PHP for backend here.

First we take a look to javascript code which pass this image to server

Code

// Upload image to sever 
document.getElementById("upload").addEventListener("click", function(){
var dataUrl = canvas.toDataURL();
$.ajax({
type: "POST",
url: "camsave.php",
data: { 
imgBase64: dataUrl
}
}).done(function(msg) {
console.log('saved');
// Do Any thing you want
});
});

We first get data from canvas data is in base64encoded format and save it in dataUrl variable above. And then we simply use ajax function and pass data to server.

PHP Code:

<?php
$rawData = $_POST['imgBase64'];
$filteredData = explode(',', $rawData);
$unencoded = base64_decode($filteredData[1]);
$randomName = rand(0, 99999);;
//Create the image 
$fp = fopen($randomName.'.png', 'w');
fwrite($fp, $unencoded);
fclose($fp);
?>

In above we access data and save it into our server

Click on below link for demo and download of this code

Thanku!!!