救救孩子吧 !屏幕录像功能
发布于 3 年前 作者 huaer 1260 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

是这样的,最近要做一个屏幕录像的功能,

github.com

muaz-khan/RecordRTC/blob/master/simple-demos/screen-recording.html

<style>
    html, body {
        margin: 0!important;
        padding: 0!important;
        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 1em;
    }

    video {
        width: 30%;
        border-radius: 5px;
        border: 1px solid black;
    }
</style>

<title>Screen Recording | RecordRTC</title>
<h1>Screen Recording using RecordRTC</h1>

<br>

This file has been truncated. show original

然后 将这个功能 使用 vue 实现的时候 出现如下错误:

image

向大佬求助 代码如下:

<template>
  <div class="record-page">
    <div style="margin-bottom: 15px;">
      <el-button @click="startRecording" :disabled="videoStart" size="small">start recording</el-button>
      <el-button @click="stopRecording" :disabled="!videoStart" size="small" id="btn-stop-recording">stop recording
      </el-button>
    </div>
    <video controls autoplay playsinline ref="video" width="400" height="300"></video>
  </div>
</template>

<script>
  import RecordRTC from 'recordrtc';

  export default {
    name: "screenRecord",
    data() {
      return {
        video: null,
        videoStart: false,
        recorder: null,
      }
    },
    created() {
    },
    mounted() {
      this.video = document.querySelector('video');

      if (!navigator.getDisplayMedia && !navigator.mediaDevices.getDisplayMedia) {
        let error = 'Your browser does NOT support the getDisplayMedia API.';
        throw new Error(error);
      }
    },
    methods: {
      invokeGetDisplayMedia(success, error) {
        let displaymediastreamconstraints = {
          video: {
            displaySurface: 'monitor', // monitor, window, application, browser
            logicalSurface: true,
            cursor: 'always' // never, always, motion
          }
        };
        // above constraints are NOT supported YET
        // that's why overridnig them
        displaymediastreamconstraints = {
          video: true
        };
        if (navigator.mediaDevices.getDisplayMedia) {
          navigator.mediaDevices.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);
        } else {
          navigator.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);
        }
      },
      captureScreen(callback) {
        this.invokeGetDisplayMedia((screen) => {
          this.addStreamStopListener(screen, () => {
            //
          });
          callback(screen);
        }, function (error) {
          console.error(error);
          alert('Unable to capture your screen. Please check console logs.\n' + error);
        });
      },
      addStreamStopListener(stream, callback) {
        stream.addEventListener('ended', function () {
          callback();
          callback = function () {
          };
        }, false);
        stream.addEventListener('inactive', function () {
          callback();
          callback = function () {
          };
        }, false);
        stream.getTracks().forEach(function (track) {
          track.addEventListener('ended', function () {
            callback();
            callback = function () {
            };
          }, false);
          track.addEventListener('inactive', function () {
            callback();
            callback = function () {
            };
          }, false);
        });
      },
      startRecording() {
        this.captureScreen(screen => {
          this.video.srcObject = screen;
          this.recorder = RecordRTC(screen, {
            type: 'video'
          });
          this.recorder.startRecording();
          // release screen on stopRecording
          this.recorder.screen = screen;
          this.videoStart = true;
        });
      },
      stopRecordingCallback() {
        this.video.src = this.video.srcObject = null;
        this.video.src = URL.createObjectURL(this.recorder.getBlob());

        this.recorder.screen.stop();
        this.recorder.destroy();
        this.recorder = null;
        this.videoStart = false;
      },
      stopRecording() {
        this.recorder.stopRecording(this.stopRecordingCallback);
      }
    },
  }
</script>

<style scoped>

</style>
回到顶部