javascript+php to realize online camera function

We may encounter this in some Web applications where users need to take photos of themselves and upload them to their membership system. For example, the driving school to collect fingerprint photography process, test site collection photos. What we're going to talk about today is how to use JavaScript and PHP to implement a simple online photo-and-upload feature.

The prerequisite for this function is that you need to have a camera device installed on your computer and your browser needs to support Flash.

Html

<! DOCTYPE html>
 
In the body, add a container id#cam to call the camera assembly and a container id#results to display the uploaded information.
 
Javascript
 
Next call the camera components, we first load the webcam.js, for photos and upload the JS library.
 

<script type= "Text/javascript" src= "Webcam.js" ></script>
 
Then in the container Id#cam, add the following code:
 

<script language= "JavaScript" >
webcam.set_api_url (' action.php ');
webcam.set_quality (90);//image quality (1-100)
Webcam.set_shutter_sound (true);
Ent.write (webcam.get_html (320, 240, 160,120));
</script>
 
We call the webcam, where webcam.set_api_url is used to set up the image upload interactive php path, set_quality can set image quality, Set_shutter_sound set sound, get_html output camera components, parameter is width , height, upload width, post upload height.
 
When you click the button to take a picture, you need to execute the following code:
 
  <script language= "JavaScript" >  webcam.set_hook (  ' oncomplete ',  ' My_completion_ Handler '  );            function take_snapshot ()  {      document.getelementbyid (' results ') .innerhtml =  '  
When performing a photo action, the code interacts with the background PHP, and if the uploaded image is completed, the corresponding information is returned.
 
Php
 
What action.php do is upload the image of the local photo to the server and return the picture path to the front end. Note the path to store the picture to write permission.
 

$filename = Date (' Ymdhis '). '. jpg ';
$result = file_put_contents (' pics/'. $filename, file_get_contents (' php://input '));
if (! $result) {
print "error:failed to write data to $filename, check permissions\n";
Exit (); 
} 
$url = ' http://'. $_server[' Http_host ']. DirName ($_server[' Request_uri ']). '/pics/'. $filename;
print "$url \ n";
 
This article is just a simple introduction of the next online photo and upload function, in fact, in-depth application of the scene such as the upload and then crop, generate a number of different proportions of the image and so on, everyone to think about it.