Ip Kamera einbinden

[juergen2908]

Hallo,

ich habe jetzt schon einiges gegugelt nur finde ich nichts was bei mir funktioiert.

Und zwar habe ich Unifi Kameras und ich möchte einfach im DashUi die Kamera Bilder anzeigen und alle 1 bis 2 Sekunden zu aktualisieren.

bin jetzt schon ein bisschen weiter gekommen aber leider aktuallisiert sich das Bild nicht.
Da ich in Javascript nicht so versiert bin tu ich mir noch ein bisschen schwer.

[{"id":"e8ae4466.a66f98","type":"ui_template","z":"f11a8ae6.e1d818","group":"7911ca7c.8a5df4","name":"Kamera Apartment hinten","order":0,"width":"6","height":"4","format":"<script language=\"javascript\">\n<!--\n\n\nfunction update3()\n{\n var imgObj;\n\timgObj = document.getElementById('apartment_img');\n\timgObj.src = \"/camera/apartment?\" + (new Date()).getTime();;\n}\n\n\nsetInterval(update3,500);\n\n\n//startonload();\n\n//-->\n</script>\n\n\n<img src=\"http://192.168.xxx.xxx:7080/api/2.0/snapshot/camera/xxxxxxxxxxxxxx?force=true&apiKey=xxxxxxxxxxxxxxxxxxxxxxxxxxx\">","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":270,"y":80,"wires":[[]]},{"id":"7911ca7c.8a5df4","type":"ui_group","z":"","name":"Ueberwachung","tab":"bc94d364.f47e4","order":2,"disp":false,"width":"6","collapse":false},{"id":"bc94d364.f47e4","type":"ui_tab","z":"","name":"Ueberwachung","icon":"dashboard","order":10}]

Vlt. könntest du mir da weiterhelfen?

[Sineos]

Da ich an sowas ähnlichem dran bin:
[{"id":"c6754549.347f68","type":"http request","z":"7fe54cbf.cae6f4","name":"","method":"GET","ret":"bin","url":"http://192.168.178.26/api/camera/snapshot?width=640&height=480","tls":"","x":450,"y":1380,"wires":[["5f78329e.cd691c"]]},{"id":"437fc727.cdf9","type":"inject","z":"7fe54cbf.cae6f4","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":true,"onceDelay":0.1,"x":250,"y":1380,"wires":[["c6754549.347f68","d6c27a92.f5bf9"]]},{"id":"d6c27a92.f5bf9","type":"function","z":"7fe54cbf.cae6f4","name":"update url with timestamp","func":"msg.payload = \"http://192.168.178.26/api/camera/snapshot?width=640&height=480\";\nmsg.payload += \"&ts=\"+Date.now();\nreturn msg;","outputs":1,"noerr":0,"x":490,"y":1460,"wires":[["6462c90a.d9c05"]]},{"id":"dd96885d.deea8","type":"ui_template","z":"7fe54cbf.cae6f4","group":"1e7ba558.772a6b","name":"Test 1","order":0,"width":"6","height":"6","format":"<img ng-src=\"{{msg.payload}}\"/>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":870,"y":1380,"wires":[[]]},{"id":"5f78329e.cd691c","type":"function","z":"7fe54cbf.cae6f4","name":"jpg encode buffer","func":"var getImageResult = msg.payload;\nvar b64encoded = getImageResult.toString('base64');\nmsg.payload = \"data:image/jpg;base64,\" + b64encoded;\nreturn msg;","outputs":1,"noerr":0,"x":680,"y":1380,"wires":[["dd96885d.deea8","58e2d2d1.0e3c24"]]},{"id":"6462c90a.d9c05","type":"ui_template","z":"7fe54cbf.cae6f4","group":"a220643f.3ad73","name":"Test 3","order":0,"width":"6","height":"6","format":"\n<img ng-src={{msg.payload}} height=\"42\" width=\"42\" />","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":870,"y":1460,"wires":[[]]},{"id":"58e2d2d1.0e3c24","type":"ui_template","z":"7fe54cbf.cae6f4","group":"9944e55d.cbab48","name":"Test 2","order":0,"width":"6","height":"6","format":"<script>\n(function(scope) {\n scope.$watch('msg.payload', function(data) {\n imageObj.src=data;\n });\n}(scope));\n\nvar canvas = document.getElementById('myCanvas');\nvar context = canvas.getContext('2d');\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\nconsole.log(Home_Test2_cards.Width);\nvar imageObj = new Image();\nimageObj.onload= function() {\n var wRatio = canvas.width / imageObj.width;\n var hRatio = canvas.height / imageObj.height;\n var ratio = Math.min(wRatio, hRatio);\n context.drawImage(imageObj, 0, 0, canvas.width, canvas.height, 0, 0, (imageObj.width*ratio), (imageObj.height*ratio));\n};\n</script> \n\n<canvas id=\"myCanvas\"></canvas>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":870,"y":1420,"wires":[[]]},{"id":"1e7ba558.772a6b","type":"ui_group","z":"","name":"Test1","tab":"ea722d0f.98c548","disp":true,"width":"6","collapse":false},{"id":"a220643f.3ad73","type":"ui_group","z":"","name":"Test3","tab":"ea722d0f.98c548","disp":true,"width":"6","collapse":false},{"id":"9944e55d.cbab48","type":"ui_group","z":"","name":"Test2","tab":"ea722d0f.98c548","disp":true,"width":"6","collapse":false},{"id":"ea722d0f.98c548","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]

Ich bastel gerade nur nach an einem resize der Bilder, die auch das Seitenverhältnis respektiert und abhängig ist von der Größe der Group
Mit window.innerWidth bekommt man nur die Größe des gesamten Dashboards und ich hab bisher keine Methode gefunden, nur die Größe der Gruppe zu ermitteln.

[hobbyquaker]

Ich nutze das: (inhalt eines Dashboard Template Nodes)

<img id="cam-terrasse" style="border:0;height:200px" src="https://motioneye/cam-terrasse">
<button id="refresh-terrasse" class="md-raised md-button md-ink-ripple">Refresh</button>
<script>
(function () {
  var img = document.querySelector('#cam-terrasse');
  var imgUrl = img.src;
  var button = document.querySelector('#refresh-terrasse');
  button.addEventListener('click', function () {
     img.src = imgUrl + '?__t=' + new Date().getTime();
  });  
})();
</script>

Ein periodisches Neuladen des Bilds ist bei mir nicht nötig, Motioneye liefert mir einen mjpeg stream. Da es allerdings immer wieder mal vorkam dass dieser hängengeblieben ist hab ich ein Button hinzugefügt um das ganze manuell wieder in Gang zu bringen.

[unixweb]

Versuch mal ein "Template" mit folgenden Inhalt in dem Tab zu installieren wo das Bild drin ist. Wichtig ist dass es im gleichen Tab liegen muss sonst funktioniert es nicht. Siehe rechts im Dashboard und prüfe ob es in der gleichen Gruppe drin ist.

<script>
<!--
function timedRefresh(timeoutPeriod) {
	setTimeout("location.reload(true);",timeoutPeriod);
}

window.onload = timedRefresh(600000);

//   -->
</script>

Bei mir werden Verkehrskameras angezeigt und eben periodisch neu geladen.