title: WebRTC: Switch from Video Sharing to Screen sharing during call
body: <p>Initially, I had two different webpages:</p>
  
  <p>One was to do Video Call and
  Other was to do Screen Sharing</p>
  
  <p>Now, I want to do both of them in one page.</p>
  
  <p>Here is the scenario:</p>
  
  <p>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.</p>
  
  <p>For clarity, here are some questions I want to ask:</p>
  
  <p>On Caller Side:</p>
  
  <p>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?</p>
  
  <p>On Callee Side:</p>
  
  <p>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)</p>
  
  <p>Kindly, help me in this regards. If there are any open source codes available, kindly share their links too.</p>
  
  <p>Just for your reference, I was trying to handle it using following code. (i know this is naive and won't work)</p>
  
  <pre><code>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';
           }
      };
  </code></pre>