How to Use Webcam in PHP Using HTML5 and Save Image to Database

By | June 7, 2017


Hello Friends recently i have added a Tutorial about How to use Webcam in PHP and Save Image to Database using Mysqli. Earlier tutorial using the Flash Plugin for showing the Webcam and clicking the Image.

Today i am uploading another tutorial for How to use Webcam in PHP using HTML5, Jquery and Save Image to Database using Mysqli. This tutorial is slightly different from the previous tutorial as this tutorial will use the HTML5 for showing the Webcam.

Design Part for showing the webcam window and button to capture



Script part for Showing Webcam, Button Click working and Saving the Image to Database



 You can Download the files or tutorial from Github – Click Here

Thank You for reading the tutorial If you like the tutorial than please please Share it. If you have any comment than let me know comment below.

 

35 thoughts on “How to Use Webcam in PHP Using HTML5 and Save Image to Database

  1. Amol

    Camera
    Blocked to protect your privacy

    getting this in Google Chrome Site Settings and its disabled so cannot change it.

    Reply
    1. Vivek Moyal Post author

      You have to use HTTPS on your website if you want to use the camera

      Reply
          1. Amol

            Is there any other option rather than using SSL? but chrome is important.

            Reply
            1. Vivek Moyal Post author

              No any other option and you are right Chrome is important. Why dont you try it free. Many SSL providers are there who provide SSL at free of cost. You can use https://www.sslforfree.com/ Its free for lifetime i think.

              Reply
  2. Niick

    Why is the live video reversed or a mirror image? The captured image is correct.

    Reply
  3. William

    Hello dear ViVek Moyal,

    First of all i would like to thank you for your tutorial which I have found very helpful. I have managed to create the camera and to save the image to the server. Now i would like to save the file path to DB as well and in order to do this I need to pass the value of the file path to another page.

    Can you please tell me if this is possible and if yes how can i do it ??

    Thanks in advance,
    William

    Reply
    1. Vivek Moyal Post author

      I have already giving you the path with in the example. You can use the JSON response for getting the path details

      Reply
  4. Prince Michael

    Hello,

    Please could you rewrite the insert code for update code.

    I want to use your code to update a record after the persons profile has been entered into the database.

    Thank you

    Reply
    1. Vivek Moyal Post author

      I am not able to understand ” Insert code for update code”. Did you mean updating the record or inserting the record.

      Reply
      1. Prince Michael

        What I mean is rewriting the code as an update table code instead of Insert table.

        I will send you a mail via your Youtube account so I can explain more OK

        Reply
        1. Prince Michael

          Please sir check your mailbox. I just responded to your earlier message.

          Thank you

          Reply
  5. djtale

    Hello and thanks for this script.

    I have this message “Upload failed with status 0”.

    Can you help me to debug this and find out where the issue is ?
    What can I add into the script to debug it ?

    Thanks

    Reply
  6. Rajesh

    Hi,
    Can you help me out to show my webcam view to other’s.
    I mean in your code the user can see to self but I want where user can view other user and it should be 1 to all kind of thing.
    Any suggestion will be appreciated.
    Thanks

    Reply
  7. RPSingh

    Dear

    Thanks for your excellent code, I am trying use this using this in our visitor management system. Here we want to use it remote system . We want person to click his picture on his mobile. It is giving “You have denied camera access” form my IP address however is working good with localhost.

    Reply
    1. Vivek Moyal Post author

      Your website should use HTTPS otherwise you cannot access it.

      Reply
  8. David Elyea

    Great Tutorial and youtube videos.
    I seem to have an issue with video image being flipped horizontally. The only fixes I have seen for this are to add items to the CSS file.
    However the saved image is in the correct alignment.
    Have you seen this problem and if so is there a fix?

    Reply
  9. willings

    thx alot indeed it has worked out for me, so other task how can link this image to patient id of the patient, i need to use it on patient file but i don’t know how to attach to there demographic pages, any help i will be glade

    Reply
    1. Vivek Moyal Post author

      thank you that you liked my work. In this tutorial i have saved this image to the database and same you can do as you are using the image for the patient

      Reply
  10. Deon

    Thank you for this great info. Have you every considered to extend this with .pdf capability? So you can use the webcam to take a photo, but convert it to .pdf and save it as a document.

    Reply
    1. Vivek Moyal Post author

      Thats really a good idea. I will surely implement this.

      Reply
  11. Rajesh

    Hi,
    Thanks for the tutorial but I am getting error.
    “You have denied camera access.”
    I don’t know why?.

    Reply
  12. Sabby

    Hi Vivek
    Need one urgent help.
    After deploying your code ,capturing photo through webcam is working fine and appreciated your efforts on this.
    One conflict I faced,after capturing one photo,Webcam console is getting fixed not unable to check Live Cam during further capture.
    Could you please able to help on this.

    Regards
    Sabby

    Reply
  13. ss

    thank you for the tutorial. but i have a little nit problem. when i snap the picture, the image name does not have in database.

    Reply
    1. Vivek Moyal Post author

      Please check that you are connected to the database or not.

      Reply
    1. Fredrik Brandt

      Hi and thanks for a great feature,
      I wonder however how I can save the image to my own db-table.
      I would like to add the image to my own table but imagelist only contains the image and filename with path saved to disc in a non-usable format.
      I want to get the filename (or picture) into a variable (or screen value) and use this in my instert-routine.
      How is this possible? I tried the underlaying php, without luck.
      Regards,
      /Fredrik.

      Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.