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

<div class="post-metadata">

**Author:** ![Kitly](https://avatars.discourse-cdn.com/v4/letter/k/85e7bf/32.png) [@Kitly](https://forum.kirupa.com/u/Kitly)\
**Post date:** [April 8, 2019, 2:36am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/42 "2019-04-08T02:36:44Z")

</div>

I’ve gotten this to work as a single html file, but when I then take that file and make it as the target of another file’s frameset, it doesn’t work even though loading the frameset page causes my computer to ask for permission to access my camera. If I right click and choose to view the frame in its own tab, it loads and works.

The idea is to have a split browser screen where you have me in one part, and the text I’m reading in the other part. Having it all in one window is easier than having the video in one window and the text in another and manually arranging it on my screen.  
Any ideas?

---

<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 8, 2019, 5:28am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/43 "2019-04-08T05:28:31Z")

</div>

Is the domain for both the page loading the frame and the content of the frame the same?

---

<div class="post-metadata">

**Author:** ![Kitly](https://avatars.discourse-cdn.com/v4/letter/k/85e7bf/32.png) [@Kitly](https://forum.kirupa.com/u/Kitly)\
**Post date:** [April 8, 2019, 11:32am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/44 "2019-04-08T11:32:22Z")

</div>

Yes. They’re all local files.

Videobox.html is the file that works fine on its own, but not in this context. I just get the grey box. ![frameset%20example|690x405](upload://4dAQvtX9kGjBMNYJftVp7mt5EvB.png)

---

<div class="post-metadata">

**Author:** ![Kitly](https://avatars.discourse-cdn.com/v4/letter/k/85e7bf/32.png) [@Kitly](https://forum.kirupa.com/u/Kitly)\
**Post date:** [April 8, 2019, 11:33am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/45 "2019-04-08T11:33:50Z")

</div>

![frameset%20example](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/1/1d921780c8674ebd28f77ef0e7f2a2f67d68a66f.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 8, 2019, 4:01pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/46 "2019-04-08T16:01:11Z")

</div>

Try uploading them to a HTTPS server and see if this problem is solved. You may be running into some security-related issue, for running some of these APIs like `getUserMedia` from the file system has shown weird behavior.

---

<div class="post-metadata">

**Author:** ![Kitly](https://avatars.discourse-cdn.com/v4/letter/k/85e7bf/32.png) [@Kitly](https://forum.kirupa.com/u/Kitly)\
**Post date:** [April 21, 2019, 6:41pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/47 "2019-04-21T18:41:06Z")

</div>

I didn’t want this to be the way, because I like the idea of being able to use it when not connected to the internet, but putting it on a website and the exact same html/files now works.

Will try to see if I can have the frameset local with the texts, but the actual webcame on the website and see if it still works.

---

<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 22, 2019, 8:59pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/48 "2019-04-22T20:59:35Z")

</div>

You can totally do this without relying on the internet by by running a web server on your local machine. One popular option is **http-server** : [https://www.npmjs.com/package/http-server](https://www.npmjs.com/package/http-server)

Let me know if you need any further guidance on this 🙂

---

<div class="post-metadata">

**Author:** ![Michael\_Christofas](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/michael_christofas/32/9608_2.png) [@Michael\_Christofas](https://forum.kirupa.com/u/Michael_Christofas)\
**Post date:** [April 27, 2019, 1:07pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/49 "2019-04-27T13:07:05Z")

</div>

Great write up! Would there be a way to use an outdoor cams (Hikvision) as the feed instead of a built in webcam? I have a few (3) cams Id like to put on a page and broadcast on the web for local weather conditions for my windsurfing group.

---

<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 30, 2019, 8:38pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/50 "2019-04-30T20:38:38Z")

</div>

That would be more challenging. I don’t think our browser APIs would be able to help you here, for that would require your outdoor cams to stream the visuals to the network via a local web server or something equivalent that you can then access.

---

<div class="post-metadata">

**Author:** ![Keith\_Hill\_Jr](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/keith_hill_jr/32/9738_2.png) [@Keith\_Hill\_Jr](https://forum.kirupa.com/u/Keith_Hill_Jr)\
**Post date:** [July 6, 2019, 3:09pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/51 "2019-07-06T15:09:45Z")

</div>

Can you do group video chat?

---

<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:** [July 6, 2019, 6:16pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/52 "2019-07-06T18:16:53Z")

</div>

Yes, but you will need a centralized server to coordinate all of the streams. It isn’t something you can easily do on the client side on your machine 🙂

---

<div class="post-metadata">

**Author:** ![doubleSnakes](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/doublesnakes/32/9788_2.png) [@doubleSnakes](https://forum.kirupa.com/u/doubleSnakes)\
**Post date:** [July 27, 2019, 8:33am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/53 "2019-07-27T08:33:43Z")

</div>

Hello and thank you for sharing this topic with us.  
I have a question. How can I use another camera instead of laptop camera?  
For instance, I want to use an esp32 cam to be displayed on my Html web page.  
How should I add it to the javascript code or any other parts of it ??  
I appreciate any help in advance.❤❤

---

<div class="post-metadata">

**Author:** ![doubleSnakes](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/doublesnakes/32/9788_2.png) [@doubleSnakes](https://forum.kirupa.com/u/doubleSnakes)\
**Post date:** [July 27, 2019, 8:44am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/54 "2019-07-27T08:44:46Z")

</div>

Have you found anything useful about your question???  
I asked because I’m looking for it.  
Actually I want to use an esp32-cam instead of my laptop…  
🙄🤔

---

<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:** [July 27, 2019, 5:07pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/55 "2019-07-27T17:07:00Z")

</div>

Is the esp32 cam attached to your laptop? Or is it located somewhere else?

---

<div class="post-metadata">

**Author:** ![doubleSnakes](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/doublesnakes/32/9788_2.png) [@doubleSnakes](https://forum.kirupa.com/u/doubleSnakes)\
**Post date:** [July 27, 2019, 6:48pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/56 "2019-07-27T18:48:38Z")

</div>

It is connected via USB.  
But one important thing is that I want to know which part of the javascript code determines to show the camera of the laptop??  
Is that using an IP or it’s a default value of an attribute in video tag ???

---

<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:** [July 27, 2019, 10:10pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/57 "2019-07-27T22:10:59Z")

</div>

It goes by whatever the system thinks is the default, but you do have a way of going through a list of available webcams and choosing the one that you want. You can use `navigator.mediaDevices.enumerateDevices();` as shown [in this example](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices).

---

<div class="post-metadata">

**Author:** ![hamidhasrat](https://avatars.discourse-cdn.com/v4/letter/h/90ced4/32.png) [@hamidhasrat](https://forum.kirupa.com/u/hamidhasrat)\
**Post date:** [October 15, 2019, 11:13am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/60 "2019-10-15T11:13:14Z")

</div>

Hi everyone…  
please anyone paste the code for live video streaming to receive from android app… thorough ip address and port number  
thanks

---

<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 25, 2019, 3:01pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/61 "2019-11-25T15:01:16Z")

</div>

Hi All,  
I’m getting the following error,when i try to run the above code.  
**DOMException: Could not start video source**

---

<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, 6:25am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/62 "2019-11-26T06:25:24Z")

</div>

Does the embedded example in the tutorial work for you?

---

<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:36pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/63 "2019-11-26T15:36:23Z")

</div>

No it doesn’t work, it throws the above error in the console.

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

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