Tabs with camera

piokuc · Post by **piokuc** » Thursday 21 July 2016 12:21

Hi
Is possible to add in future new TABS CAMERAS (enable/disable in settings) and on this tab will be camera as device. On this will be icon for live view or snapshott or we can create in edit url to config camera and when click on ikon camera web browser open in new tab page with configuration camera... It is good to have all option in one place.

yfands · Post by **yfands** » Monday 05 September 2016 9:56

Hello piokuc,

Good suggestion, I second it.

All in favor please vote.

regards Frank.

ayasystems · Post by **ayasystems** » Wednesday 07 September 2016 10:22

Me too

nuphar · Post by **nuphar** » Wednesday 07 September 2016 14:12

OK, so I'm not really a hero when it comes to smart coding, but...it's a start:
- You can add custom pages to the menu, by editing/renaming files in /home/pi/domoticz/www/templates
- So I added a Camera.html and it's displayed.
- You can enable/disable this custom in settings.

So getting the tab is not that difficult. Yes, it would be nice to have a tab 'Camera' without the 'Custom' part, but it will do for me.

Now getting the content for this page...? It would be nice to query the database for the stream URLs (any help on querying this, I only have MySQL experience), but I have entered them manually. An iframe for each camera, with the stream URL as source.

Works like a charm. But yes, it would be a nice standard feature.

Grtz,
Johan

piokuc · Post by **piokuc** » Tuesday 13 September 2016 15:18

Better will be if tabs cameras will be only for cameras and tabs custom is for other...

KingOfNuls · Post by **KingOfNuls** » Wednesday 14 September 2016 13:23

it will be great

Fainted · Post by **Fainted** » Wednesday 14 September 2016 14:19

@ piokuc - Yes good idea, i wote that this should be implemented!

piokuc · Post by **piokuc** » Wednesday 05 October 2016 12:44

It should looks as on screen:

: cameras.jpg (135.84 KiB) Viewed 2601 times

I also think that menu with tabs should be move on the left page because in some languages this menu on top page is to big. On top page should only be tabs/icon for open menu setup Menu on the top page is limited in size to add new tabs.
I think to look as and set size button tabs to the same size(on screen is other size for each):

: menu.jpg (328.67 KiB) Viewed 2601 times

ErnieFR · Post by **ErnieFR** » Saturday 23 September 2023 11:05

Too bad nobody of the Domoticz team really responded to this topic! Personally I think in this time/age with cameras everywhere, Domoticz clearly gets behind in adapting to cam views in its layout. The only thing you can have is a small icon added to a scene (in tab 'groups') or to switches (and with some luck switches on dashboard), if there is some logic between that ???
Then, if you click on a particular cam-icon from a switch/scene the popup overlaps the entire screen, can not be resized and blocks all operations until cancelled. This is so backward, that it inspired me too to create my own html page in templates. It takes screenshots per cam (not live streams cause that is very network/cpu intense), and overwrites every 5 seconds by means of a javascript cause "<meta refresh>" in an iframe, or not, produces these awfull white flashes. Below is an example and below that the html/java-script I'm using.
For the Domoticz development team I hope new versions will implement cams better then uptill now!!!

: my own version of cam views; Domoticz showing multiple phonecams.JPG (120.01 KiB) Viewed 1044 times

and here's what I mean adding a cam from a scene to a switch but launching the view overlays entire tab while resizing is blocked, WHY ???

