Webcam in PHP Using Jquery | Save Webcam Image in Database

Hello friends after seeing many issues and great response at our previous post about How to Use Webcam in PHP. We have changed the code and now we have use the PHP Class for making it more simple to use.  In this article we will tell you how you can use this class in your application. You can now download the zip content from 2 locations

1. PHP Classes

2. Github

We have changed the database part and now you can save the image to your local storage or change it to base64 and save it to the Database or do both. So lets start.

Files we will use in this example

• Index File
• Webcam Class
• Connection Class
• Webcam JS
• Webcam SWF
• Shutter MP3
• Jquery

In the article i will talk about the only first 3 files from the list.

Index File

This file contains the code for showing the webcam in the page and using the buttons to capture the image. For showing the webcam window inside your page use the below code

<script language="JavaScript">
document.write( webcam.get_html(320, 240) );
</script>

Now we will show the buttons so we will make it to work.

<form class="text-center">
            <input type=button value="Configure cam" onClick="configure()" class="btn btn-primary">
            &nbsp;&nbsp;
            <input type=button value="Take Snapshot" onClick="take_snapshot()" class="btn btn-success">
            <br/>
        </form>

In the example we have used the onClick event inside the button. You can also use the jquery Click functions using the button Id. There are two buttons Configure Button will open the configuration window in the webcam. Another button is Take Snapshot Button  it will do the task of capturing the image from the webcam.




Now here is the onClick event and initialization of Webcam JS.

<script language="JavaScript">
        webcam.set_api_url( 'webcamClass.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>

After setting the html part for viewing and clicking we will use the webcam Class to save the image to the local storage.

We have used the $imageFolder for defining the path of image to be saved.

ShowImage function will save the image data to local storage to the given path. If it will save the data correctly than it will return the name of the image with the path. Else it will give you the error.

Under showImage function you will see a code which is commented if you will uncomment this line it will help you to save the image name to the database table.

$this->saveImageToDatabase($this->getNameWithPath());

SaveImageToDatabase function is used to save the Image name to the database after saving the Image to the local storage. If you want to store the image directly to the database than you can uncomment the base64 image encode method line than image will be saved as base64.

$image=  $this->changeImagetoBase64($image);

Hope you like the tutorial about How to Use Webcam In PHP and Save Image to the Database. In the index file we have used the Bootstrap and Jquery library.  For making it easy to understand.

If you have any comment or issues regarding the tutorial please comment below.