获取视频流封面

// 264,265视频格式可用

let res = await axios({

        method: "get",

        url:  请求地址,

        responseType: "arraybuffer",

      });

      const bufferUrl = btoa(

        new Uint8Array(res.data).reduce(

          (data, byte) => data + String.fromCharCode(byte),

          ""

        )

      );

      this.imgUrl = "data:image/png;base64," + bufferUrl;

    // m3u8视频格式可用（播放完了才能取视频封面）

    // m3u8视频格式单独播放

    if (this.video.deviceType == 5) {

      if (Hls.isSupported()) {

        this.m3u8Player = "video" + this.video.id;

        // 获取 video 标签

        this.nativeVideo = document.getElementById(this.m3u8Player);

        // 实例化 Hls 对象

        var hls = new Hls();

        // 传入路径

        hls.loadSource(this.video.ysLiveAddress);

        hls.attachMedia(this.nativeVideo);

        hls.on(Hls.Events.MANIFEST_PARSED, function () {

          this.nativeVideo.play(); // 调用播放 API

          console.log(this.showCover);

        });

      } else {

        alert("不支持HLS");

      }

      if (this.showCover) {

        setTimeout(() => {

          // 创建一个<canvas>元素

          let canvas = document.createElement("canvas");

          let ctx = canvas.getContext("2d");

          // 设置<canvas>的宽高与视频一致

          canvas.width = this.nativeVideo.videoWidth;

          canvas.height = this.nativeVideo.videoHeight;

          // 将视频帧绘制到<canvas>

          ctx.drawImage(this.nativeVideo, 0, 0, canvas.width, canvas.height);

          // 将<canvas>转换为图片

          var imgDataUrl = canvas.toDataURL("image/png");

          this.imgUrl = imgDataUrl;

          if (imgDataUrl == "data:,") this.noVideoPlayHiddenImg = true;

          // 关掉视频展示封面

          this.nativeVideo && this.nativeVideo.pause();

          this.showVideo = false;

        }, 1000);

      }

    }