如何防止浏览器存储Blob？

Question

我有一个低内存设备（一些便宜的Windows平板电脑）运行Firefox，以显示一个内部网站，其中有一些实时摄像头源。该网站不断崩溃Firefox似乎是因为浏览器保存了创建的每个Blob。下面是我有一个区间，它抓住服务器的最新帧：

setInterval( function () {
    if ( frontShown ) {
        fetch( 'http://192.168.7.2:888/image/Main' ).then( function ( response ) {
            return response.blob();
        } ).then( function ( myBlob ) {
            var objectURL = URL.createObjectURL( myBlob );
            FrontDoorVideo.src = objectURL;
        } );
    } else {
        fetch( 'http://192.168.7.2:888/image/Back' ).then( function ( response ) {
            return response.blob();
        } ).then( function ( myBlob ) {
            var objectURL = URL.createObjectURL( myBlob );
            BackDoorVideo.src = objectURL;
        } );
    }
}, 500 );

附件是填充Chrome DevTools中“来源”标签的Blobs的屏幕截图：

网络标签的屏幕截图：

如何阻止浏览器缓存所有这些blob？我在考虑一个服务工作者，它会在每次新的提取时从缓存中删除。

Answer 1

主要问题是Object-URL会被保留在内存中，直到它被撤销。

尝试做：

var objectURL = URL.createObjectURL( myBlob );
FrontDoorVideo.onload = revokeURL;   // add onload handler before src
FrontDoorVideo.src = objectURL;

然后使用通用处理程序：

function revokeURL() {
  URL.revokeObjectURL(this.src);     // remove URL reference
}