优化播放“MJPEG”时出现的白屏现象

你是否遇到过此类事呢？MJPEG只能被img标签播放，播放久了后甚至会出现画面白屏情况，如果你也遇到了和我一样的情况，不妨进来看看我的解决方法。

“MJPEG”解决方案

前言：

该方法也许算不上好，但能解决目前博主遇见的问题，经实测运行一夜后画面仍然能正常播放，未出现卡顿，画面白屏等异常情况，如果你也没有其它方案，不妨参考一下。

解决方法：

使用canvas进行绘制。

原代码：

<template>
  <div class="video">
    <canvas ref="leftRef"></canvas>
    <canvas ref="rightRef"></canvas>
  </div>
</template>

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


const leftRef = ref<HTMLCanvasElement | null>(null);
const rightRef = ref<HTMLCanvasElement | null>(null);

class drawImg {
  ctx: CanvasRenderingContext2D | null;
  target: HTMLCanvasElement;
  img: HTMLImageElement;
  url: string;

  constructor(target: HTMLCanvasElement, url: string) {
    this.target = target;
    this.url = url;

    this.init();
  }

  init() {
    this.ctx = this.target.getContext("2d");

    this.img = new Image();
    this.img.onload = () => {
      this.target.width = this.img.width;
      this.target.height = this.img.height;

      this.ctx && this.ctx.drawImage(this.img, 0, 0);
      this.updateImg();
    };

    this.img.src = this.url;
  }
  
  // 每隔100毫秒更新一次
  updateImg() {
    setTimeout(() => {
      this.ctx && this.ctx.drawImage(this.img, 0, 0);
      this.updateImg();
    }, 100);
  }
}

onMounted(() => {
  // 传入canvas节点，和播放链接
  rightRef.value && new drawImg(rightRef.value, url);
});
</script>