javascript image check not working - Page 2

Question

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Ben,

I didn't want it to be paused or detect the bowser.

You may not want either but you need both:

Pause - direct consequence of wanting a bandwidth saver.
Detecting the browser - direct consequence of wanting this to work in both IE and other browsers/mobiles.

Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

In the last code I posted,

//Find
webcam.src = webcamURLs[0] + d.getTime();
//Replace with
webcam.src = webcamURLs[0] + '&d=' + d.getTime();

That should prevent it hanging on pause / bandwidthSaver timeout.

I found your camera by Googling the filenames snapshot.cgi/videostream.cgi. I guessed they would be unique to a particular model. It's a nice cam - especially at the price.

Airshow

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-15T05:46:10+00:00

Please can you try to keep the code simple when editing it. I want something that I can edit myself in the future if I ever need to. You seem to add a new feature every post! Please I really need it kept simple.

bben95 · Answer 2 · 2010-12-15T05:51:56+00:00

All this has really confused me and I can no longer understand the code. Can we go right back to this please:

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

And then just add the image timeout thingy to it.
Thanks

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2010-12-15T19:10:52+00:00

Ben, I can't take the code back without losing functionality. It is the way it is because of what is has to do. The most recent changes were necessary to accommodate pausing/restarting the animation. Refactoring the code again and again is a common feature of javascript development, generally due to variable scope issues. Eventually it stabilises into something workable.

This evening I'll make a version with the code separated into labelled, functional blocks to help understand it. There's just a couple of basic principles to grasp and it will all come clear. In the meanwhile, I suggest yo read about closures, which often need to be exploited especially in applications with real-time/asynchronous aspects (such as this yours).

Airshow

bben95 · Answer 4 · 2010-12-15T19:18:54+00:00

Yes I don't mind if it loses functionality. I didn't want it to be paused or detect the bowser. I just wanted it to check if the camera is online and return the result, then I wanted to add a timeout to it and I added a bandwidth saver. That's all I need.

bben95 · Answer 5 · 2010-12-16T00:17:20+00:00

The image with refresh script works in both browsers
The bandwidth saver works automatically whereas pause doesn't.

Please airshow, could you not just hep me do what I want to do?

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2010-12-16T01:52:52+00:00

Ben, I can't do the whole job for you especially if I'm trying to hit a moving target!

You've got to start thinking for yourself again. The code has a good structure with all the components to make it do exactly what you want it to do. There's nothing in my code that's difficult enough to prevent you from updating/maintining it for yourself. And today is the day you are going to start doing just that.

The image-refresh script will indeed work in both browsers but you wanted the streaming version (videostream.cgi) to appear in those browsers that will display it (eg Firefox). If you want only the image-refresh version in all browsers, then find the block of code that puts in place webcam.play = ... and webcam.browse = ... - there are two versions of each depending on the browser-sniffer test if(navigator.appName.indexOf('Microsoft') > -1) . To give all browsers the non-streaming image-refresh behaviour, just choose the versions that are currently given to IE. Comment out or delete the if/else structure including the two unwanted versions of webcam.play = ... and webcam.browse = ... .

The bandwidth-saver doesn't work "automatically" - it works because it calls webcam.pause() when the timeout fires. And because it does so, webcam.play() is necessary to restart webcam refresh if the user cancels the bandwidth-saver dialog. If the user clicks OK, then it remains paused. Apart from reversing the OK/Cancel logic, I really can't see that it could work any other way. If you don't want the manual Play/Pause link, then simply hide it with CSS directive #playPause { display:none } . Alternatively, delete the playPause link and all the lines of code that relate to it. The bandwidth saver will work without error in the absence of the playPause link providing all the lines relating to it have also been removed eg. playPause.setPlaying(); .

Airshow

bben95 · Answer 7 · 2010-12-16T02:04:23+00:00

Sorry Airshow, but the code is too difficult for me. I had only started learning about it the same day I started this thread...
I'm trying to remove the code that I don't need now, as you said.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 8 · 2010-12-16T06:06:29+00:00

In that case, I acknowledge that I'm dragging you on at a bit of a pace. But I get the feeling you can handle it.

