# 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:** 19\
**Page:** 6

<div class="post-metadata">

**Author:** ![Matt67](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matt67/32/12872_2.png) [@Matt67](https://forum.kirupa.com/u/Matt67)\
**Post date:** [November 16, 2020, 2:30am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/106 "2020-11-16T02:30:52Z")

</div>

The quicktime app can select a connected IOS device as a Camera. But Chrome (for example) does not see it among the selectable cameras… is there a way to access a connected ios device’s screen like quicktime does for ios screen recording to mac?

---

<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 16, 2020, 11:34pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/107 "2020-11-16T23:34:49Z")

</div>

No, tethered devices showing up is dependent on whether the device registers itself as a camera the browser can detect. One day, maybe 😛

---

<div class="post-metadata">

**Author:** ![Trevor\_Lancaster](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/trevor_lancaster/32/13539_2.png) [@Trevor\_Lancaster](https://forum.kirupa.com/u/Trevor_Lancaster)\
**Post date:** [February 6, 2021, 4:22am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/108 "2021-02-06T04:22:38Z")

</div>

Can I use this to record a video and save it on my server?  
If not what could I use?

---

<div class="post-metadata">

**Author:** ![ctgriffi](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ctgriffi/32/15803_2.png) [@ctgriffi](https://forum.kirupa.com/u/ctgriffi)\
**Post date:** [October 27, 2021, 6:03pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/109 "2021-10-27T18:03:55Z")

</div>

Just noting here that I (foolishly, perhaps) tried to customize the initial code example by using jQuery, only to have it fail over and over and over. For some reason, you cannot simply select the video element like you normally would in jQuery, even if you try to grab it by ID.

**Won’t Work:** $("#videoElement");

**WILL Work:** $("#videoElement")[0];

---

<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:** [October 27, 2021, 6:58pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/110 "2021-10-27T18:58:01Z")

</div>

That is so bizarre! When you `console.log` the first example, what element is printed to the screen

---

<div class="post-metadata">

**Author:** ![ctgriffi](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ctgriffi/32/15803_2.png) [@ctgriffi](https://forum.kirupa.com/u/ctgriffi)\
**Post date:** [October 27, 2021, 8:19pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/111 "2021-10-27T20:19:12Z")

</div>

If I _don’t_ use the array notation [0] and then console.log the result, no video shows in the browser (no errors, either), and Chrome displays this in the console:

![Screen Shot 2021-10-27 at 3.14.48 PM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/optimized/2X/d/d44b0047b9af961718bc61e2beb2e0d54eb7efe0_2_690x62.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:** [October 28, 2021, 3:41am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/112 "2021-10-28T03:41:32Z")

</div>

Yeah! Based on your console output, the actual element itself is referenced by the `0`. That’s so strange but glad you were able to make it work.

---

<div class="post-metadata">

**Author:** ![Suprabhat\_Mohapatra](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/suprabhat_mohapatra/32/16308_2.png) [@Suprabhat\_Mohapatra](https://forum.kirupa.com/u/Suprabhat_Mohapatra)\
**Post date:** [December 20, 2021, 12:55pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/113 "2021-12-20T12:55:50Z")

</div>

Hi. I am using angularjs to build a web application.  
I will be accessing the webcam through an IP and port over the lan to video stream and take picture.  
I am able to do it through the laptop webcam but stuck up in accessing the webcam through IP and port.  
Can you pls guide me how to achive this?

---

<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:** [December 20, 2021, 5:34pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/114 "2021-12-20T17:34:58Z")

</div>

Are you able to access the webcam via the IP to see the picture?

For example, see if you can do something like the following:

```auto
<img id="mywebcam" border="0" width="1920" height="1080" src="http://192.168.1.1:8080/video">

```

---

<div class="post-metadata">

**Author:** ![Suprabhat\_Mohapatra](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/suprabhat_mohapatra/32/16308_2.png) [@Suprabhat\_Mohapatra](https://forum.kirupa.com/u/Suprabhat_Mohapatra)\
**Post date:** [December 21, 2021, 5:27am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/115 "2021-12-21T05:27:58Z")

</div>

Hey…sorry to bother you.

I could get it done. Thanks.

But, I have the need to access the webcam in the network through IP and port.

Can it be done?

---

<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:** [December 21, 2021, 6:21am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/116 "2021-12-21T06:21:51Z")

</div>

That’s my question to you - do you have an IP address that gets you access to the webcam? If the answer is “Yes”, then the HTML/CSS/JS side is doable. If the answer is no, then you’ll need to have an intermediary solution to get you that information.

---

<div class="post-metadata">

**Author:** ![Suprabhat\_Mohapatra](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/suprabhat_mohapatra/32/16308_2.png) [@Suprabhat\_Mohapatra](https://forum.kirupa.com/u/Suprabhat_Mohapatra)\
**Post date:** [December 21, 2021, 6:50am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/117 "2021-12-21T06:50:22Z")

</div>

My answer to your question is yes. I have access an IP address to access the webcam which is in the LAN. I am developing a weighbridge system where the user will be sitting in the control room and the camera is setup in the weighbridge console. The user will instruct the driver to move the truck back and forth to get the right image of the container, the vehicle number and take picture to be recorded throug a UI. Let me know how that can be possible please.  
TiA

---

<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:** [December 21, 2021, 5:05pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/118 "2021-12-21T17:05:33Z")

</div>

When you paste the IP address in your browser’s address bar, do you see an image?

---

<div class="post-metadata">

**Author:** ![markemark](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/markemark/32/18183_2.png) [@markemark](https://forum.kirupa.com/u/markemark)\
**Post date:** [July 7, 2022, 10:00am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/119 "2022-07-07T10:00:37Z")

</div>

Kirupa - this was a lifesaver when testing HTML output for my webcam -  
There is also a great test page for all Input / Output Audio / video devices in the WebRTC Samples.

> **[samples/src/content/devices/input-output at gh-pages · webrtc/samples](https://github.com/webrtc/samples/tree/gh-pages/src/content/devices/input-output)**
>
> gh-pages/src/content/devices/input-output

---

<div class="post-metadata">

**Author:** ![System0](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@System0](https://forum.kirupa.com/u/System0)\
**Post date:** [May 10, 2023, 1:17am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/121 "2023-05-10T01:17:30Z")

</div>

What to add in this html code:

```auto
<html data-kantu="1"><script src="chrome-extension://ljdobmomdgdljniojadhoplhkpialdid/page/prompt.js"></script><script src="chrome-extension://ljdobmomdgdljniojadhoplhkpialdid/page/runScript.js"></script><head>
<meta charset="utf-8">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
<style>
    body {
      margin: 30px;
    }

    h1 {
      font-family: sans-serif;
      color: #666;
    }

    #container {
      width: 500px;
      height: 375px;
      border: 10px #333 solid;
    }

    #videoElement {
      width: 500px;
      height: 375px;
      background-color: #666;
    }
    
    button {
      margin-top: 20px;
      font-size: 12px;
      font-weight: bold;
      padding: 5px;
      background-color: white;
      border: 5px solid black;
    }

    button:hover {
      background-color: yellow;
    }

    button:active {
      background-color: yellowgreen;
    }
  </style>
</head>
<body>
<h1>Stop Webcam Stream</h1>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<button id="stop">Stop Video</button>
<script>
    var video = document.querySelector("#videoElement");
    var stopVideo = document.querySelector("#stop");

    if (navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          video.srcObject = stream;
        })
        .catch(function (err0r) {
          console.log("Something went wrong!");
        });
    }

    stopVideo.addEventListener("click", stop, false);

    function stop(e) {
      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;
    }
  </script>

</body></html>

```

to have another button that reactivates the webcam after having stopped it ?  
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:** [May 10, 2023, 2:02am UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/122 "2023-05-10T02:02:04Z")

</div>

Hi @System0 - welcome to the forums! You will need to add another button similar to the Stop Video one:

```auto
<button id="play">Play Video</button>

```

In the event handler for this button, you will have this code:

```auto
    if (navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          video.srcObject = stream;
        })
        .catch(function (err0r) {
          console.log("Something went wrong!");
        });
    }

```

🙂

---

<div class="post-metadata">

**Author:** ![System0](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@System0](https://forum.kirupa.com/u/System0)\
**Post date:** [May 10, 2023, 1:29pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/123 "2023-05-10T13:29:02Z")

</div>

ok .A new button appears.  
but i can only once time reactivate (by button play) the video and **not that several times.**  
I don’t know how to change this code to do that

---

<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 10, 2023, 4:18pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/124 "2023-05-10T16:18:56Z")

</div>

Are you trying to have a Play and Stop button that someone can click multiple times and have the video start/stop accordingly? Do you want the video to play when the page loads?

---

<div class="post-metadata">

**Author:** ![System0](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@System0](https://forum.kirupa.com/u/System0)\
**Post date:** [May 10, 2023, 4:23pm UTC](https://forum.kirupa.com/t/accessing-your-webcam-in-html5/352092/125 "2023-05-10T16:23:04Z")

</div>

Are you trying to have a Play and Stop button that someone can click multiple times and have the video start/stop accordingly?  
yes

Do you want the video to play when the page loads?  
a) yes  
b) no

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