使用浏览器websocket接收图片,如何释放内存


打算用websocket做一个简单的视频直播,服务器端用python做的,从摄像头不断的抓图片,然后传送给浏览器,通信用websocket。现在遇到的问题是,服务器端抓到的图片可以传送给浏览器,浏览器也可以显示出来,但是浏览器占用的内存非常大,1秒传一帧,浏览器占用的内存就能飙升1~2M左右,没多久浏览器就崩溃了,而一帧图片传过来的数据也不过25k左右(用blob的size属性查看的)。
网上说可以用URL.revokeObjectURL()来释放对象,但是我增加了这句代码,似乎不起作用
请教诸位大侠如何处理这个问题。

附浏览器显示图片代码:


 socket.onmessage = function (msg) {

        var canvas = document.getElementById("Canvas");
        var context = canvas.getContext("2d");
        var image = new Image();

        image.onload = function () {
            context.clearRect(0, 0,
               canvas.width, canvas.height);
            context.drawImage(image, 0, 0, canvas.width,canvas.height);
            window.URL.revokeObjectURL(image.src)
        }
        image.src = URL.createObjectURL(msg.data);
    };

websocket 视频 图片 JavaScript

天、使→恶,魔 10 years, 5 months ago

从代码看貌似没什么问题,如果真的内存泄露了,那应该是浏览器的问题吧。

其实可以考虑直接通过传 data uri 来规避这个问题,服务器那边使用字符串的方式传图片信息,格式为: data:image/png;base64, 加上 base64 编码的 png 文件内容。使用的时候直接用 image.src = data 就行,省去调用 createObjectURL/revokeObjectURL 的麻烦。

你有药啊? answered 10 years, 5 months ago

Your Answer