Home » PHP Webcam Capture Image and Save from Camera

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.

Read Also:  How to get current date and time in VueJS?

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.

Step 1: HTML Interface part


<!DOCTYPE html>
    <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; }
<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>
                <input type=button value="Take Snapshot" onClick="take_snapshot()">
                <input type="hidden" name="image" class="image-tag">
            <div class="dsp col-md-6">
                <div id="response">Your main captured image will appear here...</div>
            <div class="col-md-12 text-center">
                <button class="btn btn-success">Submit</button>
<!-- simple here configuration part a few settings and attach camera -->
<script language="JavaScript">
        width: 500,
        height: 600,
        image_format: 'jpeg',
        jpeg_quality: 90
    Webcam.attach( '#web_cam' );
    function take_snapshot() {
        Webcam.snap( function(web_cam_data) {
            document.getElementById('response').innerHTML = '<img src="'+web_cam_data+'"/>';
        } );

Step 2: Server side part


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

Web Programming Tutorials Example with Demo

Read :

Read Also:  Vue.js Simple Login Script using PHP MySQLi Bootstrap


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.

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  sql group by count
  2. Read Also:  MongoDB CRUD Tutorial With Example From Scratch
  3. Read Also:  PHP Webcam Capture Image Save from Camera using jQuery
  4. Read Also:  How to Get Current Date and Time in PHP?
  5. Read Also:  jQuery Capture Webcam Image Using Web Camera in PHP
  6. Read Also:  Laravel Nested Relationships in Eloquent Example
  7. Read Also:  Capture Webcam Image with PHP and jQuery
  8. Read Also:  How to Open URL in New Tab using CodeIgniter
  9. Read Also:  Dynamically Add delete rows with JQuery Multiple datepicker
  10. Read Also:  Laravel Increase Website Speed performance optimization

Leave a Comment

Your email address will not be published. Required fields are marked *