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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>How to Use Webcam In PHP</title>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
#camera {
width: 100%;
height: 350px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">Tutorial at <a href="https://goo.gl/Y9VjO2">www.vivekmoyal.in</a></div>
<div class="col-md-6">
<div class="text-center">
<div id="camera_info"></div>
<div id="camera"></div><br>
<button id="take_snapshots" class="btn btn-success btn-sm">Take Snapshots</button>
</div>
</div>
<div class="col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th>Image</th><th>Image Name</th>
</tr>
</thead>
<tbody id="imagelist">
</tbody>
</table>
</div>
</div> <!-- /container -->
</body>
</html>
Script part for Showing Webcam, Button Click working and Saving the Image to Database
<script>
var options = {
shutter_ogg_url: "jpeg_camera/shutter.ogg",
shutter_mp3_url: "jpeg_camera/shutter.mp3",
swf_url: "jpeg_camera/jpeg_camera.swf",
};
var camera = new JpegCamera("#camera", options);
$('#take_snapshots').click(function(){
var snapshot = camera.capture();
snapshot.show();
snapshot.upload({api_url: "action.php"}).done(function(response) {
$('#imagelist').prepend("<tr><td><img src='"+response+"' width='100px' height='100px'></td><td>"+response+"</td></tr>");
}).fail(function(response) {
alert("Upload failed with status " + response);
});
})
function done(){
$('#snapshots').html("uploaded");
}
</script>
If you are facing issue of camera not working then Please update this in your jpeg_camera.js -> line no 321. Just replace the whole success function with the below code
success = function(stream) {
that._remove_message();
if (window.URL) {
that.video.src = URL.createObjectURL(stream);
} else {
that.video.src = stream;
}
that._block_element_access();
return that._wait_for_video_ready();
};
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.
Vivek Moyal;
Great Job!!! Thanks lot…I have faced some issues apter completing your instructions;
” I cannot paper in webcam output as you mention”
Please can you help me?
Hi Vivek
I have two issues and I wonder if they are related, the first one is image not showing in browser and the second is a folder access issue. Failed to write data to webcamImage, check permissions. I have downloaded the files from your link so I should have the latest updated file.
If you go over Github you will get the latest files. https://github.com/VivekMoyal28/webcam-in-php-html5
Hi Vivek,
Thanks for sharing such good work.
I am getting this error.
ERROR: Failed to write data to webcamImage/20210601115329.jpg, check permissions
And permission does not seem to the issue as empty file jpg is created in the webcamImage folder. Kindly help in resolving the issue.
Also I am using https but I can not see camera feed on the screen.
Thanks. This is what I got ERROR: Failed to write data to webcamImage/20201111125818.jpg, check permissions
It’s not working when I uploaded it to my site 🙁
Your website should be https
You need https also.
i found a error from run application like ” You have denied camera access. ” please help in this
If you clicked over the denied button then it will show you the access denied. And in which browser you are getting this issue.
Good Morning Vivek ji,
My self pkumar from Gujarat. i have small firm name padmavati Infosys and i want to collaboration with you.
because i have seen your videos , its good . please give me your number and mail id also.
here i want make web based or server based application witch take document photo. visitor there credentials .
Thank you
Hello Pkumar my mail id is vivekmoyal28@gmail.com
I want to ask that if i use this code and someone take a pic from they camera on mobile, Then will the pic will be saved on their phone gallery? Or it will just upload on to site?
Hello nice work. Thank you for the information. But is there a way to make it save video instead of images?
I Want to create a live streaming system.
Admin start streaming
and at the same time all the users can view the admin’s video.
Good Morning Vivek ji,
Here , i am Shiv Mishra from Lucknow. here i want visitor Management system with source Code. how much you will charge.
vishwanath computronics is my firm name. and i want to collabration with you.
because i have seen your videos , its good . please give me your whatsapp number also.
i want standalone and next web based or server based visiter software. simply photo with there credentials .
and give to visitor as a pass .
Thank you
Sent you a mail please check. apologize for the late reply
bro not working chrome app
Hi Vivek Moyal
A very good tutorial but unfortunately I am unable to view the camera on my web browser. I tried in Chrome, Firefox as well as IE. I downloaded the code from github and tried it as is also but no results. I tried replacing the code block you mentioned earlier in this blog but for no use. Can you please assist me on this? what am i doing wrong even though I have changed nothing in the code fro github.
If you are running it live over the server then you have to use the HTTPS and if you are running it over localhost then make sure you have granted the permissions.
granted permissions sir! how please?
Greetings and thanks for this great development. I have seen both videos and downloaded the files, but I can’t find or have the jpeg_camera.js file to modify it. Where is he? Thank you.
heloo sir its realyy appreciable but my camera get on but nothing shows on it so can you help with this and it capture images but it cant be read
Check the blog post again you will see that there is a part which you have to replace in the jquery file. After that it will run
Hi! I’m having the same issue, the jquery file you suggest to update is minified so I can’t find the 321 line. Help please!
Hi vivek ,
I have the same issue on Chrome where i cannot see the display of the webcam. my js file name is jpeg_camera_with_dependencies.min.js. whree must i do the changes in the file you have mentioned in the article in jpeg_camera_with_dependencies.min.js file.
thank you
manesh
Hello it’s working fine but some issues in there camera is open but stil not showing me when i put updated script no have file jpeg_camera.js in your demo so when i put this script.
Please check the github version
Hey there! Thanks for the tutorial you make
But there’s something i’d like to ask you, if i want to use something like portable camera, not build-in camera, for my project, how to make it work?
Thanks
I have tested it with the external camera and it was working fine. Camera depends on your browser if your browser can show it then the code will also show it.
ERROR: Failed to write data to webcamImage/20190306071641.jpg, check permissions.
same error for my side and also folder permission
also save image in folder but given same error…
Please solve my problem
As you can see that error is only related to the permissions.
how can i fix that permissions?
Did you solve this issue, I am getting the same error check permission.
Hi Vivek,
Thanks for sharing such good work.
Even am getting this error.
ERROR: Failed to write data to webcamImage/20200820080426.jpg, check permissions
And permission does not seem to the issue as empty file jpg is created in the webcamImage folder. Kindly help in resolving the issue.
Also I am using https but I can not see camera feed on the screen.
Working over your issue soon will roll an update.
Hello with e. I have a question, is it possible? To choose as choices between the front or back camera?
Where can you change that,,,,, in the code?.
Thanks in advance gr e
Most of the options are dependent over the browser only.
It’s reallү a nice and ᥙseful piece ᧐f info. I am hаppy that you simply shared tһis helpful informatіon witһ us.
Plｅase keep uus uр to datе liқe thіs. Thankѕ for sharing.
Hi ViVek
Thank you for this, it is great!
Only one problem – it works perfectly in Firefox, but I cannot get it to work in Chrome.
My site is https, and i has made all chrome settings open and allow the url
BUT the part of the screen where the live image should be is just blank!
Any suggestions as to a fix??
TIA
Its a gr8 work you have done Mr.Vivek. Thankyou.
Can i use a photo/document scanner from PHP. if there is a tool like [webcam in php] Please let me know.
Thanks in advance
Vidya Kiran
Hi Vivek,
I think you made a great great tutorial and script. For Chrome everything is working fine, but for Firefox it doesn’t work:
Because the jpeg_camera_with_dependencies.min.js doesn’t work for Firefox (I am using FF 62.0.3 and FF Developer Edition 64.0b1 on OSX High Sierra), it says:
navigator.mozGetUserMedia has been replaced by navigator.mediaDevices.getUserMedia (line 12 pos 7093)
and gives a
TypeError: Argument 1 is not valid for any of the 1-argument overloads of URL.createObjectURL (line 12 pos 6699)
Can you please make it work, while the js min version is hard to edit.
Kind regards,
Henk
You are absolutely right. Yesterday i discovered this issue while working with my developer. I will check it soon it may an issue of firefox i think.
Hi
when i clicked on “take screenshot” button it show me error :
ERROR: Failed to write data to webcamImage/20190306071641.jpg, check permissions.
This error is regarding the folder permission
This error is caused because the function createObjectURL is deprecated for Google Chrome
I changed this:
video.src=URL.createObjectURL(a)
to this:
video.srcObject=a;
This worked for me.
Is this possible to record a video and save that video in to database?
Camera
Blocked to protect your privacy
getting this in Google Chrome Site Settings and its disabled so cannot change it.
You have to use HTTPS on your website if you want to use the camera
but i can access it on Firefox without SSL
Yes you can but for chrome you need SSL.
Is there any other option rather than using SSL? but chrome is important.
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.
Why is the live video reversed or a mirror image? The captured image is correct.
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
I have already giving you the path with in the example. You can use the JSON response for getting the path details
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
I am not able to understand ” Insert code for update code”. Did you mean updating the record or inserting the record.
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
OK for this you have to run update query
Please sir check your mailbox. I just responded to your earlier message.
Thank you
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
Which framework do you use here?
No framework simple html5 and core php
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
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.
Your website should use HTTPS otherwise you cannot access it.
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?
You can use the PHP script to flip the image
How? Have you got an example?
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
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
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.
Thats really a good idea. I will surely implement this.
Hi,
Thanks for the tutorial but I am getting error.
“You have denied camera access.”
I don’t know why?.
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
You can use this.discard(); in your done function.
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.
Please check that you are connected to the database or not.
Hi there friends, how is everything, and what you wish for to say concerning this paragraph,
in my view its truly amazing for me.
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.