vue开启屏幕录制

在不使用https的时候，只能localhost使用，保护机制

一、导入依赖

npm install vue-webrtc --save
1

2、使用

<template>
  <div>
    <button @click="startRecording">开始录制button>
    <button @click="stopRecording">停止录制button>
    <video ref="video" controls>video>
  div>
template>

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      recordedChunks: []
    }
  },
  methods: {
    async startRecording() {
      const stream = await navigator.mediaDevices.getDisplayMedia();
      this.mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' });
      this.mediaRecorder.addEventListener('dataavailable', event => {
        this.recordedChunks.push(event.data);
      });
      this.mediaRecorder.start();
    },
    stopRecording() {
      this.mediaRecorder.stop();
      const blob = new Blob(this.recordedChunks, { type: 'video/webm' });
      const url = URL.createObjectURL(blob);
      this.$refs.video.src = url;
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34