How to use webcam in php Part   2

How to use webcam in php Part 2

In this tutorial you will find that How you can use Webcam in PHP using HTML5 and Jquery.

In this tutorial you will see that we have used the code of my blog post for showing the code you can also download the code from my blog post below is the link of the article which i have written for showing the Webcam in PHP.

In this video we have describe the working of buttons and saving the clicked image to the database. You will find 2 types for saving the image to the database. One is local storage under the folder and another one is Base64 image transform than save the image to the database.

Important Note – The whole package will run perfectly over the localhost but if you put the package over the server than you need to switch to HTTPS.

If you want working example of the tutorial than you can also download the whole example from the github. You will find the download link at the bottom of the article.



  1. hello thank you for the good tutorial. I have created a web camera using php that saves pictures, now my problem is that the pictures are big so they take time to be can i resize the pictures with the webcam ? resize the picture before it can be saved inthe folder? please help

  2. <!DOCTYPE html>



    <title>MAG SNAPSHOT</title>

    <script type="text/javascript">

    function fileSelected() {

    var count = document.getElementById('fileToUpload').files.length;

    document.getElementById('details').innerHTML = "";

    for (var index = 0; index < count; index ++)


    var file = document.getElementById('fileToUpload').files[index];

    var fileSize = 0;

    if (file.size > 300 * 300)

    fileSize = (Math.round(file.size * 100 / (300 * 300)) / 100).toString() + 'MB';


    fileSize = (Math.round(file.size * 100 / 300) / 300).toString() + 'KB';

    document.getElementById('details').innerHTML += 'Name: ' + + '<br>Size: ' + fileSize + '<br>Type: ' + file.type;
    document.getElementById('details').innerHTML += '<p>';



    function uploadFile() {

    var fd = new FormData();

    var count = document.getElementById('fileToUpload').files.length;

    for (var index = 0; index < count; index ++)


    var file = document.getElementById('fileToUpload').files[index];

    fd.append('myFile', file);


    var xhr = new XMLHttpRequest();

    xhr.upload.addEventListener("progress", uploadProgress, false);

    xhr.addEventListener("load", uploadComplete, false);

    xhr.addEventListener("error", uploadFailed, false);

    xhr.addEventListener("abort", uploadCanceled, false);"POST", "snap_acc_save.php?id=<?php echo $_GET['id']; ?>");



    function uploadProgress(evt) {

    if (evt.lengthComputable) {

    var percentComplete = Math.round(evt.loaded * 100 /;

    document.getElementById('progress').innerHTML = percentComplete.toString() + '%';


    else {

    document.getElementById('progress').innerHTML = 'unable to compute';



    function uploadComplete(evt) {

    /* This event is raised when the server send back a response

    window.location ="snap_acc.php?id=<?php echo $_GET['id']; ?>";


    function uploadFailed(evt) {

    alert("There was an error attempting to upload the file.");


    function uploadCanceled(evt) {

    /*alert("The upload has been canceled by the user or the browser dropped the connection.");*/






    $dbconn = mysqli_connect("localhost","root","","qoutationdb");
    $Key_Ref = $_GET['id'];

    $dbcmd = "SELECT * FROM client_details WHERE Key_Ref='$Key_Ref' OR Reg_No LIKE '%$Key_Ref%'";

    $dbquery = $dbconn->query($dbcmd);

    $val1 = $dbrow['Reg_No'];

    <div class="container">
    <form id="form1" enctype="multipart/form-data" method="POST" action="snap_acc_save.php?id=<?php echo $_GET['id']; ?>">

    <a href="mag_snapshot/snapshot_index.php?id=<?php echo $Key_Ref; ?>" style="float:right;"><img src="images/men.png" height="35" width="35"/></a>
    <h1 for="fileToUpload" style="color:#ffa838;">MAG SNAPSHOT</h1>
    <h4 style="color:#ffa838;">Registration No:<?php echo $val1; ?></h4><hr>

    <table border="0" style="margin-left:370px;">
    <a href="#" onclick="document.getElementById('fileToUpload').click(); return false;"/><img src='images/log.png' size="1mb" width="130" height="120"/></a>
    <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" size="1MB" accept="image/*" capture="camera" width=30; height=40; class="button" style="visibility: hidden;" />

    <div id="details"></div>

    <tr><td>Accident Image</td></tr>
    <!–<a href="">–><input type="button" onclick="uploadFile()"size="1mb" value="SAVE ACCIDENT IMAGE" class="button1" /><!–</a>–>
    <td> <a href="snap_gallery1.php?id=<?php echo $_GET['id']; ?>"><img src="images/chk.png" height="30" width="40"/>Done</a> </td>
    <td> <div id="progress"></div> </td><!–snap_acc.php?id=<?php echo $_GET['id']; ?>–>


    <label style="color:white; font-size:12px;">Motor Accident Group &copy;</label>


  3. i removed the "px" next to width number and length number now i dont have errors anymore.i thank you much dear ,Lol last question.Now My system captures a picture then save it to a folder,i want my thumbnail script run it self automatically with new pictures,and how will it get the new name image hence onthe codes we have to type the name of the image manually. i have (e.g) "snapshot.php"=captures a picture and "snapshot_save.php"=saves taken pictures into a folder.I then decided to put thumbnail codes on "snapshot_save.php" and created a thumbnail file.NB NOW WHEN I TAKE A NEW PICTURE AND SAVE IT,The original picture get saved in its folder and THUMBNAILs ARE BLANK INTHE THUMBNAIL FILE. i need a solution.
    Show less

  4. Hello Vivekmoyal, Thanks a lot for your tutorial. I have managed to create webcam but when I am trying to save to local host I get the error " Upload failed with status 500 " Any ideas why please ??

  5. Hello Vivekmoyal, Thanks for your tutorial. I'm using it on an application I developed that works on a local server, but I'm having problems when using android or Safari (can't access the camera). Do you know how I can solve the problem? Thank you very much

Comments are closed.