In much of my code all I do is to attach methods (functions) to objects, in order to give them behaviours that can be invoked, from somewhere else in the code, with function calls.

For example:

var webcam = document.getElementById('webcam'); : Here we assign a reference to the webcam imge node, to the variable webcam .
webcam.play = function() { ... } : Here we attach a method to the webcam image node that, when called, causes the image to be repeatedly updated.
webcam.pause = function() { ... } : Here we attach a method to the webcam image node that, when called, causes its "play" behaviour to be suspended.
webcam.loadStatic = function() { ... } : Here we attach a method to the webcam image node that, when called, causes it to fetch the latest static image (snapshot.cgi). This method is called repeatedly by the setInterval(...) statement in webcam.play .
webcam.bandwidthSaver = function() { ... } : Here we attach a method to the webcam image node that, when called, causes it to be paused, to display a "confirm" dialog, and to restart webcam update or not, depending on the user response to the dialog. This method is called by the setTimeout(...) statement in webcam.play .
webcam.onerror = function() { ... } and webcam.onload = function() { ... } : These two are a bit different. onerror and onload are browser-generated events. But the principle is the same - we attach handlers to the webcam image node that, when called, cause predefined messages to be shown/hidden.

And similarly for other other objects.

In each case (except for the event handlers), we could use a discrete, named functions to achieve the same ends, but we use javascript's object-oriented capabilities to afford some structure to the code.

The skill comes in spotting how to translate a "functional requirement" into a set of efficient, concise methods/handlers (ie functions) that interact to create a usable, coherent application. This is seldom a one-step process, and (sometimes reluctantly) one needs to refactor the code because it has become untidy, repetitive or something arises that was not foreseen at the outset.

In even the simplest application, two programmers are most unlikely to come up with exactly the same solution, though some standard design patterns exist, which encourage programmers down similar avenues.

In case you haven't found them, here are some discussions/resources for your cam :

Airshow

bben95 · Answer 9 · 2010-12-16T06:19:28+00:00

Thanks airshow. I don't fully understand that but ill look it up tommorow and read through it again. I can't do it now as I'm just going to sleep and the computers already off.
I have seen the first two of those resources but I'm not sure about the third as its a pdf and I'm on my phone. Ill check it tommorow.
I'm just wondering how you found my camera? I had to search the internet for a slogan on the back of the instructions that came with it to find the company that made it, easynp.

bben95 · Answer 10 · 2010-12-18T16:38:55+00:00

Yeah it was a good buy for the price. It's just not that reliable. lol I suppose you get what you pay for.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 11 · 2010-12-18T22:20:15+00:00

Ben, which aspect is not reliable? I need a couple of cams for home security and had started to consider this model.

Airshow

bben95 · Answer 12 · 2010-12-18T23:11:47+00:00

