javascript image check not working

Question

bben95

13 Years Ago

Hi
Does anyone know how to get this javascript code working please?

<script language="JavaScript">
var blnSiteUp="1"
var camera="Please wait for my javascript to check if the webcam is online...";
document.write (camera)
function setblnsiteup()
{
var blnSiteUp="0";
}
</script>
<img id=test onerror="javascript:setblnsiteup();" style="visibility:hidden" src="http://ip.benellis.info/images/bg1.gif">
<script language="JavaScript">
document.write (blnSiteUp)
  </script>
<script language="JavaScript">
if (blnSiteUp="0")
  {
  document.write("site is not up")
  }
else if (blnSiteUp="1")
  {
 document.write("site is up")
  }
else
  {
document.write("error")
  }
    </script>

What I want it to do is check if the site is up (by checking the image shown) and report back.
After I manage to get this working I want to add this code to something else that shows a webcam stream (in cgi format) for browsers other than internet explorer and it shows internet explorer an image that updates itself every second ( because IE tries to save the file if its a cgi video stream)

Thanks in advance to anyone that helps!

javascript

2 Contributors
64 Replies
455 Views
6 Days Discussion Span
Latest Post 13 Years Ago Latest Post by Airshow

All 64 Replies

Airshow 416 WiFi Lounge Lizard

13 Years Ago

BBen,

CSS in document HEAD:

.siteCheckMsg {
  display: none;
}

Javascript in document HEAD:

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();
};

HTML in document BODY:

<div class="siteCheckMsg" id="siteCheckMsg1">Checking webcam availability ...</div>
<div class="siteCheckMsg" id="siteCheckMsg2">Site is not up</div>
<div class="siteCheckMsg" id="siteCheckMsg3">Site is up</div>

Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Hi Ben,

I see you're at the computer ... give me a wave.

Here's some code which pretty well does what you want. I stuffed loads of comments in there to explain what's what.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
.msg {
	display: none;
}
#webcam {
	display: none;
	border: 1px solid #000;
}
</style>

<script>
onload = function(){
  var constants = {
    siteTestTimeout : 2000, //milliseconds
	msWbcamRefreshInterval : 5000 //milliseconds
  };
  var messages = [ //Array of "message" nodes
    null,
	document.getElementById('msg1'),
    document.getElementById('msg2'),
    document.getElementById('msg3'),
    document.getElementById('msg4'),
    document.getElementById('msg5')
  ];
  messages.show = function(x) { //Utility that allows a particular message to be shown (and hides all others)
    for(var i=1; i<this.length; i++) {
      this[i].style.display = (i == x) ? 'block' : 'none';
    }
  }
  var webcam = document.getElementById('webcam');//The webcam inmage node.
  webcam.onerror = function() {//Webcam image error handler
    messages.show(5);
  };
  webcam.onload = function() {//Webcam image successful onload handler
    messages.show(0);// Hide all messages
  };
  var webcamURLs = [ // Array of urls
    "http://ip.benellis.info/snapshot.cgi?user=operator&pwd=test",
    "http://ip.benellis.info/videostream.cgi?user=operator&pwd=test"
  ];
  var int_1;//in case we add a "stop" button some time
  var loadWebcam = function() {
    webcam.style.display = 'inline';//Show the webcam inage
    if(navigator.appName.indexOf('Microsoft') > -1) { //MSIE
      (function loadStatic() {
        var d = new Date();//For cachebusting in next line
        webcam.src = webcamURLs[0] + d.getTime();
      })();//Define the MSIE loader function, and execute it immediately
	  int_1 = setInterval(loadStatic, constants.msWbcamRefreshInterval);
    }
    else {//other browsers
      webcam.src = webcamURLs[1];//Streamed source
    }
  }
  messages.show(1);//initially show the "checking ..." message
  var siteCheckImg = new Image();//Off-screen "check" image
  siteCheckImg.onerror = function() {//"check" image's error handler
    clearTimeout(tim_1);//Make sure we don't also get the timeout message.
    messages.show(2);//Show "site not up" message
  };
  siteCheckImg.onload = function() {
    clearTimeout(tim_1);//Make sure we don't also get the timeout message.
    messages.show(3);//Show "site is up" message
	loadWebcam();//Initiate the webcam stream/images
  };
  var tim_1 = setTimeout(function() {
    siteCheckImg.src = '';//Kill checkmessage loading
    messages.show(4);//Show "timeout" message
  }, constants.siteTestTimeout);
  var d = new Date();//For cachebusting in next line
  siteCheckImg.src = "http://ip.benellis.info/images/bg1.gif?d=" + d.getTime();//Load the "site check" image
};
</script>
</head>

