溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“vue如何實現錄制視頻并壓縮視頻文件”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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>以上就是關于“vue如何實現錄制視頻并壓縮視頻文件”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
