Webcam shows locally but not remotely

The webcam works on "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.

[
    {
        "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
    }
]

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