Member Avatar
Member 805952

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>