vue 錄制視頻并壓縮視頻文件的方法
文件上傳框<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í)長(zhǎng):{{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í)長(zhǎng)",video.duration); this.videoLength = video.duration; //畫布上畫視頻,需要?jiǎng)討B(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將圖片堆疊的動(dòng)態(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í)長(zhǎng):{{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('視頻太大,請(qǐng)限制在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í)長(zhǎng)",video.duration); this.videoLength = video.duration; //畫布上畫視頻,需要?jiǎng)討B(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>
試過很多種方法,而這種在移動(dòng)端瀏覽器(特別是微信瀏覽器?。┑募嫒菪允亲詈玫摹5沁@個(gè)生成的視頻文件將會(huì)失去音頻,如果需要音頻的可以看我另一篇簡(jiǎn)書有說明幾種方法。有更好的方法歡迎大家留言,互相學(xué)習(xí)~
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
elementui實(shí)現(xiàn)表格自定義排序的示例代碼
本文主要介紹了elementui實(shí)現(xiàn)表格自定義排序的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07Element Table的row-class-name無效與動(dòng)態(tài)高亮顯示選中行背景色
這篇文章主要介紹了Element Table的row-class-name無效與動(dòng)態(tài)高亮顯示選中行背景色,本文詳細(xì)的介紹了解決方案,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11VUE+Element實(shí)現(xiàn)增刪改查的示例源碼
這篇文章主要介紹了VUE+Element實(shí)現(xiàn)增刪改查的示例源碼,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-11-11可能是全網(wǎng)vue?v-model最詳細(xì)講解教程
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細(xì),寫這篇文章的目的就是詳細(xì)的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下2022-11-11SpringBoot實(shí)現(xiàn)全局和局部跨域的兩種方式
本文主要介紹了SpringBoot實(shí)現(xiàn)全局和局部跨域的兩種方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01Vue中的assets和static目錄:使用場(chǎng)景及區(qū)別說明
這篇文章主要介紹了Vue中的assets和static目錄:使用場(chǎng)景及區(qū)別說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06Vue Element-ui實(shí)現(xiàn)樹形控件節(jié)點(diǎn)添加圖標(biāo)詳解
這篇文章主要為大家介紹了Element-ui實(shí)現(xiàn)樹形控件節(jié)點(diǎn)添加圖標(biāo),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-11-11