vue 錄制視頻并壓縮視頻文件的方法
更新時(shí)間：2018年07月27日 10:40:48 作者：Lucia_Huang
這篇文章主要介紹了vue 錄制視頻并壓縮視頻文件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
文件上傳框<input type="file">，除了可以選擇文件上傳之外，還可以調(diào)用攝像頭來拍攝照片或者視頻并上傳。capture屬性可以判斷前置or后置攝像頭。在視頻播放的過程中，用canvas定時(shí)截取一張圖片，然后用gif.js生成一張GIF圖，從而完成前端的視頻壓縮。
我這里使用的是Vue寫的，以下是我的流程及代碼：
一、下載gif.js相關(guān)文件，可以到這里下載，然后將這幾個(gè)文件放在根目錄的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>視頻時(shí)長：{{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>
五、在頁面加載完成時(shí)初始化GIF：
mounted(){
//初始gif
this.gif = new GIF({
workers: 1,
quality: 1000,
width: window.innerWidth,
height: window.innerHeight,
workerScript: '../../static/js/gif.worker.js',
});
},
六、當(dāng)input錄制完視頻返回頁面中，獲取到這個(gè)視頻文件，每次拿到視頻文件需要先移除之前的監(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方法，是通過這個(gè)視頻文件，在頁面播放一遍，在這個(gè)播放過程處理視頻，完成整個(gè)轉(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("視頻時(shí)長",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>視頻時(shí)長：{{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("視頻時(shí)長",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>
試過很多種方法，而這種在移動端瀏覽器（特別是微信瀏覽器?。┑募嫒菪允亲詈玫?。但是這個(gè)生成的視頻文件將會失去音頻，如果需要音頻的可以看我另一篇簡書有說明幾種方法。有更好的方法歡迎大家留言，互相學(xué)習(xí)~
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+elementplus前端生成圖片驗(yàn)證碼完整代碼舉例
在開發(fā)過程中有時(shí)候需要使用圖片驗(yàn)證碼進(jìn)行增加安全強(qiáng)度,在點(diǎn)擊圖片時(shí)更新新的圖片驗(yàn)證碼,記錄此功能,以便后期使用,這篇文章主要給大家介紹了關(guān)于vue3+elementplus前端生成圖片驗(yàn)證碼的相關(guān)資料,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue 開發(fā)企業(yè)微信整合,結(jié)合具體案例形式分析了vue.js使用企業(yè)微信JSSDK實(shí)現(xiàn)手機(jī)端程序可以和企業(yè)微信進(jìn)行整合功能的相關(guān)操作技巧,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了Vue中的$nextTick的相關(guān)資料，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
VUEJS實(shí)戰(zhàn)之利用laypage插件實(shí)現(xiàn)分頁（3）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之修復(fù)錯(cuò)誤并且美化時(shí)間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
Vue+Echart實(shí)現(xiàn)利用率表盤效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echart實(shí)現(xiàn)利用率表盤的效果，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的可以參考一下2023-04-04
這篇文章主要給大家介紹了關(guān)于vue中slot（插槽）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue如何實(shí)現(xiàn)路由跳轉(zhuǎn)到外部鏈接界面
這篇文章主要介紹了vue如何實(shí)現(xiàn)路由跳轉(zhuǎn)到外部鏈接界面，具有很好的參考價(jià)值，希望對大家有所幫助。2022-10-10
利用vue實(shí)現(xiàn)打印頁面的幾種方法總結(jié)
在項(xiàng)目里有個(gè)打印功能,將頁面的部分內(nèi)容打印出來,所以下面這篇文章主要給大家介紹了關(guān)于利用vue實(shí)現(xiàn)打印頁面的幾種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
本篇文章主要介紹了Vue調(diào)試神器vue-devtools安裝方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了vant-List-@load事件一直觸發(fā)的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01