Why is my IP camera image sometimes updating really slowly?

Question

I am using a jQuery script to periodically update the src attribute of an <img> element in a web page. The problem I am experiencing is that the image is not always updated at the setInterval, but this is only in my web page. Accessing the camera UI directly shows that it is actually updating much more frequently.

Why is this happening, and is there a better solution to achieve what I am attempting?

Here's the script:

$(document).ready(function(){
    var user = "usename";
    var pass = "password";
    var IP = "1.2.3.4";

    var cameraFeed = "http://" + user + ":" + pass + "@" + IP + "/cgi-bin/camera?resolution=270&quality=1";

    var topImage = $('#topImage');

    setInterval(function(){
        d = new Date();
        topImage.attr('src', cameraFeed + "&timestamp=" + d.getTime());
    }, 5000);
});

HTML:

<img id="topImage" width="274px">

html tag in case there is a better solution based in the HTML.

The camera model number is BB-ST162A

Answer 1

• First of all, the execution of setInterval in js is not guaranteed to be scheduled exactly after the delay. In your case this mean that it can be scheduled also after five and a half seconds.
• Second, the network usually has delay during trasmission, so your webpage may need some seconds (if the connection isn't fast enough) to download each "frame" (image).
• Third, access directly to your camera from the UI may be under UDP protocol (your request seems to be under HTTP and so TCP), as you know UDP is faster than TCP even if UDP may miss some frames.

I hope this gives you insight, but if you need some other explanation I'll be glad to answer. I apologise for my english but it is not my mother tongue.

Edit after comments:

I thought of two solutions, but I'm not sure they'll work.

First solution - try loading image asyncronusly by Image object:

$(document).ready(function(){
    var user = "usename";
    var pass = "password";
    var IP = "1.2.3.4";

    var cameraFeed = "http://" + user + ":" + pass + "@" + IP + "/cgi-bin/camera?resolution=270&quality=1";



    setInterval(function(){
        d = new Date();
       var img=new Image();
       img.src=
       img.onload = function() {
        var topImage = $('#topImage');
         topImage.attr('src',this.src );
       };
       img.source=cameraFeed + "&timestamp=" + d.getTime();
    }, 1000);
});

Second solution: try using only Image Object to get a continuous feed:

function loadImage(){
           var user = "usename";
           var pass = "password";
           var IP = "1.2.3.4";
           var cameraFeed = "http://" + user + ":" + pass + "@" + IP + "/cgi-bin/camera?resolution=270&quality=1";
           var d = new Date();
           var img=new Image();
           img.src=
           img.onload = function() {
            var topImage = $('#topImage');
             topImage.attr('src',this.src );
             loadImage(); //here you can put a setTimeout to wait some time before start downloading the next "frame"
           };
           img.source=cameraFeed + "&timestamp=" + d.getTime();
}
$(document).ready(function(){
  loadImage();
}