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

<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 23, 2014, 12:06am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/1 "2014-11-23T00:06:39Z")

</div>

This is a companion discussion topic for the original entry at [http://www.kirupa.com/html5/accessing\_your\_webcam\_in\_html5.htm](http://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm)

---

<div class="post-metadata">

**Author:** ![Shashaa\_Tirupati](https://avatars.discourse-cdn.com/v4/letter/s/c4cdca/32.png) [@Shashaa\_Tirupati](https://forum.kirupa.com/u/Shashaa_Tirupati)\
**Post date:** [July 29, 2015, 11:48am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/2 "2015-07-29T11:48:40Z")

</div>

Found your post to be useful. Taught this to my students today. Thank you.  
Shashaa

---

<div class="post-metadata">

**Author:** ![meridaj](https://avatars.discourse-cdn.com/v4/letter/m/45deac/32.png) [@meridaj](https://forum.kirupa.com/u/meridaj)\
**Post date:** [April 21, 2017, 8:40pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/3 "2017-04-21T20:40:22Z")

</div>

Hi! Thanks for the post. I keep having the gray box whenever I try to use the code. I’m sure I gave the permisson to the browser to use the camera. I used the camera in the post and it’s working good so it doesn’t seem to be a problem with it. What else can it be? Thank you.

---

<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 21, 2017, 11:22pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/4 "2017-04-21T23:22:56Z")

</div>

Are you running it locally or on your web server? If on a web server, do you have HTTPs enabled? 🙂

---

<div class="post-metadata">

**Author:** ![dayrth](https://avatars.discourse-cdn.com/v4/letter/d/76d3ee/32.png) [@dayrth](https://forum.kirupa.com/u/dayrth)\
**Post date:** [May 11, 2017, 1:26pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/5 "2017-05-11T13:26:09Z")

</div>

I’m getting the same grey box running it locally. I can see the camera output in the viewer you have under The Example but not on my local page built with the code above.

P.S. I’m using Chrome. When I load the page it does ask for permission to use the camera.

---

<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:** [May 11, 2017, 11:46pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/6 "2017-05-11T23:46:08Z")

</div>

Does your console in the Chrome Dev Tools show any errors?

---

<div class="post-metadata">

**Author:** ![dayrth](https://avatars.discourse-cdn.com/v4/letter/d/76d3ee/32.png) [@dayrth](https://forum.kirupa.com/u/dayrth)\
**Post date:** [May 16, 2017, 6:46am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/7 "2017-05-16T06:46:08Z")

</div>

Yes:

Not allowed to load local resource: blob:null/0715257d-1c6f-4fdf-92cd-42b0ab3e54b9

---

<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:** [May 16, 2017, 12:19pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/8 "2017-05-16T12:19:55Z")

</div>

> [@dayrth](#):
>
> Not allowed to load local resource: blob:null/0715257d-1c6f-4fdf-92cd-42b0ab3e54b9

You will need to run it via a HTTP server. Accessing it via the file system directly no longer works ☹

---

<div class="post-metadata">

**Author:** ![wannaworkwithu](https://avatars.discourse-cdn.com/v4/letter/w/b9e5f3/32.png) [@wannaworkwithu](https://forum.kirupa.com/u/wannaworkwithu)\
**Post date:** [September 20, 2017, 11:04am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/9 "2017-09-20T11:04:17Z")

</div>

Hi Kirupa, first of all i will like to say, thanks for your free willing to help us learn better on how to work with Webcam in HTML5. I did succeeded to follow your above insructions and i was able to add a webcam to my web browser blog webpage, even though my lack of inadequate knowledge on Webcam HTML5, but still i could because of you brief and profound explanation.  
After i finished with the webcam setup, i was able to browse from my computer and see myself very clearly, but when i tried it on my wife computer i was unable to autoplay or see myself as was on my own browser.  
Can you please help me by explaining further on what i should do to be able to autoplay(open) the webcam sucessfully on any other computer elsewhere? Once more Thanks, is my pleasure to be a member of your forum!

---

<div class="post-metadata">

**Author:** ![wannaworkwithu](https://avatars.discourse-cdn.com/v4/letter/w/b9e5f3/32.png) [@wannaworkwithu](https://forum.kirupa.com/u/wannaworkwithu)\
**Post date:** [September 20, 2017, 12:24pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/10 "2017-09-20T12:24:19Z")

</div>

Sorry Kirupa for complaining earlier in my previous comment, i found the cause, the webcam wasn’t able to play automatically because, i incompletely wrote it on my wife computer browser as, [assignmentboard.blogspot.ru](http://assignmentboard.blogspot.ru), instead of this, [https://assignmentboard.blogspot.ru](https://assignmentboard.blogspot.ru) which is the derect link to the webpage server.  
I will also be very grateful, if you can help me to explain how i can make the webcam for others people who visit my blog to be able to see me live online, for example, just like going online live broadcast for other to chat with me.

---

<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:** [September 20, 2017, 4:49pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/11 "2017-09-20T16:49:39Z")

</div>

What we have right now is a simple solution for displaying the webcam image to yourself. There are no images being transferred across the network to other people. Doing that involves a series of steps such as configuring your web server, establishing a media stream, and so on. This article can help you get started: [https://www.html5rocks.com/en/tutorials/webrtc/basics/](https://www.html5rocks.com/en/tutorials/webrtc/basics/)

🙂

---

<div class="post-metadata">

**Author:** ![wannaworkwithu](https://avatars.discourse-cdn.com/v4/letter/w/b9e5f3/32.png) [@wannaworkwithu](https://forum.kirupa.com/u/wannaworkwithu)\
**Post date:** [September 20, 2017, 5:39pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/12 "2017-09-20T17:39:16Z")

</div>

Thanks, i am a 100% percent times understood, i will start learning from the site you suggested above, i appreciate your time.

---

<div class="post-metadata">

**Author:** ![ricky10](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@ricky10](https://forum.kirupa.com/u/ricky10)\
**Post date:** [October 10, 2017, 6:57am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/13 "2017-10-10T06:57:00Z")

</div>

how can i work in web server ? pls help me  
the camera run locally but in web server it can’t run the camera.

---

<div class="post-metadata">

**Author:** ![rv96](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/rv96/32/8821_2.png) [@rv96](https://forum.kirupa.com/u/rv96)\
**Post date:** [November 24, 2017, 10:44am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/14 "2017-11-24T10:44:05Z")

</div>

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

---

<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 24, 2017, 9:06pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/15 "2017-11-24T21:06:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dwoods](https://avatars.discourse-cdn.com/v4/letter/d/cab0a1/32.png) [@dwoods](https://forum.kirupa.com/u/dwoods)\
**Post date:** [February 7, 2018, 1:46am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/16 "2018-02-07T01:46:09Z")

</div>

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

---

<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:** [February 7, 2018, 2:05am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/17 "2018-02-07T02:05:18Z")

</div>

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

Thanks,  
Kirupa

---

<div class="post-metadata">

**Author:** ![hao](https://avatars.discourse-cdn.com/v4/letter/h/ea5d25/32.png) [@hao](https://forum.kirupa.com/u/hao)\
**Post date:** [May 3, 2018, 4:35am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/18 "2018-05-03T04:35:59Z")

</div>

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

---

<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:** [May 3, 2018, 10:45am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/19 "2018-05-03T10:45:27Z")

</div>

Replied to here: [webcam connection problem](http://forum.kirupa.com/t/webcam-connection-problem/638170/4)

---

<div class="post-metadata">

**Author:** ![Brandinavian](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/brandinavian/32/9173_2.png) [@Brandinavian](https://forum.kirupa.com/u/Brandinavian)\
**Post date:** [June 16, 2018, 10:54am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/20 "2018-06-16T10:54:23Z")

</div>

Hello,

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

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