# Accessing Your Webcam in HTML5

**URL:** <https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092>\
**Category:** programming\
**Created:** [November 23, 2014, 12:06am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092 "2014-11-23T00:06:38Z")\
**Posts on this page:** 20\
**Page:** 4

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 26, 2019, 3:38pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/64 "2019-11-26T15:38:21Z")

</div>

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 ☹

---

<div class="post-metadata">

**Author:** ![sankarasubramanian\_c](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sankarasubramanian_c/32/10449_2.png) [@sankarasubramanian\_c](https://forum.kirupa.com/u/sankarasubramanian_c)\
**Post date:** [November 26, 2019, 3:53pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/65 "2019-11-26T15:53:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lawlawpio](https://avatars.discourse-cdn.com/v4/letter/l/aca169/32.png) [@lawlawpio](https://forum.kirupa.com/u/lawlawpio)\
**Post date:** [January 21, 2020, 3:34am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/67 "2020-01-21T03:34:53Z")

</div>

is the code available for [asp.net](http://asp.net) mvc?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 21, 2020, 6:16am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/68 "2020-01-21T06:16:36Z")

</div>

The code is just regular JavaScript, so you should be able to use it in your [asp.net](http://asp.net) MVC app.

---

<div class="post-metadata">

**Author:** ![lawlawpio](https://avatars.discourse-cdn.com/v4/letter/l/aca169/32.png) [@lawlawpio](https://forum.kirupa.com/u/lawlawpio)\
**Post date:** [January 21, 2020, 6:29am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/69 "2020-01-21T06:29:59Z")

</div>

is the flash player required? im sorry, im still learning [asp.net](http://asp.net)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 21, 2020, 6:32am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/70 "2020-01-21T06:32:33Z")

</div>

No, no Flash player required 😛 It’s all standards-based JavaScript. Good luck learning [ASP.net](http://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.

---

<div class="post-metadata">

**Author:** ![lawlawpio](https://avatars.discourse-cdn.com/v4/letter/l/aca169/32.png) [@lawlawpio](https://forum.kirupa.com/u/lawlawpio)\
**Post date:** [January 21, 2020, 6:42am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/71 "2020-01-21T06:42:01Z")

</div>

can it capture and store it to database?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 22, 2020, 5:03am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/72 "2020-01-22T05:03:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![lawlawpio](https://avatars.discourse-cdn.com/v4/letter/l/aca169/32.png) [@lawlawpio](https://forum.kirupa.com/u/lawlawpio)\
**Post date:** [January 30, 2020, 1:57am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/73 "2020-01-30T01:57:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jason\_Hornor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jason_hornor/32/11382_2.png) [@Jason\_Hornor](https://forum.kirupa.com/u/Jason_Hornor)\
**Post date:** [April 2, 2020, 3:53pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/74 "2020-04-02T15:53:01Z")

</div>

Thanks for the great code!  
I’ve installed a little demo on my site at: [https://littlekaboose.com/zumba/videodemo.html](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?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 2, 2020, 7:51pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/75 "2020-04-02T19:51:31Z")

</div>

Are you on a Mac device?

---

<div class="post-metadata">

**Author:** ![Jason\_Hornor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jason_hornor/32/11382_2.png) [@Jason\_Hornor](https://forum.kirupa.com/u/Jason_Hornor)\
**Post date:** [April 2, 2020, 8:41pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/76 "2020-04-02T20:41:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 2, 2020, 10:17pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/77 "2020-04-02T22:17:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 3, 2020, 5:46am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/78 "2020-04-03T05:46:50Z")

</div>

I’m stumped. It doesn’t work in Chrome in both Windows 10 and macOS Catalina ☹

---

<div class="post-metadata">

**Author:** ![Jason\_Hornor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jason_hornor/32/11382_2.png) [@Jason\_Hornor](https://forum.kirupa.com/u/Jason_Hornor)\
**Post date:** [April 3, 2020, 12:36pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/79 "2020-04-03T12:36:22Z")

</div>

I’m glad I’m not crazy.  
I’ve been reading about the [Feature-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/camera) http header. Maybe I can configure my server to pass that back. I’ll give it a try.

---

<div class="post-metadata">

**Author:** ![Jason\_Hornor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jason_hornor/32/11382_2.png) [@Jason\_Hornor](https://forum.kirupa.com/u/Jason_Hornor)\
**Post date:** [April 3, 2020, 12:44pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/80 "2020-04-03T12:44:56Z")

</div>

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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/6/63434f2dd90d70fd59862934ad613fa4388b61dd.png)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 3, 2020, 5:10pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/81 "2020-04-03T17:10:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Rishabh\_Jain](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/rishabh_jain/32/11431_2.png) [@Rishabh\_Jain](https://forum.kirupa.com/u/Rishabh_Jain)\
**Post date:** [April 9, 2020, 6:50am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/82 "2020-04-09T06:50:52Z")

</div>

Hi Kirupa,

I tried this([https://www.kirupa.com/snippets/examples/stop\_webcam\_stream.htm](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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 11, 2020, 7:19am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/83 "2020-04-11T07:19:31Z")

</div>

Do you have a link to your example? I’d like to see the code and better understand what is going on 🙂

---

<div class="post-metadata">

**Author:** ![Rishabh\_Jain](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/rishabh_jain/32/11431_2.png) [@Rishabh\_Jain](https://forum.kirupa.com/u/Rishabh_Jain)\
**Post date:** [April 11, 2020, 9:42am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/85 "2020-04-11T09:42:14Z")

</div>

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.

[Previous page](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092.md?page=3)

[Next page](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092.md?page=5)
