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

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>

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);

Related posts:

You Might Also Like

PHP 7 Script to Implement Double Equal (==) and Triple Equal (===) Operator With Examples Full Project For Beginners

PHP 7 Script to Insert Data From HTML Textarea Form to MySQL Database Using Javascript Full Project For Beginners

PHP 7 Script to Scrape or Extract Title and Meta Description of Website URL Full Project For Beginners

Leave a Reply Cancel reply