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&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&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&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
