Accessing Your Webcam in HTML5

programming
64

Then that sounds like a configuration issue with your webcam and your operating system or browser. It might not be related to any code that you have :frowning:

65

Oh okay.Iā€™ll check.By the way thanks for guiding me and all your blogs are super cool to read and understand.

1 Like
67

is the code available for asp.net mvc?

68

The code is just regular JavaScript, so you should be able to use it in your asp.net MVC app.

69

is the flash player required? im sorry, im still learning asp.net

70

No, no Flash player required :stuck_out_tongue: Itā€™s all standards-based JavaScript. Good luck learning ASP.net. Itā€™s one of the first big non-Flash items I learned many years ago, and it was a lot of fun. Itā€™s also one of the first big items I fully forgot as well over the years haha.

71

can it capture and store it to database?

72

Yes, you can do that. You can save the imagedata from the webcam as a stream of encoded text and store it in any database. Some databases are more sophisticated and will allow you to store the image as an image directly.

73

what code am i going to use to make the webcam capture?

74

Thanks for the great code!
Iā€™ve installed a little demo on my site at: https://littlekaboose.com/zumba/videodemo.html
It works great in Firefox and Edge. But in Chrome I get an exception:
navigator.mediaDevices.getUserMedia error: DOMException: Permission denied
When I view your demo in Chrome, it works fine as well. So itā€™s likely not Chrome itself.
I donā€™t see any prompts in Chrome for accessing a webcam on my site. Iā€™ve checked the Site Settings so make sure I didnā€™t already block it.
Any ideaā€™s what iā€™m missing?

75

Are you on a Mac device?

76

It actually worked great on a Mac running safari.
Windows 7 and Windows 10 both work except for Chrome.

77

That is really bizarre! I will check tonight on a Parallels instance and see why this isnā€™t working properly on Windows. It is even more strange that the simpler example on the site does work.

78

Iā€™m stumped. It doesnā€™t work in Chrome in both Windows 10 and macOS Catalina :frowning:

79

Iā€™m glad Iā€™m not crazy.
Iā€™ve been reading about the Feature-Policy http header. Maybe I can configure my server to pass that back. Iā€™ll give it a try.

80

That was it!
I use IIS. The Feature-Policy header was already present, with a value of ā€˜noneā€™.
I changed it to ā€˜selfā€™ and it now works with Chrome!
Thanks again for your great write-up and quick response.

image
image711Ɨ199 16.3 KB

1 Like
81

I have never heard about the feature-policy header! Glad you got it sorted out :stuck_out_tongue:

82

Hi Kirupa,

I tried this(https://www.kirupa.com/snippets/examples/stop_webcam_stream.htm) and implemented a start button as well so that I can toggle between on and off, but every time I click on start it asks for permission of camera.

I placed the entire if block inside my function for start.

Is there any way that can be bypassed and permission be asked only once.

Best Regards,
Rishabh Jain

83

Do you have a link to your example? Iā€™d like to see the code and better understand what is going on :slight_smile:

85

function start(){
console.log(ā€œstartā€);
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (err0r) {
console.log(ā€œSomething went wrong!ā€);
}); } }
function stop() {

		console.log("stop");
				  var stream = video.srcObject;
				  var tracks = stream.getTracks();
				  for (var i = 0; i < tracks.length; i++) {
														    var track = tracks[i];
														    track.stop();
														  }
				  video.srcObject = null;
				}

These are the two functions in my script and they are called in click of two individual buttons.