如何使用 RecordRTC 錄制屏幕+音頻+麥克風

Question

我正在做一個項目，我需要用戶能夠錄制屏幕、音頻和麥克風。 目前我只能讓它識別屏幕和音頻。

首先，我捕獲屏幕和其中的音頻並將其保存到變量中。 然后我正在捕獲該變量以顯示視頻組件。

 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; }); },

Answer 1

我通過增加 function 來修復它，我從麥克風捕獲音頻

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 方法中添加一個 function

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 方法中添加一個 function

   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;
    
  },