Since Flash is not used anymore for web apps, I thought I should remake the old Photobooth in HTML5. This web app captures pictures from the webcam or phone camera and saves them to a server (php or asp). It uses HTML5 and JavaScript to do so and it has a Flash fallback for older browsers (like Internet Explorer) that’s don’t support the HTML5 video object.
You can test out the app here:
Here you have the source files:
HTML5 Webcam Photobooth Web App (123.7 KiB, 927 hits)
Documentation:
HTML5 Webcam Photobooth Web App documentation.
See the working application:
HTML5 Webcam Photobooth Web App Live
Consider donating to help me make more open source projects like this:
Very good but how to transfer to database table from folder.Like in earleir version
How to Upload and Store Image Path to Database and Image to Folder
You can do that with some PHP or ASP. You can hire me if you want custom code made.
I’m having a problem putting the code next to my project, I can take the photos but not saved.
Please help me!!
Please use the contact page and send me a message with a link to the page where you have the problem and I will try to help you.
hi there, im building a photobooth app that runs on IIS localhost, im using your photobooth app as the material to build it, however the app only runs on https: and cannot run on my localhost, may i know how should i enable the app to run on localhost? thanks
I have no idea. Most likely you will have to change some browser configurations in order to run the HTML5 video object and the webcam locally.
You will also need a server environment to save the image.
hi there, i solved it by commenting out the part that displays the message about browser supports camera streams over https. right now im trying to capture a photo with a photo frame around the photo, i can display the png img over the camera screen by simply using an tag below the tag, but when i click capture, it only snapshot a photo from the tag but without the .png. i tried putting the inside the tag, but then the png does not appear. do you know of any way that i can allow the photobooth app to capture a photo with a .png frame over it?
You should be looking for HTML2Canvas. Generate the canvas data and save the data to jpg pr png.
hi, i managed to solve it by commenting out the section that shows the message that says the app only runs on https:, right now im trying to add a picture frame in png format on the webcam screen and capture the photo with the frame but with no success, for the .png frame i use an tag to display it over the tag, but i cannot put the tag inside the tag coz it wont display the frame even with z-index, any idea how can i capture the webcam photo with the png frame?
sorry i mean i used an tag to display the png fram over the tag, but i cannot put the tag inside the tag coz it wont display the png frame even with z-index
somehow the comment section doesnt show texts inside tag. also, the captcha before posting comments isnt showing, so when i click ‘ post comment ‘, it’ll bring me to a page that says ‘ your captcha is incorrect ‘ and i have to come back to this page, but when i click post comment again then it works
hi Paul, i managed to run the photobooth app in a server’s localhost, but when i try to run it using the server’s ip url or domain name, something like 10.10.2.10/photobooth/index.php, the app prompts the user to run flash instead of using js to start the webcam, as we know flash will be stopped by 2020, how can i force the app to run the webcam in js instead of flash? i tried commenting out the part where it runs flash but it only shows blank at screen where it should show the webcam feed
I may be able to help you out if you can send me a url I can access. In theory, if everything is uploaded correctly on your server, it should ask first for the HTML5 version. Only if HTML5 camera is not supported by your browser, it will try to run the Flash based version.
i cant privide a url as all development work were done in our intranet. Do you think if its possible that its because the url i use is not https:// ? But isnt https just adding encryption only?
That shouldn’t be a problem.
hi Paul, my client will be using a 4k camera for the photobooth, do u know any way that i can set the default resolution of the video element to 4k? also, any way that i can set both the width and height instead of only able to set the width and the app auto calc the height?
Not sure what to tell you. Maybe have a 4K screen and set the size of the video element to 4k. Also, you have all the code, everything you need, just modify it to fit your needs.
I would be interested to see if it could take 4 pictures, resize and put them on one picture so I can print it?
You can definitely do that. The code is open source and available to download from GitHub. Do whatever you want with it.