如何使用vue实现录制视频并压缩视频文件

本篇内容介绍了"如何使用vue实现录制视频并压缩视频文件"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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

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

二、下载依赖包：

npm i timers

三、在页面中声明：

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

四、html代码块：

五、在页面加载完成时初始化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.onload = 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本身存在视频压缩，所以我这里做了区分

"如何使用vue实现录制视频并压缩视频文件"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！