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

Question

打算用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);
    };

Answer 1

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

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

Answer 2

我的也是这个问题， revokeObjectURL（url）不起作用， 浏览器1个小时左右崩溃， 我传的是8路的视频流

Answer 3

我也遇到这个问题。我就是使用data url，将抓取的图片转为base64，通过socket传给browser，然后使用image.src获取base64编码的图片。但是也会有这个问题。1s两帧的流，chrome就会飙升1~2M