Question

我正在使用jQuery脚本定期更新网页中src元素的<img>属性。我遇到的问题是图片并不总是在setInterval更新，但这只在我的网页上。直接访问摄像头UI会显示实际更新频率更高。

为什么会发生这种情况，是否有更好的解决方案来实现我的目标？

这是脚本：

$(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标记，以防HTML中有更好的解决方案。

相机型号为BB-ST162A

Answer 1

首先，不保证在js中执行setInterval 在延迟之后完全安排。在你的情况下，这意味着它也可以在五秒半之后安排。
其次，网络通常在传输期间有延迟，因此您的网页可能需要一些秒（如果连接速度不够快）下载每个＆＃34;框架＆＃34; （图像）。
第三，从UI直接访问您的相机可能在UDP协议下（您的请求似乎是在HTTP下等等） TCP），你知道UDP比TCP快，即使UDP可能会错过一些帧。

我希望这会给你提供见解，但如果你需要其他解释，我很乐意回答。我为我的英语道歉，但这不是我的母语。

评论后修改：

我想到了两个解决方案，但我不确定它们是否有效。

第一个解决方案 - 尝试通过Image对象加载图像asyncronusly：

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

第二种解决方案：尝试仅使用Image Object获取连续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();
}

为什么我的IP摄像头图像有时会更快地更新？

1 个答案: