如何用<img>标签嵌入MJPG流且避免浏览器内存溢出

1. 复用Image对象+适配浏览器渲染周期 #

不要频繁创建新Image或生成新ObjectURL，复用单个Image对象，结合requestAnimationFrame替代setInterval（更贴合浏览器渲染节奏，减少无效绘制），同时在更新源前主动清空旧src，帮助垃圾回收：

const canvas = document.getElementById('canvas');
const image = new Image();
// 跨域场景需添加，根据实际情况调整
// image.crossOrigin = 'anonymous';

let renderFrameId;

// 帧绘制逻辑
function renderFrame() {
  const ctx = canvas.getContext('2d');
  if (image.complete) {
    // 可选：固定canvas尺寸减少内存波动，比如设置为目标显示大小
    // canvas.width = 640;
    // canvas.height = 480;
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  }
  renderFrameId = requestAnimationFrame(renderFrame);
}

// 更新图片源，添加随机参数避免缓存
function refreshStream() {
  // 先清空旧源，触发GC回收旧帧内存
  image.src = '';
  image.src = `http://example.com?ts=${Date.now()}`;
}

// 首次加载并启动渲染
image.onload = () => {
  if (!renderFrameId) renderFrame();
};
refreshStream();

// 定时刷新流（间隔根据实际帧率调整，不用太频繁，比如2秒一次）
setInterval(refreshStream, 2000);

// 页面卸载时清理资源
window.addEventListener('beforeunload', () => {
  cancelAnimationFrame(renderFrameId);
  image.src = '';
});

2. 服务器端配合禁用缓存 #

让服务器给MJPG流响应添加Cache-Control: no-cache, no-store和Pragma: no-cache头，避免浏览器缓存历史帧，从源头减少内存堆积。

3. 限制渲染分辨率 #

如果不需要原始高清流，直接固定canvas的显示尺寸，绘制时缩放帧画面，大幅降低单帧内存占用：

// 固定canvas为目标尺寸
canvas.width = 640;
canvas.height = 480;
// 绘制时自动缩放
ctx.drawImage(image, 0, 0, 640, 480);

浏览器支持MJPG流，但内存溢出问题主要源于以下几点：

• MJPG流是连续JPEG帧的序列，部分浏览器的解析器为了保证播放流畅，会缓存一定数量的历史帧应对网络波动，但长期运行时缓存帧会持续堆积，超过内存阈值后崩溃。
• 使用URL.createObjectURL时，即使调用revokeObjectURL，浏览器垃圾回收（GC）不会立即执行，若Image对象仍持有旧URL引用，内存无法及时释放。
• 早期的setInterval绘制方案会导致渲染队列堆积，加上Image对象持续加载新帧但旧帧未被回收，内存占用持续上涨。

内容的提问来源于stack exchange，提问作者Simon Ferndriger