How to Integrate Webcam Capture in a PHP Application?

Want to enable users to capture pictures from within your PHP application? You can easily achieve it with a JavaScript webcam library like Dynamsoft Camera SDK.

In this article, we will show you how to show live video stream, do online webcam capture and upload the images to a web server in a PHP application by using Dynamsoft Camera SDK.

Please first install Dynamsoft Camera SDK so that you can call its webcam APIs in your application.

Download 30-day free trial

System Requirements:

  • Client-side: Windows; IE v6 or above, Chrome, Firefox; A UVC compatible webcam
  • Server-side: PHP, your desired web server

Basic steps of integrating webcam capture in a PHP Application:

 1. Create an HTML page to display the video and webcam screen. We name it ImageUpload.html here.

Copy over the resource files of Dynamsoft Camera SDK. You can find the DCSResources folder under the installation folder of Dynamsoft Camera SDK.

Add the references to the two JS files of the webcam SDK.

<head>
 <script type="text/javascript" src="DCSResources/dynamsoft.webcam.config.js"> </script>
<script type="text/javascript" src="DCSResources/dynamsoft.webcam.initiate.js"> </script>
</head>

Add two containers to display the video stream and captured image.

<div id="video-container" style="width: 500px; height: 400px; display: inline-block; border: solid 1px gray"> </div>
<div id="image-container" style="width: 500px; height: 400px; display: inline-block; border: solid 1px gray"> </div>

Initialize the webcam object and then play the video.

<script type="text/javascript">
dynamsoft.dcsEnv.init('video-container', 'image-container', onInitSuccess, onInitFailure);
function onInitSuccess(videoViewerId, imageViewerId) {
dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId);
dcsObject.camera.playVideo(); 
}
</script>

Add a Grab button and the JS scripts to grab images.

<input type="button" value="Grab" onclick="acquireImage();" />
<script type="text/javascript">
//capture an image
function acquireImage() {
 if (dcsObject) {
 dcsObject.camera.captureImage('image-container');
 }
 }
</script>

Open the HTML page in the browser and below is what it looks like.

webcam capture in PHP application

 2. After capturing the image, we want to save it to the web server.

Dynamsoft Camera SDK provides both synchronous and asynchronous HTTP methods for you to upload images. You can pass extra fields which you want to save along with the images using the setHTTPFormFields method.

In ImageUpload.html, let’s add an Upload button.

<a id="btn-upload" class="btn-upload" onclick="onBtnUploadClick(this);">Upload</a>
<script type="text/javascript">
  function onBtnUploadClick() {   
var imageViewer = dcsObject.getImageViewer('image-container');
    var counter,
        url = getCurPagePath() + 'ActionPage.php',
        fileName = “test.jpg”,
        imageType = imageViewer.io.EnumImageType.JPEG;
        imageIndexArray = [0];

    imageViewer.io.setHTTPFormFields({ "fileName": fileName });
    imageViewer.io.httpUploadAsync(url, imageIndexArray, imageType, onUploadSuccess, onUploadFailure);

} 
</script>

 3. We need to create an action page ActionPage.php to receive the image data and handle all the server-side operation like saving the data on the hard disk or database, etc.

ActionPage.php – receive the image data from client side and save the captured image to the server disk

<?php 
$strJson = "{\"success\":false}";

try{
    $file = $_FILES["RemoteFile"];
    
    $fileName = $_POST["fileName"];
    
    if ($fileName == "" || $fileName == null) 
    $fileName = $file["name"];
    
    $filePath = dirname(__FILE__) . "\\UploadedImages\\" . $fileName;
    
    if(trim($file["type"]) == "application/octet-stream"){
        move_uploaded_file($file["tmp_name"] , $filePath);
    }
    
    else{
        $file_contents = base64_decode(str_replace(' ', '+', file_get_contents($file['tmp_name'])));
        
        file_put_contents($filePath, $file_contents);
        
    }
    $strJson = "{\"success\":true, \"fileName\":\"" . $fileName . "\"}";
}
catch(Exception $ex){
    $strJson = "{\"success\":false, \"error\": \"" . ex.Message.Replace("\\", "\\\\") . "\"}";
}
// Response.Clear();

header("Content-Type: application/json; charset=utf-8");

echo $strJson;

?>

The complete sample code is available for downloading at Dynamsoft code gallery.

Get the free trial of Dynamsoft Camera SDK to integrate webcam capture into your web application.

If you have any questions on integrating webcam capture into a PHP application, please let us know.

 

 

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com