如何使用 RecordRTC 录制屏幕+音频+麦克风

问题描述

我正在做一个项目，我需要用户能够录制屏幕、音频和麦克风。目前我只能让它识别屏幕和音频。

首先，我正在捕获屏幕和其中的音频并将其保存到一个变量中。然后我捕获该变量以显示视频组件。

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,audio: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);
        });
      },startRecording() {
     
    this.captureScreen(screen=>{
        this.audioStream = audio
        console.log(audio)
      this.video=this.$refs.videoScreen
      this.video.srcObject = screen;
      this.recorder = RecordRTC(screen,{
        type: 'video'
      });
      this.recorder.startRecording();
      // release screen on stopRecording
      this.recorder.screen = screen;
      this.videoStart = true;
    });
     
  },

解决方法

我通过增加一个从麦克风捕获音频的功能来修复它

captureAudio(success,error) {
           let displayuserstreamconstraints = {
          audio:true
        };
        if (navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices.getUserMedia(displayuserstreamconstraints).then(success).catch(error);
         
        }
        else {
          navigator.getUserMedia(displayuserstreamconstraints).then(success).catch(error);
       
        }
        },

并在startRecording方法中添加一个函数

startRecording() {
        this.captureAudio((audio) => {
        this.captureScreen(screen=>{
          this.video=this.$refs.videoScreen
          this.audioStream=audio
          this.video.srcObject = screen;
          this.recorder = RecordRTC(screen,{
            type: 'video'
          });
          this.recorder.startRecording();
          // release screen on stopRecording
          this.recorder.screen = screen;
          this.videoStart = true;
        });
        })
      },

并在stopRecording方法中添加一个函数

   stopRecordingCallback() {
    this.video.src = this.video.srcObject = null;
    this.video=this.$refs.videoScreen
    this.video.src = URL.createObjectURL(this.recorder.getBlob());
    this.recorder.screen.stop();
    this.audioStream.stop();
    this.recorder.destroy();
    this.recorder = null;
    
  },