Kurento screen sharing in room

Question

I am currently facing some issues sharing my screen with any Kurento room that I join. For now I am using the repo (https://github.com/TribeMedia/kurento-group-call-1) and making modifications on the code to help attach a screen sharing conept to the application.

Currently, I am able to do the following:

1. Add a share screen button on the page (super simple)

2. Get the screen/window popup that comes when clicking the share screen button (using the getScreenId.js by muaz khan (https://github.com/muaz-khan/getScreenId))

3. 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.

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!

Following are snippets of the code that I have implemented:

In index.html: <button id="sharescreen" disabled="disabled" onClick="shareScreen()">Share Screen</button>

In the client side js 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);
        });
    });
}

```

For example:

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.

Answer 1

Alright. So it turns out that all you need to do in screen sharing is playing with streams.

Here's how it goes:

Client-side:

1. make a call to getUserMedia() to firstly get the audio (use audio constraints n call)

2. next u need to make a call to getScreenId(), the function that will return the "screen" stream. The function return the screen constraints.

3. use these constraints now and make the "options variable ans pass "sendSource" as "screen"

4. make the call to:

new kurentoUtils.WebRtcPeer.WebRtcPeerSendrecv(options, function (error)

5. the callback of the function must make the call to generateOffer(which will have the "offer").

6. Make the message required for the websocket call

Server-side:

1. Now on the server side, firstly "release" the current userSession's outgoing endpoint as:

userSession.outgoingMedia.release();

2. Then you will need to delete the "incoming endpoints" of the rest of the ppl in the room as:

    for (var i in usersInRoom) {
      var user = usersInRoom[i];
      // release viewer from this
      if(user.id == userSession.id){
        continue;
      }
      user.incomingMedia[userSession.id].release();
      delete user.incomingMedia[userSession.id];
    }
   

3. now make a new endpoint and set this as the current usersessions's outgoing endpoint

4. After this do the steps that need to be done to send your current video and receive the other videos

NOTE: remember to make sure there is no duplication of the "div" element on the html page while displaying the streams. This causes some conflict and you wont receive the screen share on the other screens