PHP Webcam Capture Image and Save

June 27, 2024 - By admin

PHP Webcam Capture Image guide, I’ll demonstrate the process of capturing video from a webcam and saving the images to a server using a PHP application. We’ll utilize the webcam library for the purpose of live video capture. This library enables the display of both the desktop camera and the mobile camera, allowing users to view and capture photos from these devices.

To record photos using a webcam, we utilize a JavaScript library

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>

PHP Webcam Capture Image guide

PHP Webcam Capture Image guide example, we will make a file called index.php and show you the layout of your webcam with a button that says “Capture Snapshot.” If you click on that button, the js library will take an image and encode it as a base64 string. After that, the picture will be saved in the directory when you click the submit button.

Step 1- Create Index.php file for camera preview and capture button with HTML, CSS, And JS

<!DOCTYPE html>
<html>
<head>
    <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" />
    
</head>
<body>
  
<div class="container">
  
    <form method="POST" action="storeImage.php">
        <div class="row">
            <div class="col-md-6">
                <div id="my_camera"></div>
                <br/>
                <input type=button value="Capture Snapshot" onClick="capture_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 capture_snapshot() {
        Webcam.snap( function(data_uri) {
            $(".image-tag").val(data_uri);
            document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';
        } );
    }
</script>
 
</body>
</html>

Step -2 Create a PHP Script to Handle the Upload

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

Step 3: Create an Upload Directory

Make sure your php script file is located in the same directory as the uploads directory. The captured images will be stored in this directory.

Step 4: Run the Application

Open the index.php file in a web browser.
Allow the browser to access your webcam.
Click the “Capture Snapshot” button to capture an image from the webcam feed.
Click the “Submit” button to upload the captured image to the server.
The php script will save the image in the uploads directory and display a link to the uploaded image.

I hope it can help you…

Thanks

Visited 20 times, 1 visit(s) today