Accessing Your Webcam in HTML5

programming
14

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

15

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

16

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

17

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

Thanks,
Kirupa

18

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

19

Replied to here: webcam connection problem

20

Hello,

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

1 Like
21

I think the APi has been changed to: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

The tutorial will be updated in a few moments to support it instead of the now-deprecated navigator.getUserMedia.

Cheers,
Kirupa

1 Like
22

I updated the tutorial to reflect the new getUserMedia API that everyone should be using: https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm

Thanks for bringing this to my attention :slight_smile:

23

How to stop video streaming completely

24

You can’t prevent the code from disabling your webcam. Is that what you are asking?

25

Hi, thanks for the article, however I’m not seeing the webcam in Firefox on Windows 7, just the grey box and the error warning. Works fine in Chrome.

26

What is the error you are seeing in Firefox?

1 Like
27

Hi, my bad! Turns out it wasn’t working because the webcam was still in use in a Chrome browser whilst I was testing in FF!
In the hope of someone else not making the same stupid mistake, the error was ‘NotReadableError: Failed to allocate videosource’

1 Like
28

Haha! That has bitten me so often. The error message could be more helpful in a case like this as well :stuck_out_tongue:

1 Like
29

Hi,
thanks for this. Can you pls advise how to make it work in an android webview? thks.

30

The code should just work. Have you set the appropriate app permissions to allow webcam access via the webview?

1 Like
31

Hello Kirupa,

I wanted to ask you that is there any way to stop the camera, it seems that when i close my video div on stop my camera is still on and browser still shows the recording icon in the tab corner.

32

Sorry for the delay in replying on this. You need to stop each audio/video track individually.

You can get a list of all tracks using: stream.getTracks()

That will be an array of track objects, so you can loop through it and call the stop method on each track object found.

Cheers,
Kirupa

1 Like
33

Hey, thanks for the great tutorial, I like how you broke it down so you understand the sections. Any update on filters and overlays? I just want to add a custom grid to mine. Ideas? Thank you sir.