Jump to content

leffertd

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

leffertd's Achievements

Newbie

Newbie (1/6)

2

Reputation

  1. leffertd
    I need to start of by saying I am a novice at html. So if anyone has a better and or more efficient way of making this work, GREAT!!!! I started by upping the number of Frames in HP to 15. Each of my cameras is using a separate Frame html. Frame3.html is Camera 1, Frame4.html is Camera 2.... and so on. I only needed to change the CAMERA ID in each of the different Frame html files. This is an example of one of the Frame html files. I have all eight cameras "streaming" into HP and on the same page. And all seams to be running great. I am also using Unifi Video to manage my Cameras. // <html> <head> <script type="text/JavaScript"> var url = "http://<UNIFI VIDEO IP>:7080/api/2.0/snapshot/camera/<CAMERA ID>?force=true&apiKey=<API KEY>"; //url to load image from // Get the Camera ID from the RTSP address in Unifi Video. "rtsp://<UNIFI VIDEO IP>:7447/<CAMERA ID>eb_1" My Id's are 22 digits of lower case and numbers. var refreshInterval = 500; //in ms var drawDate = true; //draw date string var img; function init() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); img = new Image(); img.onload = function() { canvas.setAttribute("width", 480) canvas.setAttribute("height", 260) context.drawImage(this, 0, 0, 480, 260); if(drawDate) { var now = new Date(); var text = now.toLocaleDateString() + " " + now.toLocaleTimeString(); var maxWidth = 100; var x = canvas.width-10-maxWidth; var y = canvas.height-10; context.strokeStyle = 'black'; context.lineWidth = 2; context.strokeText(text, x, y, maxWidth); context.fillStyle = 'white'; context.fillText(text, x, y, maxWidth); } }; refresh(); } function refresh() { img.src = url + "&noCache=" + new Date().getTime(); setTimeout("refresh()",refreshInterval); } </script> <title>Unifi Camera House Panel v1</title> </head> <body onload="JavaScript:init();"> <canvas id="canvas"/> </body> </html> // Hope this helps... I would like to get this to work much how the Camera function in the web interface for the ISY994 works. I also have the Unifi cameras running through that also. The feed in the ISY will scale the size of the camera feed. If it matters... I am running HP on a Pi4 while I play with it. I do have plans on moving it over to Polisy. Donald Frame9.html
  2. leffertd
    I am loving HousePanel!!!!! I got my Unifi cameras to "stream" into HP using the Frames. I got all 8 of my cameras to run on the system. Is it possible to set a Frame as background image for a Page.
×
×
  • Create New...