详解在vue中如何实现屏幕录制与直播推流功能

<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>

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

<script>
import { RecordRTC } from 'recordrtc';

export default {
  data() {
    return {
      recorder: null,
      videoStream: null,
      recordedBlob: null
    }
  },
  methods: {
    async startRecording() {
      this.videoStream = await navigator.mediaDevices.getDisplayMedia();
      this.recorder = new RecordRTC(this.videoStream, {
        type: 'video',
        mimeType: 'video/webm; codecs=vp9'
      });
      this.recorder.startRecording();
    },
    async stopRecording() {
      await this.recorder.stopRecording();
      this.recordedBlob = this.recorder.getBlob();
      const url = URL.createObjectURL(this.recordedBlob);
      this.$refs.video.src = url;
      this.videoStream.getTracks().forEach(track => track.stop());
    }
  }
}
</script>

<template>
  <div>
    <video ref="localVideo" autoplay muted></video>
    <video ref="remoteVideo" autoplay></video>
    <button @click="startStreaming">开始推流</button>
    <button @click="stopStreaming">停止推流</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      localStream: null,
      remoteStream: null,
      peerConnection: null,
      mediaConstraints: {
        audio: true,
        video: true
      },
      serverConfig: {
        iceServers: [
          { urls: 'stun:stun.l.google.com:19302' }
        ]
      }
    }
  },
  methods: {
    async startStreaming() {
      this.localStream = await navigator.mediaDevices.getUserMedia(this.mediaConstraints);
      this.$refs.localVideo.srcObject = this.localStream;
      this.peerConnection = new RTCPeerConnection(this.serverConfig);
      this.peerConnection.addStream(this.localStream);
      this.peerConnection.addEventListener('addstream', event => {
        this.remoteStream = event.stream;
        this.$refs.remoteVideo.srcObject = this.remoteStream;
      });
    },
    stopStreaming() {
      this.peerConnection.close();
      this.localStream.getTracks().forEach(track => track.stop());
    }
  }
}
</script>

<template>
  <div>
    <video ref="video" autoplay></video>
    <button @click="startStreaming">开始推流</button>
    <button @click="stopStreaming">停止推流</button>
  </div>
</template>

<script>
import VueRtmp from 'vue-rtmp';

export default {
  data() {
    return {
      rtmpConfig: {
        url: 'rtmp://localhost/live/stream',
        options: {
          swf: '/static/video-js.swf',
          flash: true
        }
      },
      rtmpPlayer: null
    }
  },
  methods: {
    startStreaming() {
      this.rtmpPlayer = new VueRtmp(this.rtmpConfig);
      this.rtmpPlayer.attachMediaElement(this.$refs.video);
      this.rtmpPlayer.load();
      this.rtmpPlayer.play();
    },
    stopStreaming() {
      this.rtmpPlayer.stop();
    }
  }
}
</script>