Question

我的情况（非常简化）如下：

在单个页面中，我有 n ipcam对象。每个ipcam对象都有自己的div，每次收到上一张图像时都会更新ipcam的图像。
一个javascript函数调用一个php文件（传递ipcam的id作为参数）返回带有套接字请求的图像（在选择该特定id [ip，端口，身份验证，用户名，密码等等]的设置之后] ）。

Javascript代码（简化）

//called by a timer 
function refresh_ipcam(id){

    if(parseInt($("#"+id).attr('refresh_finished')) == 1){

        $("#"+id).attr('refresh_finished',0);

        var img = new Image(....);
        var x = new Date().getTime();
        img.src = "get_image.php?id="+id+"&random="+x;

        img.onload = function(){
            $("#"+id).html(img);
            $("#"+id).attr('refresh_finished',1);
        }
        img.onerror = function(e){
            setTimeout(function(e){
                $("#"+id).attr('refresh_finished',1);
            },2000)
        }
    }
}

通过添加随机参数，浏览器始终会检测到新图像。通过这种方式我解决了一个问题（图像没有正确更新缓存问题）。但我认为，鉴于提出的请求数量很多，这种方式还存在另一种问题。

有些用户报告了浏览器的阻止（一段时间后）。这可能是与完整缓存相关的问题吗？

从谷歌Chrome控制台，在应用程序＆gt;框架＆gt;图片部分，我注意到每个请求（get_image.php）都匹配此列表中的新元素。

Answer 1

看起来基于图像源操作的解决方案效果不佳。他们使用大量内存甚至可能导致浏览器崩溃。可能你需要考虑live streaming web video。

有关详细信息，请查看：

Refresh image with a new one at the same url讨论，特别是Aya的answer。
Could the HTML 5 Video tag source come from streaming IP cam?讨论
Video Streaming Website Development讨论
36142 - manipulating img src via javascript will generate a massive memory leak和570268 - ImageResource keeps memory alive without telling v8 Chromium错误

多个ipcam请求可以阻止浏览器吗？

1 个答案: