PHP Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed Forums > Programming Languages > PHP Development
Reload this Page

PHP5 - Help with Jquery webcam


Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old March 23rd, 2012, 06:16 AM
falcon758 falcon758 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2007
Posts: 9 falcon758 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 59 m 50 sec
Reputation Power: 0
PHP5 - Help with Jquery webcam
I'm using jQuery webcam to capture a photo of the client. I need to send it to the server just when the form is submitted (It's a form with information, and I need to have the photo attached to it).

I have everything working except the part of saving the image encoded with base64 to the database like blob.

Here is what I have so far:

Code:
  <script type="text/javascript">
    var pos = 0;
    var ctx = null;
    var cam = null;
    var image = null;
    
    jQuery("#webcam").webcam({
    
    	width: 320,
    	height: 240,
    	mode: "callback",
    	swffile: "/../../js/jscam_canvas_only.swf",
    
    	onTick: function(remain) {
    
    		if (0 == remain) {
    			jQuery("#status").text("Sorria!");
    		} else {
    			jQuery("#status").text(remain + " segundo(s) restante(s)...");
    		}
    	},
    
    	onSave: 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);
            var canvas = document.getElementById("canvas");
            var save_image = canvas.toDataURL("image/png");
            save_image = save_image.replace(/^data:image\/(png|jpeg);base64,/, "");  
            $('input[name=save_image]').val(save_image);
            pos = 0;
        }
    },
    
    	onCapture: function () {
                
    		jQuery("#flash").css("display", "block");
    		jQuery("#flash").fadeOut(100, function () {
    			jQuery("#flash").css("opacity", 1);
    		});
                    jQuery("#canvas").show();
                    webcam.save();
    	},
    
    	onLoad: function () {
                
    		var cams = webcam.getCameraList();
    		for(var i in cams) {
    			jQuery("#cams").append("<li>" + cams[i] + "</li>");
    		}
                    jQuery("#canvas").hide();
    	}
    });
    
    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.onload = function() {
    			ctx.drawImage(img, 320, 240);
    		}
    		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>


Then I have just a normal form that the customer has to fill it in, followed by this:
Code:
    <div id="webcam">
    </div>
    <p style="width:250px;text-align:center; "><input type="button" value="Tirar Fotografia" onclick="webcam.capture(3);void(0);"/></p></td><td><p><canvas id="canvas" height="200" width="200"></canvas></p>

in php i have:

Code:
      $image=file_get_contents(base64_decode($_POST['save_image']));
Reply With Quote
  #2  
Old March 23rd, 2012, 10:37 AM
Northie's Avatar
Northie Northie is offline
Square Peg in a Round Hole
Click here for more information.
  
Join Date: Oct 2007
Location: North Yorkshire, UK
Posts: 3,421 Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level)Northie User rank is General 44th Grade (Above 100000 Reputation Level) 
Time spent in forums: 3 Weeks 5 Days 11 h 37 sec
Reputation Power: 3896
I'm not that familiar with what the canvas element can output wrt web forms.

Firstly I would check with a live headers plugin that the data is actually getting sent to the server

Then in php there is an alternative to $_POST, which is

PHP Code:
//
$fp = fopen("php://input","r");

if(!$fp) {
     while(!feof($fp)) {
          $c.=fgets($fp,1024);
     }
} 
__________________
PHP OOPS! <?php DB::Execute(SQL::makeFrom($_GET))->fetchArray()->FormatWith(Template::getInstance('default'))->printHtml(); ?>

PDO vs mysql_* functions: Find a Migration Guide Here

