CODEWITHSUNDEEP
javascriptwebrtcaudio-recordingrecordrtc
Anthony Earl R. Cuartero
Anthony Earl R. Cuartero

Reputation: 215

How to include mic audio in RecordRTC Screen Recording?

I am doing screen recording using RecordRTC.

How do I include my mic audio when recording?

My code below using Angular:

  async startRecording() {
    let mediaConstraints = {
      video: {
      }, 
      audio: true
    };
    await this.mediaDevices.getDisplayMedia(mediaConstraints).then(this.successCallback.bind(this), this.errorCallback.bind(this));
  }

  successCallback(stream: MediaStream) {
    this.recording = true;
    var options = {
      mimeType: 'video/webm', // or video/webm\;codecs=h264 or video/webm\;codecs=vp9
      audioBitsPerSecond: 128000,
      videoBitsPerSecond: 128000,
      bitsPerSecond: 128000 // if this line is provided, skip above two
    };
    this.stream = stream;
    this.recordRTC = RecordRTC(stream, options);
    this.recordRTC.startRecording();
    let video: HTMLVideoElement = this.rtcvideo.nativeElement;
    video.src = window.URL.createObjectURL(stream);
    this.toggleControls();

  }

Upvotes: 0

Views: 741

Answers (1)

siniradam
siniradam

Reputation: 2929

You need to attach an audio track to the stream

successCallback(stream){
    //your other code here
    //...

    navigator.mediaDevices.getUserMedia({audio:true}).then(function(mic) {
        stream.addTrack(mic.getTracks()[0]);
    });
    //
    this.recordRTC = RecordRTC(stream, options);
    this.recordRTC.startRecording();
}

This should be helpful. https://www.webrtc-experiment.com/RecordRTC/

Upvotes: 1

Related Questions