PHP Classes
PHP Classes
elePHPant
Icontem

PHP Webcam Capture Image Database PHP Script to take Photo Picture from Camera

Recommend this page to a friend!
  Blog PHP Classes blog   RSS 1.0 feed RSS 2.0 feed   Blog PHP Webcam Capture Im...   Post a comment Post a comment   See comments See comments (26)   Trackbacks (0)  

Author:

Updated on: 2017-06-11

Posted on:

Categories: PHP Tutorials

If you want to take a picture of a user to be used in a PHP Web site, you can do it with a little help of a JavaScript HTML5 library.

This article is a tutorial that explains how to take picture snapshots using a Webcam to be uploaded to a PHP application.




Contents

How to Take Picture with Webcam using HTML5 Camera API

Webcam Photo Capture Online Solution to Use Webcam to Take Pictures

How Webcam Picture Capture Works

Requirements for the PHP Webcam Script

Capturing Pictures Using a Webcam PHP Script and HTML5 Camera API JavaScript

SQL for the Image Database PHP Upload Script

PHP Camera Capture Script for Saving the Image to the Database

Download the Complete PHP Take Photo from Camera Package

How to Take Picture with Webcam using HTML5 Camera API

Webcams are devices that are present in most computers and mobile devices. Usually they are used to capture video of the user but they can also be used to capture still pictures.

Nowadays most browsers support capturing Webcam images without any special platform specific drivers, so any Web application can capture images with some HTML and JavaScript code and upload the images to the server.

This article presents you a solution that you can use to implement in any PHP Web site.

Webcam Photo Capture Online Solution to Use Webcam to Take Pictures

Since Webcams can take photos of any pictures that a computer or a mobile device can take, this solution can work to take any kind of photos online and save them to a server running PHP.

How Webcam Picture Capture Works

Basically Webcams are devices that generate image or video data. When accessed from a browser using an API, they can pull image or video data as if they are reading files.

Accessing video or images like files makes it easier to process it because Web pages support file uploading using HTML forms.

So all it is necessary to capture Webcam pictures is to connect Webcam data streams to file uploading forms.

Requirements for the PHP Webcam Script

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 JavaScript with HTML5 for the webcam screen. So you need JavaScript files that you can download and install as explained at the end of this article.

Capturing Pictures Using a Webcam PHP Script and HTML5 Camera API JavaScript

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 HTML: Take Picture From Camera

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

index.php

Here we will use the JPEG Camera script for the webcam functions to take the snap and save it.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jpeg_camera/jpeg_camera_with_dependencies.min.js" type="text/javascript"></script>

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

<div id="camera_info"></div>
    <div id="camera"></div><br>
    <button id="take_snapshots" class="btn btn-success btn-sm">Take Snapshots</button>

Now below the webcam screen we will use the buttons to take the snapshot.

<form>
 <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. PHP Capture Image from Camera Script to Handle the 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"><!--

    var options = {
      shutter_ogg_url: "jpeg_camera/shutter.ogg",
      shutter_mp3_url: "jpeg_camera/shutter.mp3",
      swf_url: "jpeg_camera/jpeg_camera.swf",
    };
    var camera = new JpegCamera("#camera", options);
  
  $('#take_snapshots').click(function(){
    var snapshot = camera.capture();
    snapshot.show();
    
    snapshot.upload({api_url: "action.php"}).done(function(response) {
$('#imagelist').prepend("<tr><td><img src='"+response+"' width='100px' height='100px'></td><td>"+response+"</td></tr>");
}).fail(function(response) {
  alert("Upload failed with status " + response);
});
})

function done(){
    $('#snapshots').html("uploaded");
}

// --></script>

Now when we receive the success message, we will show it in a table.

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Image</th><th>Image Name</th>
        </tr>
    </thead>
    <tbody id="imagelist">
            
    </tbody>
</table>

SQL for the Image Database PHP Upload Script

So now we have the code for taking the snapshot image and saving it to our images directory, but it is still not in database. Now we need to save the image to a database table record.

First create a database table with the name snapshot with an entry with three fields:
  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.

PHP Camera Capture Script for 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.

Download the Complete PHP Take Photo from Camera Package

We created the index.php script file to show the webcam screen to save the image in our project directory.

When the user clicks in the button to take a snapshot image it will upload it to the action.php script that calls a class in the webcamClass.php script to save the image in the images directory.

When the image name is saved to the database the connectionClass.php script establishes the database connection. A database table record is created with the image name using the function saveImageToDatabase.

In this tutorial we use the JpegCam Library. The whole list of used files consists of: action.php, webcam.js, webcam.swf, webcamClass.php, action.php, index.php and connectionClass.php.

You can download the whole list of files for this package in a ZIP archive or install it with the PHP composer tool following instructions from the same page.

If you liked this article or have questions, please post a comment here so it encourages me to write more useful articles.




You need to be a registered user or login to post a comment

1,451,806 PHP developers registered to the PHP Classes site.
Be One of Us!

Login Immediately with your account on:

FacebookGmail
HotmailStackOverflow
GitHubYahoo


Comments:

12. THis error arises when i use this code - Amman (2016-01-05 16:10)
please tell the reason... - 2 replies
Read the whole comment and replies

12. web came - Sher Khan (2015-02-27 09:29)
web cam not workin... - 2 replies
Read the whole comment and replies

11. Not working - akber.khowaja (2015-02-27 09:28)
this code is not working... - 1 reply
Read the whole comment and replies

3. Use html5; forget about flash - Jeffrey Kurtock (2015-02-06 08:46)
jpegcam not supported since 2010... - 2 replies
Read the whole comment and replies

10. Webcam plugin - Arial (2014-10-18 07:54)
Google Chrome Not Support with webcam plugin... - 1 reply
Read the whole comment and replies

9. How to make it work - Rajesh S (2014-06-14 04:37)
help me... - 1 reply
Read the whole comment and replies

8. Get Image and its details taken from web cam using PHP - Sai Varadula (2014-05-19 06:57)
How to get Image details taken from Web Cam Using PHP... - 1 reply
Read the whole comment and replies

6. only 1 screen needed. - vishesh kaul (2014-04-15 07:17)
help required urgently !!!... - 1 reply
Read the whole comment and replies

7. How to Use a webcam using PHP - Sunil Meshram (2014-04-14 19:14)
Must Test... - 0 replies
Read the whole comment and replies

4. thanks - missprogrammer (2014-02-28 05:38)
good... - 1 reply
Read the whole comment and replies



  Blog PHP Classes blog   RSS 1.0 feed RSS 2.0 feed   Blog PHP Webcam Capture Im...   Post a comment Post a comment   See comments See comments (26)   Trackbacks (0)