房间内的 Kurento 屏幕共享

Question

我目前在与我加入的任何 Kurento 房间共享我的屏幕时遇到一些问题。现在我正在使用 repo (https://github.com/TribeMedia/kurento-group-call-1) 并对代码进行修改以帮助将屏幕共享概念附加到应用程序。

目前，我能够做到以下几点：

1. 在页面上添加分享屏按钮（超级简单）

2. 获取单击共享屏幕按钮时出现的屏幕/窗口弹出窗口（使用 muaz khan (https://github.com/muaz-khan/getScreenId) 的 getScreenId.js）

3. 选择所需的应用程序/窗口后，将其显示为用户的本地流（以实际查看正在共享的内容），然后重新建立 rtc 连接。

我面临的问题是，当另一个同伴加入房间时，我得到了房间中初始参与者的网络摄像头流，而不是屏幕共享。我在实施中缺少什么吗？如果有人可以帮助我，我们真的会很有帮助吗！

以下是我实现的代码的 sn-ps：

在 index.html 中： <button id="sharescreen" disabled="disabled" onClick="shareScreen()">Share Screen</button>

在客户端js代码中： ```

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);
        });
    });
}

```

例如：

如果 PeerA 第一个加入房间并共享桌面，而 PeerB 加入同一个房间，那么 PeerB 将看到 PeerA 的网络摄像头流而不是桌面（已共享）。 附言由于某种原因，PeerA 能够实际看到桌面正在被共享，发送到 PeerB 的流是网络摄像头，而不是共享屏幕。

Answer 1

好的。所以事实证明，在屏幕共享中您需要做的就是播放流。

事情是这样的：

客户端：

1. 调用 getUserMedia() 以首先获取音频（使用音频约束 n 调用）

2. 接下来您需要调用 getScreenId()，该函数将返回“屏幕”流。该函数返回屏幕约束。

3. 现在使用这些约束并使“选项变量 ans 将“sendSource”作为“屏幕”传递

4. 拨打电话：

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

5. 函数的回调必须调用generateOffer（将有“offer”）。

6. 制作 websocket 调用所需的消息

服务器端：

1. 现在在服务器端，首先“释放”当前 userSession 的传出端点：

userSession.outgoingMedia.release();

1. 然后您需要删除房间中其余 ppl 的“传入端点”：

    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];
    }
   

2. 现在创建一个新端点并将其设置为当前用户会话的传出端点

3. 在此之后执行发送当前视频和接收其他视频所需完成的步骤

注意：请记住在显示流时确保 html 页面上的“div”元素没有重复。这会导致一些冲突，您不会在其他屏幕上收到屏幕共享