vue中使用video.js，且可以截图、录制和下载视频_vue videojs使用

一、视频播放

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元素渲染完毕，执行回调里面的方法
      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 根据电脑显示帧数进行循环
      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>

解决RecordRTC录制报错

    <!-- 下载到本地引入 -->
    <script src="screenshot.js"></script>
    <!-- 官方路径引入 -->
    <!-- <script src="https://www.webrtc-experiment.com/screenshot.js"></script> -->

三、截图

<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");
    },