Accessing Your Webcam in HTML5


I think the APi has been changed to:

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



I updated the tutorial to reflect the new getUserMedia API that everyone should be using:

Thanks for bringing this to my attention :slight_smile:


How to stop video streaming completely


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


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.


What is the error you are seeing in Firefox?


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’


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


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


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


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.


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.