Flickering with template node

Hello,

i managed to get a live video on my dashboard. I needed 3 Webcams but for developing i only took 1 Webcam and used that stream for every live feed.

Thats my Flow:

[
    {
        "id": "1fbc15c7.2103aa",
        "type": "multipart-decoder",
        "z": "923d648e.9f25f8",
        "name": "",
        "ret": "bin",
        "url": "",
        "tls": "",
        "delay": 0,
        "maximum": 1000000,
        "blockSize": 1,
        "x": 670,
        "y": 1000,
        "wires": [
            [
                "520cf9d5.73731"
            ]
        ]
    },
    {
        "id": "520cf9d5.73731",
        "type": "base64",
        "z": "923d648e.9f25f8",
        "name": "Encode",
        "action": "",
        "property": "payload",
        "x": 840,
        "y": 1000,
        "wires": [
            [
                "f068787d.c7cf8",
                "da748d67.ce2368"
            ]
        ]
    },
    {
        "id": "16edab19.b7fa65",
        "type": "inject",
        "z": "923d648e.9f25f8",
        "name": "Start",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payloadType": "date",
        "x": 190,
        "y": 1080,
        "wires": [
            [
                "c7a19871.e14f08",
                "d039651b.046ac8"
            ]
        ]
    },
    {
        "id": "c7a19871.e14f08",
        "type": "change",
        "z": "923d648e.9f25f8",
        "name": "Video Stream URL CAM 1",
        "rules": [
            {
                "t": "set",
                "p": "url",
                "pt": "msg",
                "to": "",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 410,
        "y": 1000,
        "wires": [
            [
                "1fbc15c7.2103aa"
            ]
        ]
    },
    {
        "id": "7300bc02.a65fcc",
        "type": "inject",
        "z": "923d648e.9f25f8",
        "name": "Stop stream",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": "",
        "topic": "",
        "payload": "true",
        "payloadType": "bool",
        "x": 170,
        "y": 900,
        "wires": [
            [
                "629ed216.6d065c"
            ]
        ]
    },
    {
        "id": "629ed216.6d065c",
        "type": "change",
        "z": "923d648e.9f25f8",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "stop",
                "pt": "msg",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 380,
        "y": 960,
        "wires": [
            [
                "1fbc15c7.2103aa",
                "d82d1806.57746"
            ]
        ]
    },
    {
        "id": "f068787d.c7cf8",
        "type": "change",
        "z": "923d648e.9f25f8",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "camwert1value",
                "pt": "msg",
                "to": "camwert1value",
                "tot": "global"
            },
            {
                "t": "set",
                "p": "camwert1name",
                "pt": "msg",
                "to": "camwert1name",
                "tot": "global"
            },
            {
                "t": "set",
                "p": "camwert2value",
                "pt": "msg",
                "to": "camwert2value",
                "tot": "global"
            },
            {
                "t": "set",
                "p": "camwert2name",
                "pt": "msg",
                "to": "camwert2name",
                "tot": "global"
            },
            {
                "t": "set",
                "p": "camwert3value",
                "pt": "msg",
                "to": "camwert3value",
                "tot": "global"
            },
            {
                "t": "set",
                "p": "camwert3name",
                "pt": "msg",
                "to": "camwert3name",
                "tot": "global"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1020,
        "y": 960,
        "wires": [
            [
                "84ec0d28.8b9ce"
            ]
        ]
    },
    {
        "id": "84ec0d28.8b9ce",
        "type": "ui_template",
        "z": "923d648e.9f25f8",
        "group": "86c1f4.2404261",
        "name": "Camera View 4 Cams",
        "order": 3,
        "width": "32",
        "height": "16",
        "format": "<!DOCTYPE html>\n<html>\n<style>\n    .img {\n        border: 1px solid #000;\n        border-radius:  2px;\n        padding:        1px;\n        height:         370px;\n        width:          845px;\n    }\n</style>\n\n\n\n\n\n\n\n<table class=\"table\">\n  <thead>\n    <tr>\n        <td style=\"text-align: left width: 100%\"><img src=\"data:image/jpg;base64,{{msg.cam1}}\" class=img /></td>\n        <td style=\"text-align: right width: 100%\"><img src=\"data:image/jpg;base64,{{msg.cam2}}\" class=img /></td>\n    </tr>\n    <tr>\n        <td style=\"text-align: left width: 100%\"><img src=\"data:image/jpg;base64,{{msg.cam1}}\" class=img /></td>\n        <td>\n            <font size=\"22\" face=\"Courier New\" >\n            <table style=\"margin-left:auto;margin-right:auto;\">\n                <tr>\n                <td style=\"text-align: right\">{{msg.camwert1name}} :</td>   \n                <td style=\"text-align: right\"> {{msg.camwert1value}}</td>\n                </tr>\n                <tr>\n                <td style=\"text-align: right\">{{msg.camwert2name}} :</td>   \n                <td style=\"text-align: right\"> {{msg.camwert2value}}</td>  \n                </tr>\n                <tr>\n                <td style=\"text-align: right\">{{msg.camwert3name}} :</td>   \n                <td style=\"text-align: right\"> {{msg.camwert3value}}</td>  \n                </tr>\n            </table>\n        </td> \n        \n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n\n    </tr>\n  </tbody>\n</table>\n\n\n</html>\n",
        "storeOutMessages": true,
        "fwdInMessages": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 1340,
        "y": 1040,
        "wires": [
            []
        ]
    },
    {
        "id": "4ee544c9.0d2a9c",
        "type": "ui_button",
        "z": "923d648e.9f25f8",
        "name": "",
        "group": "86c1f4.2404261",
        "order": 4,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "Kameras einschalten",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "",
        "x": 140,
        "y": 1020,
        "wires": [
            [
                "c7a19871.e14f08",
                "d039651b.046ac8"
            ]
        ]
    },
    {
        "id": "b483df86.7ad52",
        "type": "ui_button",
        "z": "923d648e.9f25f8",
        "name": "",
        "group": "86c1f4.2404261",
        "order": 5,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "Kameras ausschalten",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "",
        "x": 140,
        "y": 960,
        "wires": [
            [
                "629ed216.6d065c"
            ]
        ]
    },
    {
        "id": "d039651b.046ac8",
        "type": "change",
        "z": "923d648e.9f25f8",
        "name": "Video Stream URL CAM 2",
        "rules": [
            {
                "t": "set",
                "p": "url",
                "pt": "msg",
                "to": "",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 410,
        "y": 1060,
        "wires": [
            [
                "d82d1806.57746"
            ]
        ]
    },
    {
        "id": "d82d1806.57746",
        "type": "multipart-decoder",
        "z": "923d648e.9f25f8",
        "name": "",
        "ret": "bin",
        "url": "",
        "tls": "",
        "delay": 0,
        "maximum": 1000000,
        "blockSize": 1,
        "x": 670,
        "y": 1060,
        "wires": [
            [
                "913c0569.4fbd1"
            ]
        ]
    },
    {
        "id": "913c0569.4fbd1",
        "type": "base64",
        "z": "923d648e.9f25f8",
        "name": "Encode",
        "action": "",
        "property": "payload",
        "x": 840,
        "y": 1060,
        "wires": [
            [
                "b9a090fe.bb306"
            ]
        ]
    },
    {
        "id": "b9a090fe.bb306",
        "type": "change",
        "z": "923d648e.9f25f8",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "cam2",
                "pt": "msg",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1020,
        "y": 1060,
        "wires": [
            [
                "84ec0d28.8b9ce"
            ]
        ]
    },
    {
        "id": "da748d67.ce2368",
        "type": "change",
        "z": "923d648e.9f25f8",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "cam1",
                "pt": "msg",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1020,
        "y": 1000,
        "wires": [
            [
                "84ec0d28.8b9ce"
            ]
        ]
    },
    {
        "id": "86c1f4.2404261",
        "type": "ui_group",
        "z": "",
        "name": "MAIN",
        "tab": "ad16072d.d79b78",
        "order": 1,
        "disp": false,
        "width": "32",
        "collapse": false
    },
    {
        "id": "ad16072d.d79b78",
        "type": "ui_tab",
        "z": "",
        "name": "W17 KameraĂĽbersicht",
        "icon": "dashboard",
        "order": 28,
        "disabled": false,
        "hidden": false
    }
]

As everything was fine i put the second Webcam on and now my 2 Inputs brings the Dashboard view to flickering.

Is there a way to put all the streams in one message to prevent the flickering without loosing the frequenzy of the messages ?

Dearly
chorum

What is the end goal here, multiple video displays on a single screen? Easily done with multiple templates, one per cam, each with own card in same group or even all on same card in group (you just have to arrange them using the dashboard group layout). No flickering :slight_smile:

Or skip the dashboard and create a html file for showing them directly. Here I have 4 live video streams on one monitor.

<html>
<head>
<meta http-equiv="refresh" content="900">
<title>Door1and2</title>
</head>
<body bgcolor="#000000" style="overflow: hidden">
<center>
<br>
<img src="http://10.0.0.202:50019/" width="49%" height="49%" alt="" title="">
<img src="http://10.0.0.202:50020/" width="49%" height="49%" alt="" title="">
<br>
<br>
<img src="http://10.0.0.204:50003/" width="49%" height="49%" alt="" title="">
<img src="http://10.0.0.204:50005/" width="49%" height="49%" alt="" title="">
<br>
</center>
</a>
</body>
</html>

1 Like

you can also do things like zoom into a specific area of a video too. This zooms the image 300% and then scrolls down to the area I need to enlarge.

<html>
<head>
<meta http-equiv="refresh" content="900">
<title>Camera</title>
</head>
<body bgcolor="#000000">

<script>
function Scrolldown() {
     window.scroll(0,500); 
}

window.onload = Scrolldown;
</script>

<img src="http://10.0.0.202:50040/" width="300%" alt="" title=""> -->
</html>
1 Like

Works great for my ESP32CAMs. :+1: I enjoy learning HTML more and more.

Unfortunately Chrome's nanny mode kicks in for my other IP cams... either says "Subresource requests whose URLs contain embedded credentials (e.g. https://user:pass@host/) are blocked", or if I remove the credentials in the URL, unauthorized... Just can't win nowadays :stuck_out_tongue:

That's OK... I use Blue Iris, so the rest of this is just playing around.

Hey, thx for the Ideas!

My fall back solution was 1 cam per template, but i cant max the videodisplay.
i think i will try the html solution.

may be i will be back with questions :slight_smile:
The Zoom could be really helpfull !

Mhmm strange..
i get 2 Foscam D2EP on the html page but the Foscam G2EP wont show up...
I get all of them with an template node...

Yep I hate that! that's why I stream all my stuff myself from the cameras rtsp feed with no auth!
I use node-red for mapping the cameras (node-red-contrib-web-worldmap (node) - Node-RED) but when you have 150 cameras node-red is not up to the task of managing the streams :slight_smile: Viewing sure, creating a user interface to view the videos again no problem.

I really like motioneye https://github.com/ccrisan/motioneye/wiki/Screenshots
I have 144TB on each of my 3 servers with about 11 months of 1440x1080 videos and all the other NVR's out there recorded the videos for each camera into a single folder. This was a headache when trying to load a video from a high traffic camera with 300,000 20second *.mp4 clips. And or the NVR had a database for file access.

Motion eye let me config how I save files IE: /motioneye/RAID10sdb1/cameras/GLB-FirstFloor12/2021-year/03-month/22-day/01-hour so i can access only a folder with videos by the hour.

Using worldmap

Using Dashboard to review videos stored on server

Best thing about using this method is you can scale. I also have 3 extra AMD 4800u CPU intel nuc knock offs crunching camera streams and mounted to the servers NFS folders to save videos. Server can handle 36 cameras each and the amd 4800u's can handle 24 cameras each.

I love making custom NVR stuff but if your only looking at managing under 20 cameras there are better ways to do it. This is just extreme case. Customer wanted 1 year of video on hand in high def. So I got to really have fun with this one.

2 Likes

I am using the credentials like on the other to cams but no stream per html. on dashboard everything is working fine.. but on html i get a better position for everything. and i would like to turn the picture of the cam for x degrees. is something like that possible ?

You can!

try this:

<img src="http://10.0.0.202:50019/" style="transform:rotate(90deg);width="33%" height="33%" alt="" title="">

your going to need to learn some more html skills if your going to have oblong sizes but this should point you in the right direction.

thx! yes i need to learn more about style options for the videostream.

any idea why i can get the video of 1 specific camera on a dashboard per template node but not with a html endpoint?(Foscam G2EP)

The other two cams work on both methods. (Foscam D2EP)

I cant report the Support because with template node the G2EP is working...

I fixed all my problems, but i have something new.

i would like to use the version with the html endpoint. the videostreams are live , thats fine.
but i would like to show values from my dashboard on the html page.
i have them in globals but they dont update on the html page.
is there a way to get them updated without any interference with the video stream ?

That is because your raw HTML page is a totally different entity from Node-Red and it's Dashboard.

I suspect you would need to use some form of output node on the NR side (MQTT, TCP, Websocket, saved file, etc)... and then design your raw HTML page to pick up said output in a compatible way.

There is a reason for using the Node-Red Dashboard :slight_smile:

yeap i see :slight_smile:

may be there is an other solution ?

My goal is a screensized window with 4 quarters. 3 of them contain the videostreams and the 4th some values.

i cant get the template nodes to be shown without spaces between them, here a pic:

i tried:

<script>
sizes.cx = 1;
sizes.cy = 1;
sizes.gx = 1;
sizes.gy = 1;
</script>

but i cant get the way i want. i have no experience in css...

i catch my videostream in a table, because i am a html noob :slight_smile:

<!DOCTYPE html>
<html>
<style>
    .imgb {

        height:         450px;
        width:          750px;
    }
</style>

<center>
    <table>
        <tr>
            <!-- Row 1 -->
            <td style="text-align: right"><img src="data:image/jpg;base64,{{msg.cam2}}" class=imgb /></td>
        </tr>
    </table>
</center>
</html>

The Height and Width setting fit to a 16x10 template node on the dashboard.

is there an other way on a template node to archieve what i want?

You should be able to get waht you want using this css.

[{"id":"13d7292c.a664d7","type":"ui_template","z":"b779de97.b1b46","group":"8b5cde76.edd58","name":"","order":9,"width":0,"height":0,"format":"<style>\n.container {\n    position: relative;\n    height: auto;\n    width: 100%;\n}\n.fit {\n    height: auto;\n    width: 50%;\n    float: left;\n    position: relative;\n}\n</style>\n<div class=\"container\">\n<img class=\"fit\" src=\"https://i0.wp.com/dpi.gov.gy/wp-content/uploads/2019/06/pictures-for-profile-200x200-2.png?fit=200%2C200&ssl=1\">\n<img class=\"fit\" src=\"https://i0.wp.com/dpi.gov.gy/wp-content/uploads/2019/06/pictures-for-profile-200x200-2.png?fit=200%2C200&ssl=1\">\n<img class=\"fit\" src=\"https://i0.wp.com/dpi.gov.gy/wp-content/uploads/2019/06/pictures-for-profile-200x200-2.png?fit=200%2C200&ssl=1\">\n<img class=\"fit\" src=\"https://i0.wp.com/dpi.gov.gy/wp-content/uploads/2019/06/pictures-for-profile-200x200-2.png?fit=200%2C200&ssl=1\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":320,"y":2640,"wires":[[]]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
<style>
.container {
    position: relative;
    height: auto;
    width: 100%;
}
.fit {
    height: auto;
    width: 50%;
    float: left;
    position: relative;
}
</style>
<div class="container">
<img class="fit" src="https://i0.wp.com/dpi.gov.gy/wp-content/uploads/2019/06/pictures-for-profile-200x200-2.png?fit=200%2C200&ssl=1">
<img class="fit" src="https://i0.wp.com/dpi.gov.gy/wp-content/uploads/2019/06/pictures-for-profile-200x200-2.png?fit=200%2C200&ssl=1">
<img class="fit" src="https://i0.wp.com/dpi.gov.gy/wp-content/uploads/2019/06/pictures-for-profile-200x200-2.png?fit=200%2C200&ssl=1">
<img class="fit" src="https://i0.wp.com/dpi.gov.gy/wp-content/uploads/2019/06/pictures-for-profile-200x200-2.png?fit=200%2C200&ssl=1"></div>


you can add padding to margin to if you wish

1 Like

thx!
i will try that on monday and will reply how it works!

Its seems to work fine E1cid :slight_smile:
Thx for the help!
It really looks perfect!
Tomorrow i need to get some values in the lower right quarter.
Then bringing in the zoom and then i am done i think :slight_smile:

Mhmm if i use all the streams in one template node the flickering is back... i have 3 streamsources and that will cause the flickering. i think i have to take 3 template nodes but i would like to position them like in one ...

Ok the Positioning is finished.
I used:

<script>
sizes.sx = 45;
sizes.sy = 45;
sizes.cx = 1;
sizes.cy = 1;
sizes.gx = 1;
sizes.gy = 1;
sizes.px = 1;
sizes.py = 1;
</script>

And now its all good.
Time to try the Zoom :slight_smile: