Vue：录制视频并压缩视频文件

文件上传框<input type="file">，除了可以选择文件上传之外，还可以调用摄像头来拍摄照片或者视频并上传。capture属性可以判断前置or后置摄像头。在视频播放的过程中，用canvas定时截取一张图片，然后用gif.js生成一张GIF图，从而完成前端的视频压缩。

我这里使用的是Vue写的，以下是我的流程及代码：

一、下载gif.js相关文件，可以到这里下载，然后将这几个文件放在根目录的static/js里面。

gif.js相关文件及存放路径

二、下载依赖包：

npm i timers

三、在页面中声明：

import { setInterval, clearInterval } from "timers";import GIF from "../../static/js/gif.js"

四、html代码块：

<template>  <div>
      <input ref="changeInput" type="file" accept="video/*" capture="user" @change="changeVideo" />
      <div>
        <div>视频大小：{{videoSize}}</div>
        <div>视频时长：{{videoLength}}</div>
        <div>
          <video id="myvideo" :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="videoSrc" :width="winWidth" :height="winHeight" ref="videoId" autoplay="true" controls muted></video>
          <canvas id="canvas" :width="winWidth" :height="winHeight"></canvas>
        </div>
      </div>
  </div></template>

五、在页面加载完成时初始化GIF：

mounted(){    //初始gif
    this.gif = new GIF({      workers: 1,      quality: 1000,      width: window.innerWidth,      height: window.innerHeight,      workerScript: '../../static/js/gif.worker.js',
    });
  },

六、当input录制完视频返回页面中，获取到这个视频文件，每次拿到视频文件需要先移除之前的监听：

//input文件走向
    changeVideo(e){      var file = e.target.files[0];      const video = document.getElementById('myvideo');      //视频开始播放
      video.removeEventListener('play', this.videoPlay, false);      //视频播放完
      video.removeEventListener('ended', this.videoEnded, false); 
      this.androidFile(file);
    },

七、上一步提到的this.androidFile方法，是通过这个视频文件，在页面播放一遍，在这个播放过程处理视频，完成整个转换过程，获取到最终的文件：

//安卓拍摄视频
    androidFile(file){      //视频字节大小
      this.videoSize = file.size;      const that = this;      const video = document.getElementById('myvideo');      const canvas = document.getElementById('canvas');      var context = canvas.getContext('2d');      this.gifSetTime = true;      this.gif.abort()      this.gif.frames = [];      //file转base64
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader. = function () {
        that.videoSrc = this.result;
        video.play();
      }      //视频开始播放
      video.addEventListener('play', this.videoPlay, false);      //视频播放完
      video.addEventListener('ended', this.videoEnded, false); 
      //获取到所有的图片并渲染完后执行
      this.gif.on('finished', function(blob) {        if(that.fileAndroid.size == blob.size) return;        console.log("gif的blob文件",blob);        //file
        that.fileAndroid = that.convertBase64UrlToFile(blob);        //上传视频文件
        that.uploadVideo(that.fileAndroid);
      });
    },

八、步骤七所说的this.videoPlay方法。视频在页面播放过程中，每200毫秒通过canvas截取一张图片，把这些图片一张张给gif.js堆叠：

//视频开始播放
    videoPlay(){      const that = this;      const video = document.getElementById('myvideo');      const canvas = document.getElementById('canvas');      var context = canvas.getContext('2d');      console.log("视频时长",video.duration);      this.videoLength = video.duration;        //画布上画视频，需要动态地获取它，一帧一帧地画出来
        var times = setInterval(function(){
            context.drawImage(video, 0, 0, that.winWidth, that.winHeight);
            that.gif.addFrame(context, {              copy: true
            });            if(that.gifSetTime == false){
              clearInterval(times);
            }
        }, 200);
    },

九、步骤七所说的this.videoEnded方法。视频播放完，通过gif.js将图片堆叠的动态图渲染出来：

//视频播放完
    videoEnded(){      this.gifSetTime = false;
      console.log("视频播放完毕！")      this.gif.render();
    },

十、步骤七所说的that.convertBase64UrlToFile方法。将gif.js生成的Blob文件转换成File格式：

//blob to file
    convertBase64UrlToFile(blob) {      var d = new Date().getTime();      var type = 'image/gif'
      return new File([blob],"fileGif-" + d + '.gif', {type:type});
    },

最后通过步骤七所说的that.uploadVideo方法，上传图片给服务器：

//上传视频
    uploadVideo(file){
      console.log("上传的视频文件", file)
    },

在这提供我的全部代码，Android的视频文件比较大所以做压缩，而IOS本身存在视频压缩，所以我这里做了区分

<template>
  <div>
      <input ref="changeInput" type="file" accept="video/*" capture="user" @change="changeVideo" />
      <div>
        <div>视频大小：{{videoSize}}</div>
        <div>视频时长：{{videoLength}}</div>
        <div>
          <video id="myvideo" :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="videoSrc" :width="winWidth" :height="winHeight" ref="videoId" autoplay="true" controls muted></video>
          <canvas id="canvas" :width="winWidth" :height="winHeight"></canvas>
        </div>
      </div>
  </div></template><script>import { setInterval, clearInterval } from "timers";import GIF from "../../static/js/gif.js"export default {
  data(){    return {      videoSize: '',      videoSrc: '',      videoLength: '',      isAndroid: false,      fileAndroid: {},      winWidth: window.innerWidth,      winHeight: window.innerHeight,      gifSetTime: false,      gif: '',
    }
  },
  created() {    //判断终端
    var u = navigator.userAgent;    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if(isAndroid){      console.log('isAndroid')      this.isAndroid = true;
    }else if(isiOS){      console.log('isiOS')      this.isAndroid = false;
    }
  },
  mounted(){    //初始gif
    this.gif = new GIF({      workers: 1,      quality: 1000,      width: this.winWidth,      height:this.winHeight,      workerScript: '../../static/js/gif.worker.js',
    });
  },  methods:{    //input文件走向
    changeVideo(e){      var file = e.target.files[0];      const video = document.getElementById('myvideo');      
      if(file !== undefined){        //判断走向
        if(this.isAndroid){          //视频开始播放
          video.removeEventListener('play', this.videoPlay, false);          //视频播放完
          video.removeEventListener('ended', this.videoEnded, false); 
          this.androidFile(file);
        }else{          this.iphoneFile(file);
        }
      }
    },    //IOS拍摄视频
    iphoneFile(file){      const that = this;      //视频字节大小
      this.videoSize = file.size;      
      var url = null ; 
      //file转换成blob
      if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
      } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
      } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
      }      this.videoSrc = url;      if(file.size < 2100000 && file.size > 500000){        this.uploadVideo(file);
      }else if(file.size >= 2100000){        this.$vux.toast.text('视频太大，请限制在10秒内');
      }else{        this.$vux.toast.text('视频录制不能少于5秒');
      }
    },    //安卓拍摄视频
    androidFile(file){      //视频字节大小
      this.videoSize = file.size;      const that = this;      const video = document.getElementById('myvideo');      const canvas = document.getElementById('canvas');      var context = canvas.getContext('2d');      this.gifSetTime = true;      this.gif.abort()      this.gif.frames = [];      //file转base64
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader. = function () {
        that.videoSrc = this.result;
        video.play();
      }      //视频开始播放
      video.addEventListener('play', this.videoPlay, false);      //视频播放完
      video.addEventListener('ended', this.videoEnded, false); 
      
      this.gif.on('finished', function(blob) {        if(that.fileAndroid.size == blob.size) return;        console.log("gif的blob文件",blob);
        that.fileAndroid = that.convertBase64UrlToFile(blob);
        that.uploadVideo(that.fileAndroid);
      });
    },    //视频开始播放
    videoPlay(){      const that = this;      const video = document.getElementById('myvideo');      const canvas = document.getElementById('canvas');      var context = canvas.getContext('2d');      console.log("视频时长",video.duration);      this.videoLength = video.duration;        //画布上画视频，需要动态地获取它，一帧一帧地画出来
        var times = setInterval(function(){
            context.drawImage(video, 0, 0, that.winWidth, that.winHeight);
            that.gif.addFrame(context, {              copy: true
            });            if(that.gifSetTime == false){
              clearInterval(times);
            }
        }, 200);
    },    //视频播放完
    videoEnded(){      this.gifSetTime = false;      console.log("视频播放完毕！")      this.gif.render();
    },    //blob to file
    convertBase64UrlToFile(blob) {      var d = new Date().getTime();      var type = 'image/gif'
      return new File([blob],"fileGif-" + d + '.gif', {type:type});
    },    //上传视频
    uploadVideo(file){      console.log("上传的视频文件", file)
    },
  }
};</script><style scoped></style>

试过很多种方法，而这种在移动端浏览器（特别是微信浏览器！）的兼容性是最好的。但是这个生成的视频文件将会失去音频

作者：Lucia_Huang
链接：https://www.jianshu.com/p/49937db0b958