<body>

<img id="webcam" src="" border="0">
<div class="msg" id="msg1">Checking webcam availability ...</div>
<div class="msg" id="msg2">Site is not up</div>
<div class="msg" id="msg3">Site is up</div>
<div class="msg" id="msg4">Timeout</div>
<div class="msg" id="msg5">Site is up but webcam failed to load</div>

</body>
</html>

Airshow

bben95 commented: really helpful thanks airshow +1

Airshow 416 WiFi Lounge Lizard

13 Years Ago

There's some overlap of functionality so they will most probably "interact". (ie mess each other up).

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

bben95 · Answer 1 · 2010-12-14T05:03:54+00:00

Thanks for that but I put it all in a html file with html tags head and body and all that but it just gives the output "1.2.3." (without speech marks) on the page.

Here is how I put it together:

<html>
<head>
<style TYPE="text/css">
.siteCheckMsg {
  display: none;
}
</style>
<script>
   1.
      onload = function() {
   2.
      var siteCheckMsg1 = document.getElementById('siteCheckMsg1');
   3.
      var siteCheckMsg2 = document.getElementById('siteCheckMsg2');
   4.
      var siteCheckMsg3 = document.getElementById('siteCheckMsg3');
   5.
      siteCheckMsg1.style.display = 'block';
   6.
      var siteCheckImg = new Image();//This is a socalled "off-screen image".
   7.
      siteCheckImg.onerror = function() {
   8.
      siteCheckMsg1.style.display = 'none';
   9.
      siteCheckMsg2.style.display = 'block';
  10.
      siteCheckMsg3.style.display = 'none';
  11.
      };
  12.
      siteCheckImg.onload = function() {
  13.
      siteCheckMsg1.style.display = 'none';
  14.
      siteCheckMsg2.style.display = 'none';
  15.
      siteCheckMsg3.style.display = 'block';
  16.
      );
  17.
      var d = new Date();//For cachebusting in next line
  18.
      siteCheckImg.src = "http://ip.benellis.info/images/bg1.gif?d=" + d.getTime();
  19.
      };
	  </script>
	  </head>
	  <body>
	     1.
      <div class="siteCheckMsg" id="siteCheckMsg1">Checking webcam availability ...</div>
   2.
      <div class="siteCheckMsg" id="siteCheckMsg2">Site is not up</div>
   3.
      <div class="siteCheckMsg" id="siteCheckMsg3">Site is up</div>
	  </body>
	  </html>

Whats gone wrong?

And thanks again for your help it's really appreciated.

bben95 · Answer 2 · 2010-12-14T05:20:02+00:00

Oh dear.... I didn't realise it copied the line numbers. Lol. Ill try again without them when I get to my computer. (I'm on my phone)

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2010-12-14T05:25:40+00:00

BBen,

Yikes, which browser copies the line numbers to clipboard? Safari? Konqueror? Web TV?

Either go through and remove the line numbers from your page or start over, from scratch, but this time copy my three blocks of code from the Daniweb page as follows:

Click "toggle plain text"
Click anywhere in the clode block
Cntl-A to select all.
Cntl-C to copy to clipboard

Airshow

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 4 · 2010-12-14T05:26:51+00:00

Airshow 416 WiFi Lounge Lizard

13 Years Ago

OK, I just read your post - phone - that explains.

bben95 · Answer 5 · 2010-12-14T05:30:00+00:00

It was firefox actually! Maybe I just copied it badly. I think it would be easier to just remove the numbers so ill do that.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2010-12-14T05:32:11+00:00

BBen, correction to my javascript ...

Line 16 should be close curly brace }, not close round bracket ).

A

bben95 · Answer 7 · 2010-12-14T05:33:16+00:00

I wasn't on my phone when I copied it, only that post and this one were sent from my phone

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 8 · 2010-12-14T05:36:49+00:00

Airshow 416 WiFi Lounge Lizard

13 Years Ago

So that was FF on a desktop/laptop? Under which OS?

bben95 · Answer 9 · 2010-12-14T05:44:04+00:00

Yes laptop. On vista.

I corrected the code removing all of the line numbers and changing the )

Here it is:

<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>
	  </head>
	  <body>

      <div class="siteCheckMsg" id="siteCheckMsg1">Checking webcam availability ...</div>

      <div class="siteCheckMsg" id="siteCheckMsg2">Site is not up</div>

      <div class="siteCheckMsg" id="siteCheckMsg3">Site is up</div>
	  </body>
	  </html>

And it seems to be working great.
Would it be possible to add a timeout, so if the image dosen't load in 2 seconds it will say its offline?

