1

I want to check if I have a connection to my webcam in the same network. At the moment I include it with this js code:

document.write('<IMG id="camera" width="' + view_w + '" height="' + view_h + '" SRC="http://192.168.1.195/GetData.cgi?CH=1"');

It works well! Now I turned off the router. After a few second is the stream away. Now I want to check it every 500ms. When I use this code: 

$(document).ready(function(){
    $('#camera').load(function(){
        alert("loaded");
    });

    $('#camera').error(function(){
        alert("not loaded");
    });
});

It works well, and I get an alert window on the screen (both events works!).

Now I placed this into a intervall, but it don't work.

$(document).ready(function(){
    setInterval(function(){
        $('#camera').load(function(){
            alert("loaded");
        });

        $('#camera').error(function(){
            alert("not loaded");
        });
    }, 500);
});

What is the problem with the last code snippet?

MyNewName
  • 1,035
  • 2
  • 18
  • 34
  • So you want to check if the stream is available every 500ms? – n0idea Nov 26 '15 at 13:11
  • A stream is not a finite picture that triggers the load event. The load event is triggered when the image finishes loading. You cannot interrogate the state of the stream from an image. Also NEVER alert in an interval loop – mplungjan Nov 26 '15 at 13:11
  • The interval will only fire the first time after the first 500ms, by then your img is probably loaded – MJC Nov 26 '15 at 13:11
  • Yes, I want to check every 500ms if the stream is available. But the event will fire, if it can't be loaded anymore? – MyNewName Nov 26 '15 at 13:14
  • The image is loaded once, so it either is loaded or there's an error. Unless you are "refreshing" (let's say, changing the url of the image - maybe a random number in the query string) it will only happen once. – MJC Nov 26 '15 at 13:16
  • @MarioCesar thanks for the answer! How can I check something like this then? Because I dont want to add every 500ms the `IP Address` to the `src` element. Because I thought the correct way is to check if its loaded corretly then do nothing, and if an error occurs update the `src` element. (If I updata the `src` every 500ms without checking, I can turn the router off then the image is away and after turn the router on, the stream will displayed) – MyNewName Nov 26 '15 at 13:20
  • Maybe you can do an AJAX call to your webcam on the interval, instead of do it on load. – Adrian Menendez Nov 26 '15 at 13:22
  • @AdrianMenendez yeha I will try it! Maybe it works. – MyNewName Nov 26 '15 at 13:24
  • Related, yet unanswered: http://stackoverflow.com/questions/12313309/check-motion-jpeg-stream – thmshd Nov 26 '15 at 13:26

1 Answers1

2

Try something like this:

$(document).ready(function(){

var imgSrc = 'http://192.168.1.195/GetData.cgi?CH=1';

$('#camera').load(function(){
    alert("loaded");
    createTimeout();        
});

$('#camera').error(function(){
    alert("not loaded");
    createTimeout();
});


function changeImgSrc(){
    $('#camera').attr('source', imgSrc + '&_random=' + new Date().getTime());
};

function createTimeout(){
    setTimeout(function(){
        changeImgSrc();
    }, 500)
};

//first execution
changeImgSrc();      
});

I didn't try this code.

MJC
  • 3,871
  • 4
  • 23
  • 34