: no resize possible, overlaying entire tab :-(; Domoticz-scene cam from switch.JPG (132.25 KiB) Viewed 1044 times

=>>> HTML code of the page I added to domoticz/templates/all_cams.html is available,
=>>> for those interested send me a personal message and I'll send you the html file (bit too tall for inside this box!)

ErnieFR · Post by **ErnieFR** » Saturday 23 September 2023 11:59

<!DOCTYPE html>
<html class="img-no-display">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>fooncams</title>
<style>
html {
height: 100%;
overflow: hidden;
}
body {
background: url(web_images/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
div#outer {
display: table;
height: 100%;
width: 100%;
}

</style>

<script>
function preloadImages() {
const images = ["http://192.168.0.34:3334/shot.jpg", "http://192.168.0.35:3335/shot.jpg", "http://192.168.0.36:3336/shot.jpg", "http://192.168.0.37:3337/shot.jpg", "http://192.168.0.38:3338/shot.jpg", "http://192.168.0.39:3339/shot.jpg"];
images.forEach(image => {
const img = new Image();
img.src = image;
});
}

function vernieuwFoto1(imgElement) {
// Vervang deze regel met de URL van de nieuwe foto die je wilt weergeven
const nieuweFotoURL1 = "http://192.168.0.34:3334/shot.jpg";
// Voeg een willekeurige querystring toe aan de URL om de cache te vernieuwen
const randomQueryString = "?t=" + Date.now();
imgElement.src = nieuweFotoURL1 + randomQueryString;
}

// Roep de preloadImages functie op zodra de pagina is geladen
window.addEventListener('load', preloadImages);

// Roep de vernieuwFoto1 functie elke 5 seconden aan voor een specifieke afbeelding
setInterval(function() {
const fotoElement1 = document.getElementById("foto1"); // Vervang "foto1" met de ID van het img-element dat je wilt vernieuwen
vernieuwFoto1(fotoElement1);
}, 5000);

</script>
</head>

<body>
<div id="outer">
<img id="foto1" src="http://192.168.0.34:3334/shot.jpg" alt="poort" width="400" height="222">
</div>
</body>
</html>

ErnieFR · Post by **ErnieFR** » Saturday 23 September 2023 12:02

In the post above, 6 photos were originally preloaded, but since code size was so long, the refresh functions etc are only shown for photo1. Sorry fot the dutch texts, no time to replace that with English. Simply repeat the functions where you'd like to have photo2, photo3 etc...
Hope this will help somebody somewhere somehow sometime...

lost · Post by **lost** » Wednesday 27 September 2023 13:17

ErnieFR wrote: ↑Saturday 23 September 2023 12:02 Hope this will help somebody somewhere somehow sometime...

Hello,

I think lots of Domoticz users made their own custom pages to somehow circumvent the limited IP cams support. But in fact, after digging a bit into this, I think anyone quickly understand that all models are different and so their support, even when some standard (ONVIF...) support looks available: Good support would be building a NVR in Domoticz, a (too) hard work (considering existing specialized hardware available).

On my side, that's an external python service that manage my IP cams. I had dlink and another brand I don't remember in the past on top of 1 Dahua... The last one was showing most usable possibilities (+ not needing any external cloud to host them, so they can be restricted to my LAN) so all others got replaced between 2 and 3 years ago and that's now all the same API: Easier, even if some day/night management I do remains quite generic. As well, the way to store images (flat from ftp root or a more complex directory tree) depends on the cam brands or even types.

My cam management service does much more, but on images custom page for domoticz I did something more simple that may also fit your needs: Enable cams embedded motion detection and sending to domoticz host (FTP is most common, but also usually available is SMB, SFTP).

So you may just show latest useful data, making refresh much easier (an in-custom-page button would even do the trick, even allowing time to see things/save useful images where you are from your smartphone)... OK, that's not getting a periodic snapshot from a cam URL and needs to setup a FTP/SFTP(if cam supports it, if you have SSH you already have SFTP)/Samba but on custom page side this makes things easier (+ less chance to miss useful info if you're too late to connect vs someone around your home).

On my side, that's even a static page: The python service on a 5s time slice base manage images and, for this custom last captures page, merge last captures images (if any new ones) in a single one in the ftp tmpfs root directory, camera per camera. When assembly is done, it just moves a fixed name (same used in static page) symbolic link to the up to date image assembly files and that's it. So that's 1 "never changing" image file (the link) to reference in the custom html per camera. Really simple on this side.

After 2022.2 or 2023.1, I had to make a time based load indirection of this static page to cope with some recent caching strategy changes in domoticz (can give more details if needed or some messages about this may be found in the forum: Embedded refresh button was no more working and needed this load trick).

Tabs with camera

Tabs with camera

Re: Tabs with camera

Re: Tabs with camera

Re: Tabs with camera

Re: Tabs with camera

Re: Tabs with camera

Re: Tabs with camera

Re: Tabs with camera

Re: Tabs with camera

Re: Tabs with camera <html source code diy page>

Re: Tabs with camera <explanation diy page>

Re: Tabs with camera <explanation diy page>

Who is online