Accessing Your Webcam in HTML5


#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


#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?


#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’


#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:


#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?


#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