屏幕录制（包含声音+视频）

zsq强强联合

已于 2022-10-19 11:04:35 修改

阅读量277

点赞数

分类专栏： vue 文章标签：音视频 vue.js elementui

于 2022-10-19 08:31:56 首次发布

本文链接：https://blog.csdn.net/qq_27203603/article/details/127400365

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、html代码

      <div class="record-page">
        <div style="margin: 15px 0">
          <el-button @click="startRecording" :disabled="videoStart" size="small"
            >开始录制</el-button
          >
          <el-button
            @click="stopRecording"
            :disabled="!videoStart"
            size="small"
            id="btn-stop-recording"
            >结束录制</el-button
          >
        </div>
        <video
          controls
          autoplay
          playsinline
          ref="video"
          width="400"
          height="300"
          v-show="isshow"
        ></video>
      </div>

2、js模块

import RecordRTC from "recordrtc";

video: null,

videoStart: false,

recorder: null,

isshow: false,

created() {

    //调用数据获取方法

    this.getHearingInfo();

    if (!navigator.getDisplayMedia && !navigator.mediaDevices.getDisplayMedia) {

      let error = "Your browser does NOT support the getDisplayMedia API.";

      throw new Error(error);

    }

  },

  mounted() {

    this.video = document.querySelector("video");

  },

funStart(stream) {
      this.video.srcObject = stream;
      this.recorder = RecordRTC(stream, {
        type: "video",
      });
      this.recorder.startRecording();
      // release screen on stopRecording
      this.recorder.screen = stream;
      this.videoStart = true;
    },
    async startRecording() {
      var _this = this;
      this.isshow = true;
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: true,
      });

      var promise = navigator.mediaDevices.getUserMedia({ audio: true });
      promise.then(function (audioStream) {
        audioStream.getAudioTracks().forEach((track) => {
          stream.addTrack(track);
        });
        _this.funStart(stream);
      });
      promise.catch(function (error) {
        _this.funStart(stream);
      });
    },

    stopRecordingCallback() {

      this.video.src = this.video.srcObject = null;

      this.video.src = URL.createObjectURL(this.recorder.getBlob());

      //生成一个隐藏的a标签，设置download属性支持下载

      let a = document.createElement("a");

      a.href = this.video.src;

      a.style.display = "none";

      a.download = "record.webm";

      a.click();



      this.recorder.screen.stop();

      this.recorder.destroy();

      this.recorder = null;

      this.videoStart = false;

      this.isshow = false;

    },

    stopRecording() {

      this.recorder.stopRecording(this.stopRecordingCallback);

    },