This is the temporary solution so far:
[{"id":"7344ddf5.f6a864","type":"websocket in","z":"3839fd43.f87d52","name":"","server":"bc740d23.438bf","client":"","x":90,"y":100,"wires":[["4df66a3b.d1f1b4","fd95bc0b.81cef"]]},{"id":"a9d0af1d.1d2b4","type":"ui_template","z":"3839fd43.f87d52","group":"675036dd.603328","name":"ok V3","order":1,"width":"6","height":"6","format":"<img width=\"16\" height=\"16\" alt=\"stream test\" src=\"data:image/png;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":510,"y":100,"wires":[[]]},{"id":"4df66a3b.d1f1b4","type":"function","z":"3839fd43.f87d52","name":"","func":"let s = msg.payload;\nlet index = s.indexOf(\",\");\ns = s.slice(index+1, s.length);\nmsg.payload = s;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":260,"y":100,"wires":[["a9d0af1d.1d2b4","2b48667a.86502a"]]},{"id":"6c61efa8.5c91a","type":"ui_template","z":"3839fd43.f87d52","group":"918d39d6.8bac78","name":"OK img6","order":1,"width":"6","height":"6","format":"<img width=\"16\" height=\"16\" src=\"data:image/png;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":540,"y":160,"wires":[[]]},{"id":"9842b201.8ee41","type":"http in","z":"3839fd43.f87d52","name":"","url":"/wck","method":"get","upload":false,"swaggerDoc":"","x":80,"y":160,"wires":[["95250c51.737dd"]]},{"id":"95250c51.737dd","type":"template","z":"3839fd43.f87d52","name":"","field":"payload","fieldType":"msg","syntax":"mustache","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 video = document.querySelector('video');\n \n // request access to webcam\n navigator.mediaDevices.getUserMedia({video: {width: 320, 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','base64');\n return data;\n }\n //wss://{{req.headers.host}}/ws/chat\n const WS_URL = 'ws://127.0.0.1:1880/wckws';\n const FPS = 20;\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>","x":140,"y":200,"wires":[["77e06af5.97c3f4"]]},{"id":"77e06af5.97c3f4","type":"http response","z":"3839fd43.f87d52","name":"","x":190,"y":240,"wires":[]},{"id":"fd95bc0b.81cef","type":"function","z":"3839fd43.f87d52","name":"","func":"msg.payload = JSON.stringify(msg.payload).length;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":260,"y":40,"wires":[["d8703898.474ac8"]]},{"id":"d8703898.474ac8","type":"ui_text","z":"3839fd43.f87d52","group":"675036dd.603328","order":2,"width":0,"height":0,"name":"","label":"size","format":"{{msg.payload}}","layout":"row-spread","x":500,"y":40,"wires":[]},{"id":"2b48667a.86502a","type":"image viewer","z":"3839fd43.f87d52","name":"","width":160,"data":"payload","dataType":"msg","active":false,"x":370,"y":160,"wires":[[]]},{"id":"bc740d23.438bf","type":"websocket-listener","path":"/wckws","wholemsg":"false"},{"id":"675036dd.603328","type":"ui_group","name":"G1","tab":"602efda.f0af304","order":1,"disp":true,"width":"8","collapse":false},{"id":"918d39d6.8bac78","type":"ui_group","name":"G2","tab":"602efda.f0af304","order":2,"disp":true,"width":"6","collapse":false},{"id":"602efda.f0af304","type":"ui_tab","name":"[ U ]","icon":"dashboard","disabled":false,"hidden":false}]
