html页面转视频-通过canvas动画转视频方案

需求背景

一个年终活动页面，通过swiper来进行上下翻页形式的，需要转化成一个可供用户分享的视频，调研后实现方案有

1. 前端将每个swiper页截图，然后将所有截图生成canvas动画，依次展示效果，在将canvas动画转成blob格式视频，将视频上传服务端，返回链接，展示给用户。这种方式对服务端压力小，但是视频静音。

2. 前端将每个swiper页截图，然后将所有截图传给服务端，服务端通过ffmpeg来将图片组合成视频，可在加音频。

此处只讲方案一，方案二对前端来说是方案一中的一部分。

方案一用到的方法有，html2canvas：html转bese64图片，canvas.captureStream：录canvas绘制动画，MediaRecorder：将canvas动画转成视频

实现步骤

1. 将swiper中的各个页面转成图片

页面中元素定义动态id ，后通过html2canvas进行图片绘制，导出数据到imgurl中，imgurl中存储的数据为每一页swiper导出的base64格式的图片数组。

testToCanvas () {
   this.$nextTick(() => {
        for (let i = 1; i <= this.id; i++) {
          console.log(this.$refs['slide' + i]);
          html2canvas(document.getElementById('page' + i), {
            width: 828,
            height: 1788,
            logging: true,
            useCORS: true,
            x: 0,
            y: 0
          }).then((canvas) => {
            this.imgurl.push(canvas.toDataURL('image/png'));
          });
        }
        this.drawTestimg(); //此方法是导出后的图片进行canvas动画绘制
      });
    },

2. 将导出的图片数组进行canvas动画绘制

核心在于通过ctx.drawImage 将图片绘制到canvas上，然后通过定时器和遍历来进行canvas画布的清除（上一张图）和重新绘制（下一张图），这样就使上面导出的图片在canvas上显示出了切换的动画效果。

drawTestimg () {
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');
      this.shakeImg(canvas, ctx, this.imgIndex);
      let timer = setInterval(() => {
        this.shakeImg(canvas, ctx, this.imgIndex);
        if (this.imgIndex > this.id) {
          this.imgIndex = 1;
        //   clearInterval(timer);
        }
      }, 100);
      setTimeout(() => {
        clearInterval(timer);
      }, 10000);
      this.videoCreat();
},
shakeImg (canvas, ctx) {
      var w = canvas.width;
      var h = canvas.height;
      ctx.clearRect(0, 0, w, h);//清空画布，准备画下一张
      let img2 = new Image();
      img2.src = this.imgurl[this.imgIndex - 1];
      img2.onload = function () {
        ctx.drawImage(img2, 0, 0, 828, 1788, 0, 0, 828, 1788);
      };
      this.imgIndex ++;
},

3.录制canvas的绘画过程 & 将录制后的文件导出成视频格式（blob）

因为MediaRecorder（canvas转视频）对象导出的视频格式，在各个浏览器和手机端的兼容性不一致，所以需要通过方法来判断一下兼容的可播放的格式。

最后通过URL.createObjectURL 转化视频格式

videoCreat () {
      const videoTypes = ['webm', 'ogg', 'mp4', 'x-matroska'];
      const codecs = ['should-not-be-supported', 'vp9', 'vp9.0', 'vp8', 'vp8.0', 'avc1', 'av1', 'h265', 'h.265', 'h264', 'h.264', 'opus', 'pcm', 'aac', 'mpeg', 'mp4a'];
    // 判断兼容性，取第一项
      let support = this.getSupportedMimeTypes('video', videoTypes, codecs);
      console.log(support);
      const canvas = document.getElementById('myCanvas');
      const stream = canvas.captureStream(25);
      const recorder = new MediaRecorder(stream, {mimeType: support[0]});
      const data = [];
      recorder.ondataavailable = function (event) {
        if (event.data && event.data.size) {
          data.push(event.data);
        }
      };
      recorder.onstop = () => {
        setTimeout(() => {
          const url = URL.createObjectURL(new Blob(data, { type: support[0] }));
          document.querySelector('#videoContainer').style.display = 'block';
          document.querySelector('video').src = url;
        }, 2000);
      };
      recorder.start();
      setTimeout(() => {
        console.log('stop');
        recorder.stop();
      }, 10000);
    },
//导出当前浏览器支持的格式
getSupportedMimeTypes(media, types, codecs) {
      const isSupported = MediaRecorder.isTypeSupported;
      const supported = [];
      types.forEach((type) => {
        const mimeType = `${media}/${type}`;
        codecs.forEach((codec) => [
          `${mimeType};codecs=${codec}`,
          `${mimeType};codecs=${codec.toUpperCase()}`
        ].forEach(variation => {
          if (isSupported(variation)) { supported.push(variation); }
        }));
        if (isSupported(mimeType)) { supported.push(mimeType); }
      });
      return supported;
   }

4. 上传至服务器，生成链接返回客户端播放

上面生成的blob格式视频已经在前端可播放，如果需要用户下载视频或者其他需求需要视频上传到服务器的，需要将生成的二进制视频上传给服务端。