本篇內(nèi)容介紹了“如何使用vue實(shí)現(xiàn)錄制視頻并壓縮視頻文件”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

專注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)金城江免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

一、下載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代碼塊：

五、在頁面加載完成時(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;
    //畫布上畫視頻，需要?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ū)分

“如何使用vue實(shí)現(xiàn)錄制視頻并壓縮視頻文件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！