HTML template to show camera allmost fullscreen

Moderator: leecollings

Post Reply
zicht
Posts: 272
Joined: Sunday 11 May 2014 11:09
Target OS: Windows
Domoticz version: 2023.1+
Location: NL
Contact:

HTML template to show camera allmost fullscreen

Post by zicht »

Just to share a quick and dirtly implementation

I wanted a full screen camera page in domoticz. Problem : it works local, but running into crossdomain problems when using externally
So i Made a HTML template to show camera almost fullscreen & solve cross domain issues, with automatic refresh 750 mS

Difficulty : 7 Knowledge of html and javascript needed

Code: Select all

style>
#camfeed1{
 display:none;
}
#camfeed7{
 display:none;
}
#camfeed72{
 display:none;
}
</style>
<p></br></p>
 <p align="center">
 	<a href="http://local.ip.number.000:port/camsnapshot.jpg?idx=7"><img  id="camfeed1"  src="http://local.ip.number.000:port/camsnapshot.jpg?idx=7&amp;count=167?t=" onload='ti=setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 750)' onerror='ti=setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 10000)' style="border: 1px solid rgb(30, 40, 50); width: 83%; max-width: 96%; "></a>
</p>

<p align="center">
   <a href="https://ext.ip.number.000:port/camsnapshot.jpg?idx=7"><img  id="camfeed7"  src="https://ext.ip.number.000:port/camsnapshot.jpg?idx=7&amp;count=167?t=" onload='ti=setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 750)' onerror='ti=setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 10000)' style="border: 1px solid rgb(30, 40, 50); width: 83%; max-width: 96%;"></a>
</p>
<p align="center">
   <a href="https://my.domain.com:port/camsnapshot.jpg?idx=7"><img  id="camfeed72"  src="https://my.domain.com:port/camsnapshot.jpg?idx=7&amp;count=167?t=" onload='ti=setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 750)' onerror='ti=setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 10000)' style="border: 1px solid rgb(30, 40, 50); width: 83%; max-width: 96%;"></a>
</p>
<p align="center">Buiten Midden</p>
<script>
function mijnding(){
	
	substring="http://local.ip.000.00:port/#/Custom/Cam1"
	if (location.href == substring) { 			
				console.log("Lokaal2");
				console.log(location.href);
				document.getElementById("camfeed1").style.display= 'inline' ;
	}
	substring="https://ext.ip.number.000:port/#/Custom/Cam1"
	if (location.href == substring) { 			
				console.log("Niet Lokaal2");
				console.log(location.href);
				document.getElementById("camfeed7").style.display= 'inline' ;
	}
	substring="https://my.domain.com:Port/#/Custom/Cam1"
	if (location.href == substring) { 			
				console.log("Niet Lokaal2");
				console.log(location.href);
				document.getElementById("camfeed72").style.display= 'inline' ;
	}

	
}

mijnding();

</script>

what it does :
- make a webpage with 3 webcam pictures from same camera, but hide all (local. external and with domainname)
- find the called ip adress, match it with one of the three --> make the correct one visible
- refresh every 750 mS, onerror refresh after 10 sec

Place the file with your adjustments in the template directory as HTML file.
do not forget to fill in you local/external IP and/or domain details !!
in the above example the file must be named Cam1.html
You will find it in the domoticz menu (other)

since it will only show the picture with the same origin like local or external IP, no crossdomain issues anymore


feel inspired and optimize my idea, for now it works perfect to fill my needs
Rpi & Win x64. Using : cam's,RFXCom, LaCrosse, RFY, HuE, google, standard Lua, Tasker, Waze traveltime, NLAlert&grip2+,curtains, vacuum, audioreceiver, smart-heating&cooling + many more (= automate all repetitive simple tasks)
lost
Posts: 660
Joined: Thursday 10 November 2016 9:30
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: HTML template to show camera allmost fullscreen

Post by lost »

Hello,
zicht wrote: Wednesday 27 November 2019 17:56 Just to share a quick and dirtly implementation
(...)
since it will only show the picture with the same origin like local or external IP, no crossdomain issues anymore
I'm going to give it a try as soon as I can. Already have 2 pages merging up to 2 cams (front+back of the house is nice as someone leaving one will be soon caught by the other + garage, to monitor our free-as-a-bird cat coming in to eat!)... but local addresses + cams not allowed direct external access for obvious reasons = Can be used from LAN only.

On mobile, did you tried your implementation? On my side, trying jpg video stream or JS refreshed snapshots was not working even from LAN. And with Domoticz own camera feeds, either from menu or directed to a switch for convenience, the image is too small...

