Could somebody please help me to add a function to this script in which the image to test if the server is up has a timeout, so it shows an error message to the user instead of just loading forever.
The current function of the code is:
Attempt to load the image, Show the user the webcam on success, on failiure it says the webcam is offline (but uses a timeout set by the browser I think or just a default timeout which takes ages)
Show an alert box after 3 minutes that the user has to close to continue viewing the webcam (otherwise it will just not load any new images)
This is the code:
<html>
<head>
<style TYPE="text/css">
.siteCheckMsg {
display: none;
}
</style>
<script>
onload = function() {
var siteCheckMsg1 = document.getElementById('siteCheckMsg1');
var siteCheckMsg2 = document.getElementById('siteCheckMsg2');
var siteCheckMsg3 = document.getElementById('siteCheckMsg3');
siteCheckMsg1.style.display = 'block';
var siteCheckImg = new Image();//This is a socalled "off-screen image".
siteCheckImg.onerror = function()
{
siteCheckMsg1.style.display = 'none';
siteCheckMsg2.style.display = 'block';
siteCheckMsg3.style.display = 'none';
};
siteCheckImg.onload = function() {
siteCheckMsg1.style.display = 'none';
siteCheckMsg2.style.display = 'none';
siteCheckMsg3.style.display = 'block';
};
var d = new Date();//For cachebusting in next line
siteCheckImg.src = "http://ip.benellis.info/images/bg1.gif?d=" + d.getTime();
};
</script>
<script>
function usrcheck()
{alert ("Please click ok to continue viewing the webcam (This is to save badwidth - the stream is paused while this alert is open)");
timecheck()} //resets the timer by sending it back to timecheck
var time="3" //allows inexperienced users to set time in minutes
function timecheck()
{
setTimeout ("usrcheck()",time*60000);} //checks if the user is still here after however many minutes set before
</script>
</head>
<body>
<div class="siteCheckMsg" id="siteCheckMsg1">Checking webcam availability ...</div>
<div class="siteCheckMsg" id="siteCheckMsg2">Unfortunately, the webcam in not online. <br> <a href="javascript:location.reload(true)">Try again?</a>
</div>
<div class="siteCheckMsg" id="siteCheckMsg3">
<!-- show webcam begin -->
<IMG src="http://ip.benellis.info/snapshot.cgi?user=operator&pwd=test" width="640" height="480" border="0" name="refresh">
<SCRIPT language="JavaScript" type="text/javascript">
var t = 1 // interval in seconds
image = "http://ip.benellis.info/snapshot.cgi?user=operator&pwd=test" //name of the image
timecheck()
function Start() {
tmp = new Date();
tmp = "&"+tmp.getTime()
document.images["refresh"].src = image+tmp
setTimeout("Start()", t*1000)
}
Start();
</SCRIPT>
<!-- show webcam end -->
</div>
</body>
</html>