PHP 7 Script to Take Photos From Webcam and Download it as PNG Image in Local Disk Using Webcam.js in HTML5 and Javascript

Welcome folks today in this blog post we will be writing the php script to take the photos from user webcam and upload it to server using webcam.js library in browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>
      Capture webcam image with php and jquery
    </title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
    />
    <style type="text/css">
      #results {
        padding: 20px;
        border: 1px solid;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 class="text-center">
        Capture webcam image with php and jquery
      </h1>

      <form method="POST" action="http://localhost/webcamapp/storeImage.php">
        <div class="row">
          <div class="col-md-6">
            <div id="my_camera"></div>
            <br />
            <input
              type="button"
              value="Take Snapshot"
              onClick="take_snapshot()"
            />
            <input type="hidden" name="image" class="image-tag" />
          </div>
          <div class="col-md-6">
            <div id="results">Your captured image will appear here...</div>
          </div>
          <div class="col-md-12 text-center">
            <br />
            <button class="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    </div>

    <!-- Configure a few settings and attach camera -->
    <script language="JavaScript">
      Webcam.set({
        width: 490,
        height: 390,
        image_format: "jpeg",
        jpeg_quality: 90,
      });

      Webcam.attach("#my_camera");

      function take_snapshot() {
        Webcam.snap(function (data_uri) {
          $(".image-tag").val(data_uri);
          document.getElementById("results").innerHTML =
            '<img src="' + data_uri + '"/>';
        });
      }
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>

Capture webcam image with php and jquery

</title>

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"

#results {

padding: 20px;

border: 1px solid;

background: #ccc;

}

</style>

</head>

<body>

Capture webcam image with php and jquery

</h1>

<br />

<input

type="button"

value="Take Snapshot"

onClick="take_snapshot()"

</div>

<div id="results">Your captured image will appear here...</div>

</div>

<br />

<button class="btn btn-success">Submit</button>

</div>

</form>

</div>

Webcam.set({

width: 490,

height: 390,

image_format: "jpeg",

jpeg_quality: 90,

});

Webcam.attach("#my_camera");

function take_snapshot() {

Webcam.snap(function (data_uri) {

$(".image-tag").val(data_uri);

document.getElementById("results").innerHTML =

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

});

}

</script>

</body>

</html>

As you can see we are including the webcam.js cdn at the top and then we have a simple area where we are displaying the user live webcam feed and then we have the simple button to capture the screenshot and display it in the right hand side as shown below

And then after capturing the screenshot we will click the submit button to upload the image to php server and store it inside the uploads directory

Now you need to make the storeImage.php file and copy paste the following code

storeImage.php

<?php
    
    $img = $_POST['image'];
    $folderPath = "uploads/";
  
    $image_parts = explode(";base64,", $img);
    $image_type_aux = explode("image/", $image_parts[0]);
    $image_type = $image_type_aux[1];
  
    $image_base64 = base64_decode($image_parts[1]);
    $fileName = uniqid() . '.png';
  
    $file = $folderPath . $fileName;
    file_put_contents($file, $image_base64);
  
    print_r($fileName);
  
?>

<?php

$img = $_POST['image'];

$folderPath = "uploads/";

$image_parts = explode(";base64,", $img);

$image_type_aux = explode("image/", $image_parts[0]);

$image_type = $image_type_aux[1];

$image_base64 = base64_decode($image_parts[1]);

$fileName = uniqid() . '.png';

$file = $folderPath . $fileName;

file_put_contents($file, $image_base64);

print_r($fileName);

As you can see we are declaring the uploads directory path where we will be uploading the images taken from the webcam. First of all we will be attaching random filename using the base64 code and then we are uploading the image using the file_put_contents() method.