bben95 · Answer 10 · 2010-12-14T05:52:32+00:00

And please tell me if I'm asking to much but I want to have a script that sends the user to the webcam image in different formats for MSIE and other browsers.
Would that be possible? And could I replace these:

<div class="siteCheckMsg" id="siteCheckMsg1">Checking webcam availability ...</div>

      <div class="siteCheckMsg" id="siteCheckMsg2">Site is not up</div>

      <div class="siteCheckMsg" id="siteCheckMsg3">Site is up</div>
	  </body>

messages site is up and site is not up with the script?

I know the basic outline of how the script goes. Something like this:

<SCRIPT language="JavaScript">
<!--
var browserName=navigator.appName; 
{ 
 if (browserName=="MSIE")
 {
  document.write('<img src="http://ip.benellis.info/snapshot.cgi?user=operator&pwd=test id=stream');
 }
 else
  {
    document.write('<img src="http://ip.benellis.info/videostream.cgi?user=operator&pwd=test" id=stream');
   }
}
//-->
</SCRIPT>

Thanks so much
Ben

bben95 · Answer 11 · 2010-12-14T05:53:37+00:00

By the way feel free to visit those links and you'll see my webcam!
I'm going to sleep now so won't be able to respond until tomorrow afternoon.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 12 · 2010-12-14T06:16:19+00:00

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Ben,

Me too - sleep that is. Speak tomorrow.

A

bben95 · Answer 13 · 2010-12-14T22:22:30+00:00

I've improved the code a but so it shows the webcam now. I think I'll leave it instead of adding the script to check the browser. I still want to add a timeout to it though, as if the webcam is offline is just shows the page as loading forever.
Here is the code at the moment:

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

bben95 · Answer 14 · 2010-12-15T00:23:16+00:00

Oh hey airshow. I did'nt see that you posted. I didn't recieve an email from the board to tell me :(.
I've updated what I posted before some more. Here it is:

<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" //time in minutes
function timecheck() 
{
setTimeout ("usrcheck()",time*60000);} //checks if the user is still here after 300 seconds 
</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 --> 
	  	  <script>

</script>
      <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>

I'll take a look at what you wrote.

bben95 · Answer 15 · 2010-12-15T00:25:18+00:00

Oh wow what a coincidence. I was just checking the page when you posted that. That's why I didn't get the email, I got it now, about a minute after you posted.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 16 · 2010-12-15T00:28:06+00:00

Airshow 416 WiFi Lounge Lizard

13 Years Ago

OK, I'll have a look at yours.

bben95 · Answer 17 · 2010-12-15T00:33:08+00:00

I'll add both of them together (The scripts)

bben95 · Answer 18 · 2010-12-15T00:43:52+00:00

oh dear
well I've already done it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
.msg {
	display: none;
}
#webcam {
	display: none;
	border: 1px solid #000;
}
</style>
<script>
onload = function(){
  var constants = {
    siteTestTimeout : 2000, //milliseconds
	msWbcamRefreshInterval : 5000 //milliseconds
  };
  var messages = [ //Array of "message" nodes
    null,
	document.getElementById('msg1'),
    document.getElementById('msg2'),
    document.getElementById('msg3'),
    document.getElementById('msg4'),
    document.getElementById('msg5')
  ];
  messages.show = function(x) { //Utility that allows a particular message to be shown (and hides all others)
    for(var i=1; i<this.length; i++) {
      this[i].style.display = (i == x) ? 'block' : 'none';
    }
  }
  var webcam = document.getElementById('webcam');//The webcam inmage node.
  webcam.onerror = function() {//Webcam image error handler
    messages.show(5);
  };
  webcam.onload = function() {//Webcam image successful onload handler
    messages.show(0);// Hide all messages
  };
  var webcamURLs = [ // Array of urls
    "http://ip.benellis.info/snapshot.cgi?user=operator&pwd=test",
    "http://ip.benellis.info/videostream.cgi?user=operator&pwd=test"
  ];
  var int_1;//in case we add a "stop" button some time
  var loadWebcam = function() {
    webcam.style.display = 'inline';//Show the webcam inage
    if(navigator.appName.indexOf('Microsoft') > -1) { //MSIE
      (function loadStatic() {
        var d = new Date();//For cachebusting in next line
        webcam.src = webcamURLs[0] + d.getTime();
      })();//Define the MSIE loader function, and execute it immediately
	  int_1 = setInterval(loadStatic, constants.msWbcamRefreshInterval);
    }
    else {//other browsers
      webcam.src = webcamURLs[1];//Streamed source
    }
  }
  messages.show(1);//initially show the "checking ..." message
  var siteCheckImg = new Image();//Off-screen "check" image
  siteCheckImg.onerror = function() {//"check" image's error handler
    clearTimeout(tim_1);//Make sure we don't also get the timeout message.
    messages.show(2);//Show "site not up" message
  };
  siteCheckImg.onload = function() {
    clearTimeout(tim_1);//Make sure we don't also get the timeout message.
    messages.show(3);//Show "site is up" message
	loadWebcam();//Initiate the webcam stream/images
  };
  var tim_1 = setTimeout(function() {
    siteCheckImg.src = '';//Kill checkmessage loading
    messages.show(4);//Show "timeout" message
  }, constants.siteTestTimeout);
  var d = new Date();//For cachebusting in next line
  siteCheckImg.src = "http://ip.benellis.info/images/bg1.gif?d=" + d.getTime();//Load the "site check" image
};
</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" //time in minutes
function timecheck() 
{
setTimeout ("usrcheck()",time*60000);} //checks if the user is still here after 300 seconds 
</script>
</head>
<body>
<img id="webcam" src="" border="0">
<div class="msg" id="msg1">Checking webcam availability ...</div>
<div class="msg" id="msg2">Site is not up</div>
<div class="msg" id="msg3">
<!-- 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() //to save bandwidth
function Start() {
tmp = new Date(); 
tmp = "&"+tmp.getTime() 
document.images["refresh"].src = image+tmp 
setTimeout("Start()", t*1000) 
} 
Start(); //back to the start
</SCRIPT> 
<!-- show webcam end --></div>
<div class="msg" id="msg4">Timeout</div>
<div class="msg" id="msg5">Site is up but webcam failed to load</div>
</body>
</html>

