PHP Webcam Capture Image and Save from Camera

Today, We want to share with you PHP Webcam Capture Image and Save from Camera.In this post we will show you capture and save image with html5 and php, hear for capture image using webcam and save to database in php and html5 we will give you demo and example for implement.In this post, we will learn about how to use webcam in php using html5 and save image to database with an example.

PHP Webcam Capture Image and Save from Camera

There are the Following The simple About PHP Webcam Capture Image and Save from Camera Full Information With Example and source code.

As I will cover this Post with live Working example to develop capture image from webcam and store in database in php, so the capture webcam image with php and jquery for this example is following below.

Read Also:  PHP Webcam Capture Image Save from Camera using jQuery

Step 1: HTML Interface part

index.php

<!DOCTYPE html>
<html>
<head>
    <title>Capture webcam image with php and jquery - pakainfo.com</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">
        #response { padding:20px; border:1px solid; background:#ccc; }
    </style>
</head>
<body>
  
<div class="container">
    <h1 class="text-center">Capture webcam image with php and jquery - pakainfo.com</h1>
   
    <form method="POST" action="do_upload.php">
        <div class="dsp row">
            <div class="col-md-6 dsp">
                <div id="web_cam"></div>
                <br/>
                <input type=button value="Take Snapshot" onClick="take_snapshot()">
                <input type="hidden" name="image" class="image-tag">
            </div>
            <div class="dsp col-md-6">
                <div id="response">Your main 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>
  
<!-- simple here configuration part a few settings and attach camera -->
<script language="JavaScript">
    Webcam.set({
        width: 500,
        height: 600,
        image_format: 'jpeg',
        jpeg_quality: 90
    });
  
    Webcam.attach( '#web_cam' );
  
    function take_snapshot() {
        Webcam.snap( function(web_cam_data) {
            $(".image-tag").val(web_cam_data);
            document.getElementById('response').innerHTML = '<img src="'+web_cam_data+'"/>';
        } );
    }
</script>
 
</body>
</html>

Step 2: Server side part

do_upload.php

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

Web Programming Tutorials Example with Demo

Read :

Read Also:  React JS Interview Questions and Answers

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about PHP Webcam Capture Image and Save from Camera.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.