Vue中使用video.js實現(xiàn)截圖和視頻錄制與下載

更新時間：2024年03月15日 09:29:25 作者：見路不走!

這篇文章主要為大家詳細介紹了Vue中如何使用video.js實現(xiàn)截圖和視頻錄制與下載,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

一、視頻播放

1. 安裝video.js

// video.js
npm install video.js

2. 引用（main.js）

import videojs from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$video = videojs;

3.vue中添加視頻代碼

<template>
<video
                  id="myVideoId"
                  class="video-js vjs-big-play-centered vjs-fluid"
                  controls
                  preload="auto"
                  width="100%"
                  height="100%"
                >
                  <source type="application/x-mpegURL" :src="playURL" />
                </video>
</template>
export default {  
  data() {
    return {
      transcribeStr: "錄 像",
      myPlayer: null,
      // 視頻播放地址
      playURL: ""，
    };
  },
  mounted() { 
    this.initVideo();
  },
  watch: {},
  methods: {
    initVideo() {
      //此處初始化的調用，我放在了獲取數據之后的方法內，而不是放在鉤子函數mounted
      //頁面dom元素渲染完畢，執(zhí)行回調里面的方法
      this.$nextTick(() => {
        this.myPlayer = this.$video(document.getElementById("myVideoId"), {
          //確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。
          controls: true,
          //自動播放屬性,muted:靜音播放
          autoplay: true,
          //建議瀏覽器是否應在<video>加載元素后立即開始下載視頻數據。
          preload: "auto",
          //設置視頻播放器的顯示寬度（以像素為單位）
          // width: "800px",
          //設置視頻播放器的顯示高度（以像素為單位）
          // height: "400px",
          controlBar: {
            playToggle: true
          }
        });
      });
    }
  },
  beforeDestroy() {
    // 組件銷毀時，清除播放器
    if (this.myPlayer) this.myPlayer.dispose();
  }
};

二、視頻錄制和下載

1. 安裝錄制所需插件

npm i recordrtc

2.引用（main.js）

import RecordRTC from "recordrtc";
Vue.prototype.$recordRTC = RecordRTC;

3.vue中添加視頻錄制和下載代碼（本功能基于上面代碼）

<div @click="transcribe">
    <i class="record-procees" v-if="isRecorder"></i>
    {{ transcribeStr }}
</div>
// 錄制
    transcribe() {
      this.isRecorder = !this.isRecorder;
      if (this.isRecorder) {
        this.transcribeStr = "結 束";
        if (!this.canvas) this.canvas = document.createElement("canvas");
        this.recorder = this.$recordRTC(this.canvas, {
          type: "canvas"
        });
        this.recorder.startRecording();
        this.drawMedia();
      } else {
        this.transcribeStr = "錄 像";
        this.recorder.stopRecording(() => {
          const url = window.URL.createObjectURL(this.recorder.getBlob());
          this.downloadFile(url, "mp4");
          cancelAnimationFrame(this.animationFrame);
          this.canvas = null;
          this.animationFrame = null;
        });
      }
    },
    // 刷新canvas
    drawMedia() {
      const ctx = this.canvas.getContext("2d");
      // 找到需要截圖的video標簽
      const video = this.myPlayer.el().querySelector("video");
      this.canvas.setAttribute("width", video.videoWidth);
      this.canvas.setAttribute("height", video.videoHeight);
      ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
      // requestAnimationFrame 根據電腦顯示幀數進行循環(huán)
      this.animationFrame = requestAnimationFrame(() => this.drawMedia());
    },
    // 下載
    downloadFile: function(blob, fileType) {
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = blob;
      // const time = this.parseTime(new Date())
      const time = new Date().getTime();
      a.download = `${time}.${fileType}`;
      document.body.appendChild(a);
      a.click();
      setTimeout(function() {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(blob);
      }, 1000);
    },
<style>
.record-procees {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin-top: 12px;
    margin-right: 6px;
    background: red;
    border-radius: 8px;
    animation: blings 1s linear infinite;
  }
  @keyframes blings {
    0% {
      opacity: 0.1;
    }
    100% {
      opacity: 1;
    }
  }
</style>

三、截圖

<li @click="screenshotHandle">截圖</li>
screenshotHandle() {
      const fileType = "png";
      // 找到需要截圖的video標簽
      // video 實列
      const video = this.myPlayer.el().querySelector("video");
      // const video = this.video;
      console.log(video, "video");
      const canvas = document.createElement("canvas");
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      console.log(canvas, "canvas");
      canvas
        .getContext("2d")
        .drawImage(video, 0, 0, canvas.width, canvas.height); // 圖片大小和視頻分辨率一致
      const strDataURL = canvas.toDataURL("image/" + fileType); // canvas中video中取一幀圖片并轉成dataURL
      let arr = strDataURL.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      const blob = new Blob([u8arr], {
        type: mime
      });
      const url = window.URL.createObjectURL(blob);
      this.downloadFile(url, "png");
    },

到此這篇關于Vue中使用video.js實現(xiàn)截圖和視頻錄制與下載的文章就介紹到這了,更多相關Vue video.js截圖和視頻錄制與下載內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: