Jquery webcam plugin
Here i am explaining the integration of your webcam with jquery plugin. Article originally inspired by xarg.org.
Simply create an index.php and put all below content.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.webcam.min.js"></script>
<style type="text/css">
#webcam, #canvas {
width: 320px;
border:20px solid #333;
background:#eee;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#webcam {
position:relative;
margin-top:50px;
margin-bottom:50px;
}
#webcam > span {
z-index:2;
position:absolute;
color:#eee;
font-size:10px;
bottom: -16px;
left:152px;
}
#webcam > img {
z-index:1;
position:absolute;
border:0px none;
padding:0px;
bottom:-40px;
left:89px;
}
#webcam > div {
border:5px solid #333;
position:absolute;
right:-90px;
padding:5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
cursor:pointer;
}
#webcam a {
background:#fff;
font-weight:bold;
}
#webcam a > img {
border:0px none;
}
#canvas {
border:20px solid #ccc;
background:#eee;
}
#flash {
position:absolute;
top:0px;
left:0px;
z-index:5000;
width:100%;
height:500px;
background-color:#c00;
display:none;
}
object {
display:block; /* HTML5 fix */
position:relative;
z-index:1000;
}
</style>
</head>
<body>
<p id="status" style="height:22px; color:#c00;font-weight:bold;"></p>
<div id="webcam"><span>jQuery</span></div>
<p style="width:360px;text-align:center;font-size:12px"><a href="javascript:webcam.capture();changeFilter();void(0);">Take a picture instantly</a></p>
<p><canvas id="canvas" height="240" width="320"></canvas></p>
<script>
var pos = 0;
var ctx = null;
var cam = null;
var image = null;
var filter_on = false;
var filter_id = 0;
function changeFilter() {
if (filter_on) {
filter_id = (filter_id + 1) & 7;
}
}
function toggleFilter(obj) {
if (filter_on =!filter_on) {
obj.parentNode.style.borderColor = "#c00";
} else {
obj.parentNode.style.borderColor = "#333";
}
}
$(function() {
var pos = 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 img = image;
for(var i = 0; i < 320; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos+= 4;
}
if (pos >= 4 * 320 * 240) {
ctx.putImageData(img, 0, 0);
$.post("upload.php", {type: "data", image: canvas.toDataURL("image/png")});
pos = 0;
//img.src="tmp/upload.png";
//ctx.drawImage(img, 320, 240);
}
};
} else {
saveCB = function(data) {
image.push(data);
pos+= 4 * 320;
if (pos >= 4 * 320 * 240) {
$.post("upload.php", {type: "pixel", image: image.join('|')});
pos = 0;
}
};
}
$("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "jscam_canvas_only.swf",
onSave: saveCB,
onCapture: function () {
webcam.save();
},
debug: function (type, string) {
console.log(type + ": " + string);
}
});
});
function getPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
return [pageWidth, pageHeight];
}
window.addEventListener("load", function() {
jQuery("body").append("<div id=\"flash\"></div>");
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0, 0, 320, 240);
var img = new Image();
img.src = "/image/logo.gif";
img.onload = function() {
ctx.drawImage(img, 129, 89);
}
image = ctx.getImageData(0, 0, 320, 240);
}
var pageSize = getPageSize();
jQuery("#flash").css({ height: pageSize[1] + "px" });
}, false);
window.addEventListener("resize", function() {
var pageSize = getPageSize();
jQuery("#flash").css({ height: pageSize[1] + "px" });
}, false);
</script>
</body>
</html>I am using php server side script to upload the image. So added few lines of code in index file under function on capture. And server side you have to add below code which upload.php have.
<?php
if (file_exists('tmp/upload.png')) {
@unlink('tmp/upload.png');
}
if ($_POST['type'] == "pixel") {
// input is in format 1,2,3...|1,2,3...|...
$im = imagecreatetruecolor(320, 240);
foreach (explode("|", $_POST['image']) as $y => $csv) {
foreach (explode(";", $csv) as $x => $color) {
imagesetpixel($im, $x, $y, $color);
}
}
} else {
// input is in format: data:image/png;base64,...
$im = imagecreatefrompng($_POST['image']);
}
imagepng($im,"tmp/upload.png");
// do something with $im
?>For more example or for download use below link
http://www.xarg.org/project/jquery-webcam-plugin/
I am a software engineer who specializes in Internet applications. I have worked with a wide variety of technologies and programming languages to open source LAMP environments. I have more than 6 years of object-oriented programming experience and am highly proficient in ActionScript, PHP, MYSQL, JavaScript, Jquery and a multitude of other technologies used in modern web applications.
Latest posts by Rajeev Achra (see all)
- Jquery webcam plugin - June 19, 2016
- How To Add and Delete Users on a CentOSServer - June 5, 2016
- How To Set Up vsftpd on CentOS 6 - June 5, 2016