# Webcam shows locally but not remotely

**URL:** <https://discourse.nodered.org/t/webcam-shows-locally-but-not-remotely/88160>\
**Category:** General\
**Created:** [22 May 2024 09:19 UTC](https://discourse.nodered.org/t/webcam-shows-locally-but-not-remotely/88160 "2024-05-22T09:19:22Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![PRABHAKAR82](https://avatars.discourse-cdn.com/v4/letter/p/e47c2d/32.png) [@PRABHAKAR82](https://discourse.nodered.org/u/PRABHAKAR82)\
**Post date:** [22 May 2024 09:19 UTC](https://discourse.nodered.org/t/webcam-shows-locally-but-not-remotely/88160/1 "2024-05-22T09:19:22Z")

</div>

The webcam works on "[http://127.0.0.1:4444/cam](http://127.0.0.1:4444/cam)" or a. localhost, but when I open node red through the static IP 103.113.137.\*\*:4444/cam, it is not showing the video. Please see the flow of how I added webcams for your reference.

```auto
[
    {
        "id": "15f0a7f791811508",
        "type": "tab",
        "label": "websocket stream",
        "disabled": false,
        "info": ""
    },
    {
        "id": "ee7da2697ba7cb88",
        "type": "http in",
        "z": "15f0a7f791811508",
        "name": "",
        "url": "/cam",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 180,
        "y": 120,
        "wires": [
            [
                "7c4522b07cd765eb"
            ]
        ]
    },
    {
        "id": "f0857b12ca86746a",
        "type": "http response",
        "z": "15f0a7f791811508",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 510,
        "y": 120,
        "wires": []
    },
    {
        "id": "7c4522b07cd765eb",
        "type": "template",
        "z": "15f0a7f791811508",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "html",
        "syntax": "plain",
        "template": "<html>\n<head>\n <title>Streamer</title>\n</head>\n<body>\n <video autoplay></video>\n <script>\n // get video dom element\n const server = window.location.hostname;\n const video = document.querySelector('video');\n \n // request access to webcam\n navigator.mediaDevices.getUserMedia({video: {width: 360, height: 240}}).then((stream) => video.srcObject = stream);\n \n // returns a frame encoded in base64\n const getFrame = () => {\n const canvas = document.createElement('canvas');\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n canvas.getContext('2d').drawImage(video, 0, 0);\n const data = canvas.toDataURL('image/png');\n return data;\n }\n\n const WS_URL = `http://103.113.137.17:4444/cam`;\n console.log(WS_URL);\n const FPS = 10;\n const ws = new WebSocket(WS_URL);\n ws.onopen = () => {\n console.log(`Connected to ${WS_URL}`);\n setInterval(() => {\n ws.send(getFrame());\n }, 1000 / FPS);\n }\n </script>\n</body>\n</html>",
        "output": "str",
        "x": 340,
        "y": 120,
        "wires": [
            [
                "f0857b12ca86746a"
            ]
        ]
    },
    {
        "id": "99245f58096fd42e",
        "type": "ui_webcam",
        "z": "15f0a7f791811508",
        "name": "",
        "group": "b61e05d043063d28",
        "order": 1,
        "width": "8",
        "height": "8",
        "countdown": false,
        "autoStart": false,
        "hideCaptureButton": false,
        "showImage": "2",
        "mirror": true,
        "format": "png",
        "x": 340,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "b61e05d043063d28",
        "type": "ui_group",
        "name": "Default",
        "tab": "88fe39f8.280828",
        "order": 1,
        "disp": true,
        "width": 8,
        "collapse": false,
        "className": ""
    },
    {
        "id": "88fe39f8.280828",
        "type": "ui_tab",
        "name": "Cameras",
        "icon": "dashboard",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]

```

 ![webcam1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b2bb905a224622a902c98c89fa868d652e806e5a.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [20 August 2024 09:19 UTC](https://discourse.nodered.org/t/webcam-shows-locally-but-not-remotely/88160/2 "2024-08-20T09:19:40Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.