应该如何正确播放“MJPEG”呢？

在网页中播放MJPEG视频流时，会出现闪屏，白屏等画面，到底应该如何播放呢?

MJPEG

问题描述：

某项目要求在本地运行，不能安装第三方软件或一些依赖等，也无法链接外网，有播放某监控画面的功能，而该监控推的视频流为“mjpeg”，该视频流在img标签内能直接播放，但在播放约2分钟左右后就会出现白屏，且在播放途中会出现闪屏画面。

MJPEG简介：

MJPEG全名为 "Motion Joint Photographic Experts Group"，是一种视频编码格式，中文名称翻译为“技术即运动静止图像（或逐帧）压缩技术”，其中每个帧都是独立的JPEG图片。

问题排查：

由于MJPEG是将每帧都转化为独立的图片，在调试工具中可看到该图片一直在不断的请求，频率极快，这就导致了页面也在以极快的频率进行刷新，一方面会造成性能瓶颈，另一方面大量的图片也可能会被游览器缓存，各种因素的叠加就造就了白屏等事故的出现，以上这只是我的猜测和推断。

解决办法：

以下方法不太靠谱，请参考另一篇文章：MJPEG

这是一个不是解决办法的办法，设置一个setTimeout的定时器，每隔一秒就主动修改一下图片的src地址，同时在请求参数中加上当前的时间戳防止游览器缓存，这会导致频繁请求，但不会出现白屏和闪屏。

<template>
  <div class="box">
    <img ref="imgRef" width="100%" height="550px"/>

  </div>
</template>

<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref} from "vue";

const imgRef = ref<HTMLImageElement | null>(null);

let timer = 0;
function updateImage() {
  if (!imgRef.value) return;
  imgRef.value.src = `请求地址?time=${new Date().getTime()}`;

  timer && clearTimeout(timer);
  timer = setTimeout(() => {
    updateImage();
  }, 1000);
}


onMounted(() => {
  updateImage();
});

onBeforeUnmount(() => {
  timer && clearTimeout(timer);
});
</script>

正如上文说所这是一个不是解决办法的办法，目前没有找到什么特别好的解决方法，如果各位大神还有什么别的方法，欢迎在下发留言讨论。