[ Xeneco - T'interweb Development ] - [ Are you a Help Vampire? ] - [ Read The manual! ] - [ W3 methods - GET, POST, etc ] - [ Web Design Hell ]
Last edited by Northie : March 23rd, 2012 at 10:46 AM.
Reply With Quote
  #3  
Old March 23rd, 2012, 12:45 PM
falcon758 falcon758 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2007
Posts: 9 falcon758 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 59 m 50 sec
Reputation Power: 0
Worked
Worked with just
Code:
$image=$_POST['save_image'];
in php.
Thanks

Quote:
Originally Posted by Northie
I'm not that familiar with what the canvas element can output wrt web forms.

Firstly I would check with a live headers plugin that the data is actually getting sent to the server

Then in php there is an alternative to $_POST, which is

PHP Code:
//
$fp = fopen("php://input","r");

if(!$fp) {
     while(!feof($fp)) {
          $c.=fgets($fp,1024);
     }
} 
Reply With Quote
  #4  
Old October 5th, 2012, 10:26 PM
stevemine1 stevemine1 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2012
Posts: 1 stevemine1 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 28 m
Reputation Power: 0
@falcon758
Quote:
Originally Posted by falcon758
Worked with just
Code:
$image=$_POST['save_image'];
in php.
Thanks


Please i'm about working on the same project you just described and i'll be glad if you can share the entire code with me.

I will make sure to give you credits.

Thanks
Reply With Quote
  #5  
Old October 6th, 2012, 05:13 PM
falcon758 falcon758 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2007
Posts: 9 falcon758 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 59 m 50 sec
Reputation Power: 0
Smile
Quote:
Originally Posted by stevemine1
Please i'm about working on the same project you just described and i'll be glad if you can share the entire code with me.

I will make sure to give you credits.

Thanks


Sure, you need to download the code to the webcam from: http://www.xarg.org/project/jquery-webcam-plugin/.
The code is the following:

Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
                <script type="text/javascript" src="/../../js/jquery.webcam.js"></script>
                <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
                <table width="100%" class="TF">

                    <tr><th colspan="2">Create User</th><td rowspan="9"><table cellpadding="3"><tr><td><p id="status" style="height:12px; color:#c00;font-weight:bold;"></p><div id="webcam">
                </div>
                <p style="width:250px;text-align:center; "><input type="button" value="Take Photo" onclick="webcam.capture(3);void(0);"/></p></td><td><p><canvas id="canvas" height="240" width="320"></canvas></p></td></tr></table></td></tr>
                           <tr><td></td><td><input type="submit" name="submit" /></td></tr>           
                </table>
                </form>
                <script type="text/javascript">    
                var pos = 0;
                var ctx = null;
                var cam = null;
                var image = null;

                jQuery("#webcam").webcam({

                        width: 320,
                        height: 240,
                        mode: "callback",
                        swffile: "/../../js/jscam_canvas_only.swf",

                        onTick: function(remain) {

                                if (0 == remain) {
                                        jQuery("#status").text("Smile!");
                                } else {
                                        jQuery("#status").text(remain + " second(s) remaining...");
                                }
                        },

                        onSave: 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);
                        var canvas = document.getElementById("canvas");
                        var save_image = canvas.toDataURL("image/png");
                        //save_image = save_image.replace(/^data:image\/(png|jpeg);base64,/, "");  
                        $('input[name=save_image]').val(save_image);
                        pos = 0;
                    }
                },

                        onCapture: function () {

                                jQuery("#flash").css("display", "block");
                                jQuery("#flash").fadeOut(100, function () {
                                        jQuery("#flash").css("opacity", 1);
                                });
                                jQuery("#canvas").show();
                                webcam.save();
                        },

                        onLoad: function () {

                                var cams = webcam.getCameraList();
                                for(var i in cams) {
                                        jQuery("#cams").append("<li>" + cams[i] + "</li>");
                                }
                                jQuery("#canvas").hide();
                        }
                });

                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.onload = function() {
                                        ctx.drawImage(img, 320, 240);
                                }
                                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>
                <?php
                }
                if(isset($_POST['submit'])) //check if it was submitted
                {

                    
                  $image=$_POST['save_image']; //assing post to variable
                  $image=base64_decode(str_replace('data:image/png;base64,', '', $image)); // decode string with base64 and replace desnecessary header to write to file
                  file_put_contents("temp.png", $image);//save picture to disk
}
?>


You can insert picture in database by doing and mysql_real_escape_string to "$image" and writting it to a blob field.

Enjoy
Reply With Quote
Reply

Viewing: Dev Shed Forums > Programming Languages > PHP Development > PHP5 - Help with Jquery webcam

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap