如何在浏览器内存不足的情况下使用 <img> 标签嵌入 mjpg 流

Question

我为 mjpg 流使用

<img>

标签的原因是我能够使用 css 调整图像的大小。然而，让它运行一段时间后，浏览器崩溃，因为它的内存不足。

我目前正在使用

URL.revokeObjectURL(mjpgURLwithOutdatedRandomParam)

并每隔几秒向 URL 添加一个新的随机参数。但不幸的是，当前的 Chrome 仍然崩溃，

Out of Memory

.

我也试过将流加载到画布中，但过了一会儿浏览器仍然内存不足：

const canvas = document.getElementById('canvas');
const image = new Image();

image.src = 'http://example.com';

const FRAME_RATE = 30;

image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;

  setInterval(function() {
    const context = canvas.getContext('2d');
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
  }, 1000 / FRAME_RATE);
};

<canvas id="canvas"></canvas>

有什么简单/最佳的解决方案？

PS：我不明白浏览器如何支持 mjpg（在

<img>

标签内）但不准备处理内存...