WebRTC: Switch from Video Sharing to Screen sharing during call

Question

Initially, I had two different webpages:

One was to do Video Call and Other was to do Screen Sharing

Now, I want to do both of them in one page.

Here is the scenario:

During Live call, a user wants to stop sharing his/her video and start sharing screen. Afterwards, again he/she wishes to turn off screen sharing and start video sharing.

For clarity, here are some questions I want to ask:

On Caller Side:

1) How can I change my local stream from video to screen and vice versa? 2) Once it is done, how can I assign it to the local video element?

On Callee Side:

1) How do I handle if the current stream I am receiving is changed from video to screen? 2) How do I handle if the stream I am receiving has stopped? I mean, now I can receive neither video nor screen (just audio)

Kindly, help me in this regards. If there are any open source codes available, kindly share their links too.

Just for your reference, I was trying to handle it using following code. (i know this is naive and won't work)

function handleUserMedia(newStream){

        var localvideo = document.getElementById("localvideo");
        localvideo.src = URL.createObjectURL(newStream);
        localStream = newStream;
        sendMessage('got user media');

        if (isInitiator) {
            maybeStart();
        }
     }

     function handleUserMediaError(error){
        console.log(error);
     }        

     var video_constraints = {video: true, audio: true};
     var screen_constraints = {video: { mandatory: { chromeMediaSource: 'screen' } }};

     getUserMedia(video_constraints, handleUserMedia, handleUserMediaError);

     //getUserMedia(screen_constraints, handleUserMedia, handleUserMediaError);

     $scope.btnLabel = 'Share Screen';

     $scope.toggleSelected = function () {

         $scope.selected = !$scope.selected;

         if($scope.selected)
         {
             getUserMedia(screen_constraints, handleUserMedia, handleUserMediaError);
             $scope.btnLabel = 'Share Video';
         }
         else
         {
             getUserMedia(video_constraints, handleUserMedia, handleUserMediaError);
             $scope.btnLabel = 'Share Screen';
         }
    };

Answer 1

Check this demo:

• https://www.webrtc-experiment.com/demos/switch-streams.html

and the relevant tutorial:

• https://www.webrtc-experiment.com/docs/how-to-switch-streams.html

simply renegotiate peer connections on both users' side!