vue 基于MediaRecorder+canvas实现视频录屏

VIP文章聰籽

已于 2022-04-22 14:19:43 修改

阅读量2.1k

点赞数

分类专栏： vue 文章标签：前端 vue.js

于 2022-04-21 18:01:47 首次发布

本文链接：https://blog.csdn.net/weixin_44446223/article/details/124328091

版权

<template>
  <div class="RightContent">
    <canvas id="canvas" width="640" height="360"></canvas>
    <video id="video" autoplay loop muted   >
      <!-- // 本地mp4 文件 录屏本地播放的资源
	  可实现  blob:https://******/c21a362b-0d54-4802-b238-eb4dea15bcd6 这类型播放资源录屏
 -->
      <source src="@/assets/video/mda-ndj201qx48tmdmsf.mp4"/> 
    </video>

    </video> -->
    <button id="button-start" @click="btnstart">开始录制</button>
    <button id="button-stop" @click="btnend">结束录制</button>
  </div>
</template>
<script>
export default {
   
  name: "Rrweb",
  components: {
   },
  data() {
   
    return {
   
      events: [],
      frameId: null,
      chunks: [],
      canvasElement: null,
      canvasContext: null,
      videoElement: null,
      startButton: null,
      stopButton: null,
      recorder: null,
      frameId: null,
      videoWidth: 640,
      videoHeight: 360,
      frameRate: 90,
    };
  },
  props: {