Accessing Your Webcam in HTML5

This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm
2 Likes

Found your post to be useful. Taught this to my students today. Thank you.
Shashaa

Hi! Thanks for the post. I keep having the gray box whenever I try to use the code. I’m sure I gave the permisson to the browser to use the camera. I used the camera in the post and it’s working good so it doesn’t seem to be a problem with it. What else can it be? Thank you.

Are you running it locally or on your web server? If on a web server, do you have HTTPs enabled? :slight_smile:

I’m getting the same grey box running it locally. I can see the camera output in the viewer you have under The Example but not on my local page built with the code above.

P.S. I’m using Chrome. When I load the page it does ask for permission to use the camera.

Does your console in the Chrome Dev Tools show any errors?

Yes:

Not allowed to load local resource: blob:null/0715257d-1c6f-4fdf-92cd-42b0ab3e54b9

You will need to run it via a HTTP server. Accessing it via the file system directly no longer works :frowning:

Hi Kirupa, first of all i will like to say, thanks for your free willing to help us learn better on how to work with Webcam in HTML5. I did succeeded to follow your above insructions and i was able to add a webcam to my web browser blog webpage, even though my lack of inadequate knowledge on Webcam HTML5, but still i could because of you brief and profound explanation.
After i finished with the webcam setup, i was able to browse from my computer and see myself very clearly, but when i tried it on my wife computer i was unable to autoplay or see myself as was on my own browser.
Can you please help me by explaining further on what i should do to be able to autoplay(open) the webcam sucessfully on any other computer elsewhere? Once more Thanks, is my pleasure to be a member of your forum!

Sorry Kirupa for complaining earlier in my previous comment, i found the cause, the webcam wasn’t able to play automatically because, i incompletely wrote it on my wife computer browser as, assignmentboard.blogspot.ru, instead of this, https://assignmentboard.blogspot.ru which is the derect link to the webpage server.
I will also be very grateful, if you can help me to explain how i can make the webcam for others people who visit my blog to be able to see me live online, for example, just like going online live broadcast for other to chat with me.

1 Like

What we have right now is a simple solution for displaying the webcam image to yourself. There are no images being transferred across the network to other people. Doing that involves a series of steps such as configuring your web server, establishing a media stream, and so on. This article can help you get started: https://www.html5rocks.com/en/tutorials/webrtc/basics/

:slight_smile:

Thanks, i am a 100% percent times understood, i will start learning from the site you suggested above, i appreciate your time.

how can i work in web server ? pls help me
the camera run locally but in web server it can’t run the camera.

Hi, I am trying to create a simple video display by following this tutorial. I am using Firefox 57.0 with a Tomcat 7 on localhost. I think the javascript has worked since I got the pop up asking for camera permission. However, after selecting allow, only my webcam is turned on (the lamp lights up) but the video element stays gray and does not show input from the webcam. Would anyone help to point out what’s wrong with that? Thanks

Does your Console when you bring up the developer tools show any errors or warnings? Does the same behavior happen in Chrome as well?

Hi Kirupa,

I typed in the code for the webcam in HTML5 as specified but I only get the gray screen and my javascript file has errors even though I typed in in correctly. Do you have any suggestions?

Thanks,
Dylan

What errors are you seeing? Do you have a link to your document?

Thanks,
Kirupa

dude… why i c my camera on but nothing out front the border and
file:///C:/xampp/htdocs/webcam/webcamContainer.html

Replied to here: webcam connection problem

Hello,

Is there any way to make this function in Safari as well?

1 Like