How to Use a Webcam to take Pictures in PHP Application

Contents

Requirements

Capturing Pictures from the Webcam

Create the Uploads Database

Saving the Image to the Database

Download the Complete Package

Requirements

The first thing you need is your PHP editor or IDE, a Webcam, MySQL and a cup of coffee. The PHP editor is of course for coding your PHP scripts, Webcam to take the image, MySQL for saving it in a database and Coffee is for your refreshment. :-)

In this article we will discuss how to capture the webcam image from our PHP and jQuery and save it to the database. It will use the Flash for the webcam screen. So you need JavaScript and Flash files that you can download and install as explained at the end of this article.

Capturing Pictures from the Webcam

To create our capturing applications we need to use three files:

1. Web page for showing the webcam image
2. Script to handle the image upload request
3. A PHP class script to take to the actual handling of the image and store it in a database

1. Web Page for Showing the Webcam

With this file we will show our Webcam screen on our PHP page.

index.php

Here we will use the webcam.js file for the webcam functions to take the snap and save it.

<script type="text/javascript" src="webcam.js"></script>

Below the form we will put our webcam window to show the webcam screen.

<script type="text/javascript"><!--
    document.write( webcam.get_html(320, 240) );
// --></script>

Now below the webcam screen we will use the buttons for configure webcam and take snapshot.

<form>
 <input type="button" value="Configure..." onClick = "webcam.configure()">
 <input type="button" value="Take Snapshot" onClick="take_snapshot()">
</form>

In the code above we show the screen and get the image from webcam. But still we have to save it somewhere, so lets save this image in a server folder.

2. Script to Handle the Image Upload

After showing the Webcam screen in PHP page we take the snap from clicking the button. Then it the image needs to be saved to a server directory of our project.

For this we can use a PHP class that I wrote in a script named webcamClass.php to save the snapshot image and return success. The action.php script is used to call the class.

The function getNameWithPath() defines the image path and name for the uploaded image in the images directory.

The $file variable inside the showImage() function is set to the success of the image saving operation. If there is any error, the condition code will show the error. Otherwise the script will return the success message.

Now it's time to process the image snap. Add this code to index.php.

<script type="text/javascript"><!--

    webcam.set_api_url( 'action.php' );
    webcam.set_quality( 100 ); // JPEG quality (1 - 100)
    webcam.set_shutter_sound( true ); // play shutter click sound
    webcam.set_hook( 'onComplete', 'my_completion_handler' );
        
    function take_snapshot() {
        $('#showresult').html('<h1>Uploading...</h1>');
        webcam.snap();
    }
        
    function configure(){
        webcam.configure();
    }
        
    function my_completion_handler(msg) {
        // msg will give you the url of the saved image using webcamClass
        $('#showresult').html("<img src='"+msg+"'> <br>"+msg+"");
        return false;
    }

// --></script>

Now we have the success message and we will show it in div.

<div id="showresult"></div>

Create the Uploads Database

1. id with auto-increment
2. Image data

The table may be created in a MySQL database with SQL statement like this:

CREATE TABLE IF NOT EXISTS `snapshot` (
  `Id` int(11) NOT NULL AUTO_INCREMENT,
  `Image` varchar(20000) NOT NULL,
  PRIMARY KEY (`Id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

The database access is done using a class in the connectionClass.php script. In this class we create a connection string with the database.

Saving the Image to the Database

Now lets back to our save image class script: webcamClass.php .

In this class we have a function for saving to the database the image after saving it to our local system folder. This function will take the image URL as parameter. It will save the image to the database.

saveImageToDatabase($imageurl);

In the class we have a function for saving the image in our database named changeImagetoBase64 to save the image in your database using base64 encoding to store it in text field.