利用WebRTC录制采样的音视频

<template>
    <div class="panel">
        <video class="small_panel" autoplay playsinline></video>
    </div>

    <video class="small_panel panel" id="recvideo"></video>
    <div class="record_operate">
        <button @click="handleStartRecord">开始录制</button>
        <button @click="handleRecVideo">回放</button>
        <button @click="handleDownloadVideo">下载</button>
    </div>
</template>

<script>
  import { defineComponent, onMounted } from "vue";

  export default defineComponent({
    name: "TestWebRTC",
    setup () {
      // 采集视频数据
      const getUserMedia = () => {
        const mediaStreamConstrains = {
          video: true,
        };

        const localVideo = document.querySelector('video');

        navigator.mediaDevices.getUserMedia(mediaStreamConstrains).then((mediaStream) => {
          localVideo.srcObject = mediaStream;
          // 将mediaStream挂载到window上
          window.mediaStream = mediaStream;
        }).catch((error) => {
          console.log('[Error]getUSerMedia:', error);
        });
      };

      // 音视频录制，缓存音视频流
      let mediaBufferArray = [];
      // 开始录制音视频
      const handleStartRecord = () => {
        mediaBufferArray = [];
        const options = { // 使用vp8编码
          mimeType: "video/webm;codecs=vp8",
        };

        if (!MediaRecorder.isTypeSupported(options.mimeType)) {
          console.log("[Error]mimeType not Supported");
          return;
        }

        let mediaRecorder = null;
        try {
          mediaRecorder = new MediaRecorder(window.mediaStream, options);
        } catch (e) {
          console.log("[Error]init MediaRecorder:", e);
          return;
        }

        mediaRecorder.ondataavailable = (e) => {
          if (e && e.data && e.data.size > 0) {
            mediaBufferArray.push(e.data);
          }
        };

        // 开始录制
        // 这里设定每10ms下发一次Buffer
        mediaRecorder.start(10);
      };

      // 音视频回放
      const handleRecVideo = () => {
        let blob = new Blob(mediaBufferArray, { type: 'video/webm' });
        const recVideo = document.querySelector('video#recvideo');
        recVideo.src = window.URL.createObjectURL(blob);
        recVideo.srcObject = null;
        recVideo.controls = true;
        recVideo.play();
      };

      const handleDownloadVideo = () => {
        const blob = new Blob(mediaBufferArray, { type: 'video/webm' });
        const url = window.URL.createObjectURL(blob);
        const aTag = document.createElement('a');

        aTag.href = url;
        aTag.download = 'video_' + new Date().getTime() + '.webm';
        document.body.appendChild(aTag);
        aTag.click();
        aTag.remove();
      };

      onMounted(() => {
        getUserMedia();
      });

      return {
        handleStartRecord,
        handleRecVideo,
        handleDownloadVideo,
      };
    }
  })
</script>

<style scoped>
    .panel { text-align: center; margin-top: 20px; }
    .small_panel { width: 160px; height: 160px; }
</style>