vue3 rrweb webrtc 录制下载视频流示例代码

以下是一个使用 Vue3、rrweb 和 WebRTC 技术进行录制和下载视频流的示例代码：

<template>
  <div>
    <video ref="videoRef" autoplay></video>
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording">停止录制</button>
    <button @click="downloadRecording">下载录制</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import RecordRTC from 'recordrtc'
import { createSerializer } from 'rrweb/serializer'
import { rrwebPlayer } from 'rrweb-player'
import { createPeerConnection } from './webrtc'

export default {
  setup() {
    const videoRef = ref(null)
    let recorder = null
    let mediaStream = null
    let recordedBlobs = null

    const startRecording = async () => {
      recordedBlobs = []
      mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
      videoRef.value.srcObject = mediaStream
      recorder = RecordRTC(mediaStream, {
        type: 'video',
        mimeType: 'video/webm',
        bitsPerSecond: 100000
      })
      recorder.startRecording()
    }

    const stopRecording = () => {
      recorder.stopRecording(() => {
        recordedBlobs = recorder.getBlob()
        const serializer = createSerializer()
        const events = serializer(events)
        const videoData = {
          events,
          width: videoRef.value.videoWidth,
          height: videoRef.value.videoHeight
        }
        createPeerConnection(videoData)
      })
      mediaStream.getTracks().forEach(track => track.stop())
      videoRef.value.srcObject = null
    }

    const downloadRecording = () => {
      const blob = new Blob(recordedBlobs, { type: 'video/webm' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.style.display = 'none'
      a.href = url
      a.download = 'recording.webm'
      document.body.appendChild(a)
      a.click()
      setTimeout(() => {
        document.body.removeChild(a)
        URL.revokeObjectURL(url)
      }, 100)
    }

    return {
      videoRef,
      startRecording,
      stopRecording,
      downloadRecording
    }
  }
}
</script>

其中，`createPeerConnection` 函数用于创建 WebRTC 连接并发送录制的视频数据，其代码如下：

import { createSignalChannel } from './signal'

export const createPeerConnection = async videoData => {
  const rtcPeerConnection = new RTCPeerConnection()
  const signalChannel = await createSignalChannel()
  const offer = await rtcPeerConnection.createOffer()
  await rtcPeerConnection.setLocalDescription(offer)
  signalChannel.emit('offer', { offer, videoData })
  signalChannel.on('answer', async ({ answer }) => {
    await rtcPeerConnection.setRemoteDescription(answer)
  })
}

在这个函数中，我们首先创建了一个 `RTCPeerConnection` 对象，然后使用 `createSignalChannel` 函数创建了一个信令通道，接着创建了一个 offer 并将其设置为本地的 SDP 值，最后通过信令通道将 offer 发送给对方。当对方接收到 offer 并创建了一个 answer 后，将其通过信令通道发送给我们，我们再将其设置为远程的 SDP 值即可建立 WebRTC 连接。