Today, We want to share with you jQuery Capture Webcam Image Using Web Camera in PHP.In this post we will show you Capture Webcam Image with PHP and jQuery, hear for capture image using webcam and save to database in php and html5 we will give you demo and example for implement.In this post, we will learn about How to Use a Webcam to take Pictures in PHP Application with an example.
jQuery Capture Webcam Image Using Web Camera in PHP
There are the Following The simple About jQuery Capture Webcam Image Using Web Camera in PHP Full Information With Example and source code.
As I will cover this Post with live Working example to develop capture image from webcam and store in database in php, so the some major files and Directory structures for this example is following below.
- index.html
- Include Javascript
- custom CSS
- Add custom Javascript
- Upload Images using PHP
jQuery Capture Webcam Image Using Web Camera in PHP
Include Javascripts in head tag
Step 1 :HTML Source code
index.html
This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.html.
PHP capture image from webcam using jquery
3
Video has not detected so Please any available simple cameras on your Laptop or system. Please so You connect a camera and try again.
Step 2: Custome CSS
style.css
#cambox{
position:relative;
width:500px;
height: 400px;
margin: 0 auto;
}
#webcam, #live_img_profile_preview, #nocamera {
background:#eee;
border:5px solid #999;
height: 240px;
margin-left:60px;
margin:10px 20px;
position:absolute;
width: 320px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#webcam {
z-index:2000;
}
#live_img_profile_preview {
display:none;
z-index:5000;
}
#nocamera {
display:none;
z-index:9900;
}
#buttons{
position:absolute;
bottom:0;
right:165px;
z-index:100;
}
#light_webcam {
background-color:#c00;
display:none;
height:500px;
left:0px;
position:absolute;
top:0px;
width:100%;
z-index:5000;
}
object {
display:block;
position:relative;
z-index:1000;
}
#smartsystem{
background:transparent;
height:40px;
margin-left:67px;
position:absolute;
top:220px;cursor:pointer;
z-index:2100;
}
.message{
padding:80px 10px;
}
.livecountdown{
font-size:26px;
font-weight:bold;
color:#fff;
padding-left:153px;
display:none;
}
.click{
padding-left:145px;
}
.close{
position: absolute;
right: 0;
color:#fff;
top: 0;
cursor:pointer;width:22px;height:22px;display:block;background:url(picture/web_icon_close.png) top;
}
.close:hover{
position: absolute;
right: 0;
color:#fff;
top: 0;
cursor:pointer;width:22px;height:22px;display:block;background:url(picture/web_icon_close.png) bottom;
}
Step 3: Javascript Files
set the camera Laptop or device and capture the Images
$("#live_img_profile_preview .close").click(function(){
$("#buttons .store_wbcam_img").attr('disabled',true);
$('.livecountdown').hide();
$('#live_img_profile_preview').hide();
$('#live_img_profile_previewImg').attr('src',baseurl+'picture/imgloading.gif');
$('.click').show();
});
var coverUserImg = null;
$("#buttons .store_wbcam_img").click(function(){
$.post(baseurl+"live_webcam_images_ipload.php",
{ image: coverUserImg},
function(data){
window.location = 'live_webcam_images_ipload.php';
});
});
function webcamTakeImg(){
$('.click').hide();
$('.livecountdown').show();
webcam.capture(3);
}
function webcam_init() {
var imgpostion = 0, ctx = null, saveCB, image = [];
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 320, 240);
saveCB = function(data) {
var col = data.split(";");
var picture = image;
for(var i = 0; i > 16) & 0xff;
picture.data[imgpostion + 1] = (tmp >> 8) & 0xff;
picture.data[imgpostion + 2] = tmp & 0xff;
picture.data[imgpostion + 3] = 0xff;
imgpostion+= 4;
}
if (imgpostion >= 4 * 320 * 240) {
ctx.putImageData(picture, 0, 0);
$('#live_img_profile_preview').show();
$.post(baseurl+"live_webcam_images_ipload.php", {type: "data", image: canvas.toDataURL("image/png")},function(data){
$("#buttons .store_wbcam_img").attr('disabled',false);
coverUserImg = data;
$('#live_img_profile_previewImg').attr('src',''+baseurl+data);
});
imgpostion = 0;
}
};
}else{
saveCB = function(data) {
image.push(data);
imgpostion+= 4 * 320;
if (imgpostion >= 4 * 320 * 240) {
$('#live_img_profile_preview').show();
$.post(baseurl+"live_webcam_images_ipload.php", {type: "pixel", image: image.join('|')},function(data){
$("#buttons .store_wbcam_img").attr('disabled',false);
coverUserImg = data;
$('#live_img_profile_previewImg').attr('src',''+baseurl+data);
});
imgpostion = 0;
image = [];
}
}
}
$("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: baseurl+"js/webcam/jscam_canvas_only.swf",
onSave: saveCB,
onCapture: function () {
jQuery("#light_webcam").css("display", "block");
jQuery("#light_webcam").fadeOut("fast", function () {
jQuery("#light_webcam").css("opacity", 1);
});
webcam.save();
},
onTick: function(remain) {
$('.livecountdown').show();
if (0 == remain) {
$('.livecountdown').hide();
} else {
jQuery(".livecountdown").text(remain);
}
},
debug: function (type, string) {
if(type == 'error'){
$("#nocamera").show();
}else{
$("#nocamera").hide();
}
},
onLoad: function() {
//var cams = webcam.getCameraList();
}
});
}
(function ($) {
webcam_init();
})(jQuery);
get Request To Image
$pathPic = imagecreatefrompng($_POST['image']);
Step 4: Save Upload Image using PHP
live_webcam_images_ipload.php
$storePicWidth = 320; $uploadHeight = 240;
$pathPic = imagecreatetruecolor($storePicWidth, $uploadHeight);
foreach (explode("|", $_POST['image']) as $y =>; $cs) {
foreach (explode(";", $cs) as $x => $color) {
imagesetpixel($pathPic, $x, $y, $color);
}
}
$imgname = 'sample_img.png';
$destination = $_SERVER['DOCUMENT_ROOT'].'/uploads/'.$imgname;
$savePathimg = @imagecreatetruecolor($storePicWidth, $uploadHeight);
imagecopyresampled($savePathimg, $pathPic, 0, 0, 0, 0, $storePicWidth, $uploadHeight, $storePicWidth, $uploadHeight);
$write = imagepng($savePathimg, $destination, 9);
imagedestroy($savePathimg);
You can download simple step by step jQuery-webcam from github.
Angular 6 CRUD Operations Application Tutorials
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about jQuery Capture Webcam Image Using Web Camera in PHP.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.