库伦托屏幕共享

Question

我目前正面临一些问题，分享我的屏幕与任何库伦托房间，我加入。目前，我正在使用repo (https://github.com/TribeMedia/kurento-group-call-1)并对代码进行修改，以帮助将屏幕共享设备附加到应用程序中。

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

1. 在页面上添加一个共享屏幕按钮(超级简单)
2. 获取当单击共享屏幕按钮时出现的屏幕/窗口弹出(使用getScreenId.js by muaz (https://github.com/muaz-khan/getScreenId))
3. 选择必需的应用程序/窗口后，将其显示为用户的本地流(以实际查看所共享的内容)，然后重新构建rtc连接。

我面临的问题是，当另一个同伴加入房间时，我得到的是最初参与者的网络摄像头流，而不是屏幕共享。在实现过程中，我遗漏了什么吗？如果有人能帮我的话，我们真的能帮上忙吗？

下面是我实现的代码片段：

在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的网络摄像头流，而不是桌面(已经共享)。P.S. PeerA能够看到，由于某种原因，桌面正在被共享，被发送到PeerB的流是摄像头而不是共享屏幕。

Answer 1

好的。因此，在屏幕共享中，您所需要做的就是玩流。

事情是这样的：

客户端：

1. 调用getUserMedia()首先获取音频(使用音频约束n次调用)
2. 接下来，您需要调用getScreenId()，该函数将返回“屏幕”流。函数返回屏幕约束。
3. 现在就使用这些约束，并将"options“变量ans作为”屏幕“传递"sendSource”。
4. 打电话到：

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

1. 函数的回调必须调用generateOffer(它将具有“要约”)。
2. 发出websocket调用所需的消息。

服务器端：

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

userSession.outgoingMedia.release();

1. 然后，您需要删除房间中其他ppl的“传入端点”，如下所示： 对于(usersInRoom中的var i){var user = usersInRoomi；//发布查看器( if(user.id == userSession.id){ user.id==userSession.id){user.id；} user.incomingMediauserSession.id.release()；删除user.incomingMediauserSession.id；}
2. 现在创建一个新的端点，并将其设置为当前用户会话的传出端点
3. 在此之后，执行发送当前视频和接收其他视频所需的步骤。

注意:请记住，在显示流时，要确保html页面上没有复制"div“元素。这会导致一些冲突，您将不会在其他屏幕上接收屏幕共享()。