You can't access the live stream on the page with controls after about a day of running it on the WiFi. You can still access the videostream.cgi from outside your network but that can be slow and won't work if your internet fails, and uses bandwidth.(Only a problem if you have a limit) Not being able to access the page to control it means you cannot move it. (Unless you use the commands such as http://ipcamaddress/decoder_control.cgi?user=bla&pwd=1234&twostep=1&command=6)

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 13 · 2010-12-19T01:16:43+00:00

OK, thanks. Sounds like networking issues rather than the device itself. Could even be external to the cam, eg. firewall or router setup, but strange that it should fail after running for a day.

Anyway, that's less worrying to me than, say, motor failure. I may still get one and try it out.

Ta.

Airshow

bben95 · Answer 14 · 2010-12-19T01:37:37+00:00

I don't think it is networking issues as I have quite a few devices I run on my quite large network and none of them have any trouble. Something about whatever runs the WiFi is unstable or maybe the web server itself. I just pinged it and it had no response and did "arp -a" on cmd and it didn't show it but now its come back on. Its strange how it spontaneously does that sometimes.

And you can see more about the webcam on my website here

By the way check out my webcam now. I've had snow. http://ip.benellis.info/snapshot.cgi?user=operator&pwd=test

Actually I have a slight suspicion that its overheating because when I used it in the garage it seemed to work fine.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 15 · 2010-12-19T02:19:40+00:00

Ben,

Intermittent WiFi - could it be nearby WiFi or non-WiFi interference?

Here's a checklist for non_WiFi sources.

Airshow

bben95 · Answer 16 · 2010-12-19T02:44:15+00:00

No I don't think its that because I can access it from outside the network but not inside it from my Ethernet connected laptop.

But it's still not loading the page fully so maybe you are right.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 17 · 2010-12-19T03:14:02+00:00

I would need to see a system configuration diagram.

Next time you lose communication from the laptop, try logging on at the computer that serves http://benellis.info, assuming (a) it's still receiving/serving the video and (b)it's on your network. That would at least help eliminate the laptop, its ethernet and maybe router from the equation.

bben95 · Answer 18 · 2010-12-19T03:32:01+00:00

The computer that serves benellis.info is not on my network. I have already plugged in the camera to the laptop so its working fine now and should do for around another day. I was thinking of doing a system configuration diagram (By that you mean a diagram of the devices on my network I suppose?) which I will put on my website and notify you on here.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 19 · 2010-12-19T04:10:21+00:00

... (By that you mean a diagram of the devices on my network I suppose?)

Yes exactly that, including router(s), wifi access points and wifi-connected devices.

bben95 · Answer 20 · 2010-12-19T04:44:16+00:00

Here it is:
http://benellis.info/web_images/networkconfig.png

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 21 · 2010-12-19T06:15:03+00:00

Theories:

The cam might somehow slip from the Edimax to the Belkin (and back again?), and when on the Belkin, the laptop gets shut out (eg due to firewall settings).
(less likely) Some sort of "breakage" in the powerline/homeplug link arises, that only affects the web cam whilst leaving upstairs internet access intact.
(as you say) The cam itself just needs to be reset.

Both theories 1&2 would be consistant with loss of control from the laptop whilst image uploads to the outside world persist.

Next time control of the cam from the laptop fails, see if you can control it (or at least ping it) from the desktop machine, or from the laptop plugged directly into the Belkin. Tricky if the dropouts are short, so maybe recruit another family member to run checks from the desktop while do the same from the laptop (upstairs).

Airshow

bben95 · Answer 22 · 2010-12-19T06:31:27+00:00

1. Edimax and belkin have different SSIDs
2. The webcam is conected wirelessly directly to the belkin router so it dosen't go through the homeplugs anyway. When its not working I can still access other websites from the laptop.
3.I agree- the cam is just unreliable

any more theories?

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 23 · 2010-12-19T06:56:38+00:00

1. Edimax and belkin have different SSIDs ..... and both run in secure mode (I have to ask)?
2. The webcam is conected wirelessly directly to the belkin router so it dosen't go through the homeplugs anyway .... except when controlled from upstairs? When its not working I can still access other websites from the laptop. I've not used these devices and am only guessing that seletive failure might occur.
3. I agree- the cam is just unreliable Most likely but I want it to be a fixable network thing

bben95 · Answer 24 · 2010-12-19T07:09:22+00:00

1. Certainly WPA/WPA2 Mixed
2.Homeplugs are just like having an ethernet cable but they go through the mains, and arent as fast. So when controlling the webcam from upstairs, it will go through the router and the homeplugs to the laptop, unless I access it using ip.benellis.info from the inside, it goes out and back in, as im sure you know. That could be the problem, but I doubt it as it runs very slowly when accessing it from outside if its not working inside, and often dosent load most of the images.
3.lol

btw sorry about my poor grammar and punctuation but i cant be bothered when writing a lot.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 25 · 2010-12-19T07:40:23+00:00

In that case, I'm all out of ideas ... for now.

btw sorry about my poor grammar and punctuation but i cant be bothered when writing a lot.

:cool

I must catch some zzzzzzs.

bben95 · Answer 26 · 2010-12-20T03:11:06+00:00

Check the webcam now, its not working again

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 27 · 2010-12-20T03:31:49+00:00

It's timing out on the site-check, which means the fault is most likely with http://ip.benellis.info, not the cam.

Airshow

bben95 · Answer 28 · 2010-12-20T03:38:13+00:00

I've tried it internally too and it doesn't work. There's nothing wrong with the dns side of things