Integrating Your Webcam With WordPress

Integrating your webcam with a PHP application like WordPress can be a very handy tool, specially when you need your webcam time and again to snap images and upload it to the server, to be used on your website.

Let’s take a look at how exactly can you configure a webcam to upload snapped images directly to the server.

Capturing Pictures from the Webcam

Two files that would be essential for creating our image capturing application would be:

1. A Web Page to display the Webcam   
2. A Script to handle image upload

Step 1. A Web Page to display the Webcam

To be able to snap an image with the webcam and save it, we use the webcam.js file. Github offers the file for free download, which you can find here.

index.php

 

This is how exactly you would need to configure webcam.js to add the requisite functionality.

<script src="webcam.js"></script>

<div id="my_camera" style="width:640px; height:480px;"></div>

<div id="my_result"></div>

<script language="JavaScript">


Webcam.set({

    width: 640,

    height: 480,

    image_format: 'jpeg',

    jpeg_quality: 90

});



Webcam.attach( '#my_camera' );

function take_snapshot() {

               // take snapshot and acquire image data

    Webcam.snap( function(data_uri) {

    // display results

        document.getElementById('results').innerHTML =

        '<h2>Here is your image:</h2>' +

        '<img src="'+data_uri+'"/>';

    } );

}

Webcam.upload( data_uri, 'myscript.php', function(code, text) {

// Upload complete!

// 'code' will be the HTTP response code from the server, e.g. 100

// 'text' will be the raw response content

} );

</script>


<form>

    <input type="button" value="Take Snapshot" onclick="take_snapshot()">

</form>

Explanation:

Adding these lines of code to the file will let you create a live camera feed in my_camera DIV. When you click on ‘Take Snapshot’, the camera would click a still picture, convert it to a JPEG, and deliver a Data URI which is inserted into the my_result DIV as a standard <IMG SRC> tag.

Data URIs may be passed around like any URL, and can be submitted to your server as well.

Attaching the webcam to a DIV element

The file WebcamJS is initialized and activated by “attaching” a live camera viewer to a DOM element on the condition that the DOM element must already be created and should be empty. Pass in an ID or CSS selector to the Webcam.attach()

 

Webcam.attach( '#my_camera' );

This will activate the user’s webcam, ask for the appropriate permission, and begin showing a live camera image in the specified DOM element.

Should the camera not be attached to the system, you will be prompeted with an error as follows,

To Click a Picture

 

The Webcam.snap() function is called in a callback function to click a picture. The image data is passed to the function as a Data URI parameter, which can be used to then display image on the website.

Webcam.snap( function(data_uri) {

    // display results in page

        document.getElementById('results').innerHTML =

        '<h2>Here is your image:</h2>' +

        '<img src="'+data_uri+'"/>';

    } );

Uploading Images to a Server

To upload the snapped image onto the server, the Webcam.snap() function delivers image as a client-side JavaScript Data URI. The binary image data is encoded with Base64 and stuffed into the URI.

Webcam.upload( data_uri, 'myscript.php', function(code, text) {

// Upload successful!

// 'code' will be the HTTP response code from the server, e.g. 200

// 'text' will be the raw response content

} );

The Webcam.upload() function accepts three arguments: the Data URI containing the Base64 encoded image data as returned from snap(), a URL of PHP script , and a callback function to execute when the upload is complete.

Step 2: Writing A Script To Handle The Image Upload

myscript.php

$name = date('YmdHis');

$imagename = $_SERVER['DOCUMENT_ROOT']."/wp-content/uploads/multisite_images/".$name.".jpg";

move_uploaded_file($_FILES['webcam']['tmp_name'], $imagename);

The image data is uploaded as part of a standard multipart form post, and included as a form element named webcam. To gain access to this image data we have to write above php script. In above code the image is uploaded in the folder “multisite_images”.

While this tutorial aims at configuring a web camera to upload images to WordPress, the same process flow would be applicable to any PHP application! Hope this article helped!