title: Kurento screen sharing in room
body: <p>I am currently facing some issues sharing my screen with any Kurento room that I join. For now I am using the repo (<a href="https://github.com/TribeMedia/kurento-group-call-1" rel="nofollow noreferrer">https://github.com/TribeMedia/kurento-group-call-1</a>) and making modifications on the code to help attach a screen sharing conept to the application.</p>
  
  <p>Currently, I am able to do the following:</p>
  
  <ol>
  <li>Add a share screen button on the page (super simple)</li>
  <li><p>Get the screen/window popup that comes when clicking the share screen button (using the getScreenId.js by muaz khan (<a href="https://github.com/muaz-khan/getScreenId" rel="nofollow noreferrer">https://github.com/muaz-khan/getScreenId</a>))</p></li>
  <li><p>After selecting required application/window, display it as local stream for user (to actually see what is being shared) and then remake the rtc connections.</p></li>
  </ol>
  
  <p>The problem that I am facing is, when another peer joins the room, I get the webcam stream of the initial participants in the room and not the screenshare. Is there something that I am missing in the implementation? Would we really helpful if anybody can help me out!</p>
  
  <p>Following are snippets of the code that I have implemented:</p>
  
  <p>In index.html:
  <code>
  &lt;button id="sharescreen" disabled="disabled" onClick="shareScreen()"&gt;Share Screen&lt;/button&gt;
  </code></p>
  
  <p>In the client side js code:
  ```</p>
  
  <pre><code>function shareScreen(){
      var audioConstraints = {
          audio: false,  
          video: true,
      };
      navigator.getUserMedia(audioConstraints, function(stream) {
          initiateScreenSharing(stream);
      }, function(error) {
          console.error("Could not get audio stream! " + error);
      });
  }
  
  function initiateScreenSharing(audioStream){
      getScreenId(function (error, sourceId, screen_constraints) {
          console.log("screen_constraints");
          console.log(screen_constraints);
          navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
          navigator.getUserMedia(screen_constraints, function (stream) {
              console.log(stream);
  
              var constraints = {
                  audio: true,
                  video: {
                      frameRate: {
                          min: 1, ideal: 15, max: 30
                      },
                      width: {
                          min: 32, ideal: 50, max: 320
                      },
                      height: {
                          min: 32, ideal: 50, max: 320
                      }
                  }
              };
  
              var localParticipant = new Participant(sessionId);
              participants[sessionId] = localParticipant;
              localVideo = document.getElementById("local_video");
              var video = localVideo;
  
              var options = {
                  localVideo: video,
                  videoStream: stream,
                  mediaConstraints: constraints,
                  onicecandidate: localParticipant.onIceCandidate.bind(localParticipant),
                  sendSource: 'desktop'
              };
  
  
              localParticipant.rtcPeer = new kurentoUtils.WebRtcPeer.WebRtcPeerSendrecv(options, function (error) {
                  if (error) {
                      return console.error(error);
                  }
  
                  // Set localVideo to new object if on IE/Safari
                  localVideo = document.getElementById("local_video");
  
                  // initial main video to local first
                  localVideoCurrentId = sessionId;
                  //localVideo.src = localParticipant.rtcPeer.localVideo.src;
                  localVideo.muted = true;
  
                  console.log("local participant id : " + sessionId);
                  this.generateOffer(localParticipant.offerToReceiveVideo.bind(localParticipant));
              });
  
          }, function (error) {
              console.error(error);
          });
      });
  }
  </code></pre>
  
  <p>```</p>
  
  <p>For example:</p>
  
  <p>If PeerA joins the room 1st and shares the desktop, and PeerB joins the same room, then PeerB will see PeerA's webcam stream rather than desktop (that has been shared). 
  P.S. PeerA is able to actually see that desktop is being shared by for some reason that stream that is being sent over to PeerB is the webcam and not shared screen.</p>