vue 录制视频并压缩视频文件的方法
2020-11-27
来源：爱go旅游网
文件上传框<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" :src="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.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本身存在视频压缩，所以我这里做了区分
<template>
<div>
<input ref="changeInput" type="file" accept="video/*" capture="user" @change="changeVideo" />
<div>
<div>视频大小：{{videoSize}}</div>
<div>视频时长：{{videoLength}}</div>
<div>
<video id="myvideo" :src="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.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);
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>
试过很多种方法，而这种在移动端浏览器（特别是微信浏览器！）的兼容性是最好的。但是这个生成的视频文件将会失去音频，如果需要音频的可以看我另一篇简书有说明几种方法。有更好的方法欢迎大家留言，互相学习~