Recording multiple RTCMulticonnection streams in single file

[yodaljit]

trafficstars

I'm using RTCMulticonnection to work with WebRTC for live stream where user share their camera feed and screen both. It works fine but when I'm recording the stream with RecordRTC, it starts a separate recording whenever user switch from camera to screen or screen to camera. How can i record it in single file. Below is my code:

var connection = new RTCMultiConnection();
var video = document.querySelector('#video')
// this line is VERY_important
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';

// if you want audio+video conferencing
connection.session = {
audio: true,
video: {
mandatory:{
  width: 1280,
  height: 720
}
},
oneway: true
};
connection.mediaConstraints = {
video: true,
audio: true,
screen: false
};
connection.open('coach-stream'+roomid)


connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: false,
OfferToReceiveVideo: false
};

$('#share').on('click', function(e){
e.preventDefault();

var cameraOptions = {
screen: true
};

connection.captureUserMedia(function(camera) {
var screen = camera.getVideoTracks()[0]
connection.attachStreams.forEach(function(stream){
stream.getVideoTracks().forEach(tracks => {
  tracks = screen
})
})

var streamEvent = {
  type: 'local',
  stream: camera,
  streamid: camera.id,
  mediaElement: video
};

//connection.dontCaptureUserMedia = true;
screen.onended = function(){

var cameraOptions2 = {
    video: true
};

connection.captureUserMedia(function(camera) {
    var screen = camera.getVideoTracks()[0]
    connection.attachStreams.forEach(function(stream){
      stream.getVideoTracks().forEach(tracks => {
        tracks = screen
      })
    })

    var streamEvent = {
        type: 'local',
        stream: camera,
        streamid: camera.id,
        mediaElement: video
    }; 
    
    
    //connection.dontCaptureUserMedia = true;
}, cameraOptions2);
}
}, cameraOptions);

});

var blob
connection.onstream=function(event){
$('#count').html(connection.getAllParticipants().length+' <i class="fa fa-eye"></i>')
if( event.type === 'local' ){

  video.addEventListener("pause", function(){
      connection.streamEvents.selectFirst({local: true}).stream.mute();
  });
  
  video.addEventListener("play", function(){
      connection.streamEvents.selectFirst({local: true}).stream.unmute();
  });

}
sid = event.streamid
video.srcObject = event.stream
video.play();
var screen = connection.streamEvents.selectFirst({local: true, isScreen: true}).stream;
var recorder = RecordRTC([event.stream], {type:'video', mimeType: 'video/webm;codecs=vp8'})

recorder.startRecording();


$('#stp').on('click', function(e){
e.preventDefault();
connection.getAllParticipants().forEach(function(pid) {
      connection.disconnectWith(pid);
  });
  connection.attachStreams.forEach(function(localStream) {
      localStream.getTracks().forEach(function(track) {
        if (track.readyState == 'live') {
            track.stop();
        }
      })
  });
connection.removeStream('video')
connection.removeStream('audio')
video.srcObject = null

Please Help me with this.

[Boopalan-M]

i have one doubt@yodaljit. how can i see the users screen without getting the permission from the users.

Thanks in advance!!