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
I enjoy learning HTML more and more.
Viewing sure, creating a user interface to view the videos again no problem.
