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

一、视频播放

  1. 安装video.js

// video.js

npm install video.js

  1. 引用(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");
    },
相关推荐
Black蜡笔小新1 小时前
WebRTC嵌入式视频通话SDK:EasyRTC从免插件到轻量级带来的音视频通话技术
音视频·webrtc·sdk·rtc·webp2p
EasyNVR1 小时前
EasyRTC:开启智能硬件与全平台互动新时代
网络·音视频·webrtc·p2p·智能硬件·视频监控
EasyGBS1 小时前
从开发到部署:EasyRTC嵌入式视频通话SDK如何简化实时音视频通信的集成与应用
音视频·webrtc·实时音视频·视频监控
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
shengmeshi9 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu9 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架