It seems to work all right but I think we should remove the overlap anyway. Which feature of the script is it?

bben95 · Answer 19 · 2010-12-15T00:49:28+00:00

I decided I didn't want it to detect the browser before because internet explorer and other mobile browsers need the snapshot.cgi one and firfox,chrome and other good (hehe) browsers need videostream.cgi file. I decided it would be easier to show all browsers the same thing otherwise I would have to specify all of the mobile browsers with internet explorer and all the other browsers in another group, which would be impossible to maintain as new browsers come out.
The videostream.cgi also dosent stop streaming when my alert comes up. (The one to save bandwidth)

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 20 · 2010-12-15T00:49:28+00:00

Airshow 416 WiFi Lounge Lizard

13 Years Ago

I'm looking at it now ......

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 21 · 2010-12-15T00:54:28+00:00

Aha ... your bandwidth saver - that's the only thing my code doesn't do .... I think.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 22 · 2010-12-15T00:56:53+00:00

My browser sniffer is very crude - it distnguishes between "IE" and "eveything else".

It could be made more comprehensive if necessary. There are some very good sniffer scripts out there.

bben95 · Answer 23 · 2010-12-15T02:29:23+00:00

I'd really rather not have the browser sniffer in, it would be too difficult unless we could just say all mobile browser and IE, and then all desktop browsers.

Could you help me remove the browser sniffer but leave the image timeout in please?
I would do it myself but I'm having trouble working out which bits of code are for the browser sniffer and which are for other parts.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 24 · 2010-12-15T05:07:32+00:00

Hey, you're back.

It would certainly be nice to avoid browser sniffing but that would requirte some research. As it stands you need to browser-sniff because it appears that there's no onerror event to trigger the use of snapshot.cgi after videostream.cgi has failed.

The good news (at least as a stop-gap) is that there's a reasonable chance of finding a sniffer which will tell you very simply whether the browser is IE or mobile. The test will be something like if(is.IE || is.mobile) {.....} else {.....} I have refactored my version of the code to accommodate play/pause on either user-demand or in response to a bandwith saver. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
.msg {
	display: none;
}
#webcam {
	display: none;
	border: 1px solid #000;
}
</style>

<script>
onload = function(){
  var constants = {
    siteTestTimeout : 25000, //milliseconds
    msWebcamRefreshInterval : 2000, //milliseconds
    bandwidthSaverTimeout : 300000 //milliseconds
  };
  var webcamURLs = [ // Array of urls
    "http://ip.benellis.info/snapshot.cgi?user=operator&pwd=test",
    "http://ip.benellis.info/videostream.cgi?user=operator&pwd=test",
	"http://ip.benellis.info/images/bg1.gif"
  ];
  var tim_1, tim_2, int_1;
  var messages = [ //Array of "message" nodes
    null,
    document.getElementById('msg1'),
    document.getElementById('msg2'),
    document.getElementById('msg3'),
    document.getElementById('msg4'),
    document.getElementById('msg5')
  ];
  messages.show = function(x) { //Utility that allows a particular message to be shown (and hides all others)
    for(var i=1; i<this.length; i++) {
      this[i].style.display = (i === x) ? 'block' : 'none';
    }
  };
  var webcam = document.getElementById('webcam');//The webcam inmage node.
  var playPause = document.getElementById('playPause');
  playPause.setPlaying = function() { this.innerHTML = 'Pause'; };
  playPause.setPaused = function() { this.innerHTML = 'Play'; };
  playPause.onclick = function() {
    if(this.innerHTML === 'Play') { webcam.play(); }
	else if(this.innerHTML === 'Pause') { webcam.pause(); }
  };
  if(navigator.appName.indexOf('Microsoft') > -1) { //MSIE
    webcam.play = function() {
      clearInterval(int_1);
      clearTimeout(tim_2);
      webcam.loadStatic();
      int_1 = setInterval(webcam.loadStatic, constants.msWebcamRefreshInterval);
      tim_2 = setTimeout(webcam.bandwidthSaver, constants.bandwidthSaverTimeout);
      playPause.setPlaying();
    };
    webcam.pause = function() {
      clearInterval(int_1);
      playPause.setPaused();
    };
  }
  else {//other browsers
    webcam.play = function() {
      clearInterval(int_1);
      clearTimeout(tim_2);
      webcam.src = webcamURLs[1];//Streamed source
      tim_2 = setTimeout(webcam.bandwidthSaver, constants.bandwidthSaverTimeout);
      playPause.setPlaying();
    };
    webcam.pause = function() {
      webcam.loadStatic();
      playPause.setPaused();
    };
  }
  webcam.loadStatic = function() {//Loader function for webcam static image
    var d = new Date();//For cachebusting in next line
    webcam.src = webcamURLs[0] + d.getTime();
  };
  webcam.bandwidthSaver = function() {
    webcam.pause();
    if(!confirm("To save badwidth, the stream has been paused.\nClick OK to close this dialog\nClick Cancel to continue viewing the webcam")) {
      webcam.play();
    }
  };
  webcam.onerror = function() {//Webcam image error handler
    messages.show(5);
  };
  webcam.onload = function() {//Webcam image successful onload handler
    messages.show(0);// Hide all messages
  };
  messages.show(1);//Initially show the "checking ..." message
  var siteCheckImg = new Image();//Off-screen "check" image
  siteCheckImg.onerror = function() {//"check" image's error handler
    clearTimeout(tim_1);//Make sure we don't also get the timeout message.
    messages.show(2);//Show "site not up" message
  };
  siteCheckImg.onload = function() {
    clearTimeout(tim_1);//Make sure we don't also get the timeout message.
    messages.show(3);//Show "site is up" message
    webcam.style.display = 'inline';//Show the webcam image
    webcam.play();//Initiate the webcam stream/images
  };
  tim_1 = setTimeout(function() {
    siteCheckImg.src = '';//Kill checkImage loading
    messages.show(4);//Show "timeout" message
  }, constants.siteTestTimeout);
  var d = new Date();//For cachebusting in next line
  siteCheckImg.src = webcamURLs[2] + '?d=' + d.getTime();//Load the "site check" image
};
</script>
</head>

<body>

<img id="webcam" src="" border="0">
<div id="controls"><a id="playPause" href="#">Play</a></div>

<div class="msg" id="msg1">Checking webcam availability ...</div>
<div class="msg" id="msg2">Site is not up</div>
<div class="msg" id="msg3">Site is up</div>
<div class="msg" id="msg4">Timeout</div>
<div class="msg" id="msg5">Site is up but webcam failed to load</div>

</body>
</html>

I think this meets all requirements to date without any additional js.

Airshow

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 25 · 2010-12-15T05:09:15+00:00

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Where in London are you?

bben95 · Answer 26 · 2010-12-15T05:17:53+00:00

I'm in north west london.

When I said I didn't want a browser sniffer I wanted to make the code a lot more simple: I just wanted to show all browsers the still image that updates. The snapshot.cgi with the script that I put in before.
I suppose if we can make it detect mobile browsers too that would be great. More functionality is often better in a script.

I just tested that code and the pause thing dosent work. After I paused it, it wanted a user and password to view it again. It dosent matter too much, as I dont think my webcam viewers will need to pause it, or even bother to if they go afk. Leaving it with just the alert it fine I think.

javascript image check not working

Recommended Answers Collapse Answers

All 64 Replies

Recommended Answers