Thanks!
zicht
Posts: 272
Joined: Sunday 11 May 2014 11:09
Target OS: Windows
Domoticz version: 2023.1+
Location: NL
Contact:

Re: HTML template to show camera allmost fullscreen

Post by zicht »

It is just using CSS to enable disable items and finding out where you are calling to (IP wise)

So yes it works for all devices i have tried so far,
Only restrictions is that your device supports the used technique, all modern browsers should work

To avoid streaming issues i use the jpg aproach (refreshing stills after 750ms).
The technique is simple HTML & CSS.
Y
ou can look into your console log what is happing, the calling ip should be exactly visible.
That will be matched to enable the css element ( If you dont see anyting you can add a console.log line ...)

Tried to rely on the stills provided by domoticz to make it more hardware undepended
Rpi & Win x64. Using : cam's,RFXCom, LaCrosse, RFY, HuE, google, standard Lua, Tasker, Waze traveltime, NLAlert&grip2+,curtains, vacuum, audioreceiver, smart-heating&cooling + many more (= automate all repetitive simple tasks)
lost
Posts: 660
Joined: Thursday 10 November 2016 9:30
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: HTML template to show camera allmost fullscreen

Post by lost »

zicht wrote: Friday 29 November 2019 10:37 It is just using CSS to enable disable items and finding out where you are calling to (IP wise)
(...)
That will be matched to enable the css element ( If you dont see anyting you can add a console.log line ...)
OK, so this looks like the small hack I found on the web to refresh snapshot (used this for a cam that lacked mjpeg video)... but I misunderstood the way it works I think: This makes the visible selection automagically depending on internal/external IP but still needs external access to the cam! So this solve the cross-domain issue on a single web page, but does not solve the paranoïd user case with IP cams not allowed to send a single byte out!

I think I'll forget showing video on custom pages as there is no easy way to "proxy" those unsafe IP cams through domoticz web server custom page & only when page is opened (to avoid continous LAN bandwith usage). Found some examples using php on the web, but domoticz web server does not support php!

Already have a FTP that gets captures provided by cams & send them by mail. I think I'll end modifying this to always keep a few 10's of last captures on a tmpfs used by a custom page making an automatic diaporama with this.

Domoticz realy lacks a good cam support, but looks this is not so easy problem. Especially when you're not a web developer and can only rely on html and client side JS.
zicht
Posts: 272
Joined: Sunday 11 May 2014 11:09
Target OS: Windows
Domoticz version: 2023.1+
Location: NL
Contact:

Re: HTML template to show camera allmost fullscreen

Post by zicht »

his makes the visible selection automagically depending on internal/external IP but still needs external access to the cam! So this solve the cross-domain issue on a single web page, but does not solve the paranoïd user case with IP cams not allowed to send a single byte out!
if you look closer it connects to domoticz, not to the cam.... It uses the snapshot function of domoticz. No credentials of the cam are needed.
(When entered domoticz after login your cam credentials are revealed anyway in settings)

But you can solve the acces even better ! Think out of the box .....
Make a switch that "enables" the special camera custompage....

Write a lua or dzeventscript that creates the custom page :P
To explain :
When the switch is turned on write a textfile with your html elements and save it from the script in the template file.
Now the template is only visible and reachable when the switch is on...

If you put a html refresh command in the html code every xx seconds, (or you a html redirect every xx sec) you will be sure the page is closed after setting the switch to off.

Just be sure it is not running on SD card if doing this a lot, your sd will be suffered read errors after to many writes...

note :
On top of all i have geolookup running on every calling IP, if "out of range" they are blocked.
Also all IP adresses are logged in a txt file.

I have only once experienced that anybody tried to acces... what makes sence as i am not targeted as a person of interest
Rpi & Win x64. Using : cam's,RFXCom, LaCrosse, RFY, HuE, google, standard Lua, Tasker, Waze traveltime, NLAlert&grip2+,curtains, vacuum, audioreceiver, smart-heating&cooling + many more (= automate all repetitive simple tasks)
Derik
Posts: 1602
Joined: Friday 18 October 2013 23:33
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Arnhem/Nijmegen Nederland
Contact:

Re: HTML template to show camera allmost fullscreen

Post by Derik »

Hi.. I looking for a camera page option..
I try to create with this code i need a login for my camera's so i get this option not working.
Perhaps some have a example with a pass login?
And also a sample with a public webcam?
Xu4: Beta Extreme antenna RFXcomE,WU Fi Ping ip P1 Gen5 PVOutput Harmony HUE SolarmanPv OTG Winddelen Alive ESP Buienradar MySensors WOL Winddelen counting RPi: Beta SMAspot RFlinkTest Domoticz ...Different backups
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest