vue 錄制視頻并壓縮視頻文件的方法
更新時間：2018年07月27日 10:40:48 作者：Lucia_Huang
這篇文章主要介紹了vue 錄制視頻并壓縮視頻文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
文件上傳框<input type="file">，除了可以選擇文件上傳之外，還可以調(diào)用攝像頭來拍攝照片或者視頻并上傳。capture屬性可以判斷前置or后置攝像頭。在視頻播放的過程中，用canvas定時截取一張圖片，然后用gif.js生成一張GIF圖，從而完成前端的視頻壓縮。
我這里使用的是Vue寫的，以下是我的流程及代碼：
一、下載gif.js相關(guān)文件，可以到這里下載，然后將這幾個文件放在根目錄的static/js里面。
gif.js相關(guān)文件及存放路徑
二、下載依賴包：
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錄制完視頻返回頁面中，獲取到這個視頻文件，每次拿到視頻文件需要先移除之前的監(jiān)聽：
//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方法，是通過這個視頻文件，在頁面播放一遍，在這個播放過程處理視頻，完成整個轉(zhuǎn)換過程，獲取到最終的文件：
//安卓拍攝視頻
androidFile(file){
//視頻字節(jié)大小
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轉(zhuǎn)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);
//獲取到所有的圖片并渲染完后執(zhí)行
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;
//畫布上畫視頻，需要動態(tài)地獲取它，一幀一幀地畫出來
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將圖片堆疊的動態(tài)圖渲染出來：
//視頻播放完
videoEnded(){
this.gifSetTime = false;
console.log("視頻播放完畢！")
this.gif.render();
},
十、步驟七所說的that.convertBase64UrlToFile方法。將gif.js生成的Blob文件轉(zhuǎn)換成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方法，上傳圖片給服務(wù)器：
//上傳視頻
uploadVideo(file){
console.log("上傳的視頻文件", file)
},
在這提供我的全部代碼，Android的視頻文件比較大所以做壓縮，而IOS本身存在視頻壓縮，所以我這里做了區(qū)分
<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;
//視頻字節(jié)大小
this.videoSize = file.size;
var url = null ;
//file轉(zhuǎn)換成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秒內(nèi)');
}else{
this.$vux.toast.text('視頻錄制不能少于5秒');
}
},
//安卓拍攝視頻
androidFile(file){
//視頻字節(jié)大小
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轉(zhuǎn)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;
//畫布上畫視頻，需要動態(tài)地獲取它，一幀一幀地畫出來
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>
試過很多種方法，而這種在移動端瀏覽器（特別是微信瀏覽器！）的兼容性是最好的。但是這個生成的視頻文件將會失去音頻，如果需要音頻的可以看我另一篇簡書有說明幾種方法。有更好的方法歡迎大家留言，互相學習~
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了elementui實現(xiàn)表格自定義排序的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
Element Table的row-class-name無效與動態(tài)高亮顯示選中行背景色
這篇文章主要介紹了Element Table的row-class-name無效與動態(tài)高亮顯示選中行背景色，本文詳細的介紹了解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了VUE+Element實現(xiàn)增刪改查的示例源碼，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了vue中安裝使用cesium方式(親測可用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細,寫這篇文章的目的就是詳細的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細講解的相關(guān)資料,需要的朋友可以參考下2022-11-11
下面小編就為大家分享一篇vue里面父組件修改子組件樣式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
SpringBoot實現(xiàn)全局和局部跨域的兩種方式
本文主要介紹了SpringBoot實現(xiàn)全局和局部跨域的兩種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
Vue中的assets和static目錄:使用場景及區(qū)別說明
這篇文章主要介紹了Vue中的assets和static目錄:使用場景及區(qū)別說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue Element-ui實現(xiàn)樹形控件節(jié)點添加圖標詳解
這篇文章主要為大家介紹了Element-ui實現(xiàn)樹形控件節(jié)點添加圖標，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了vue中使用render封裝一個select組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09