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
}
]
