Совместное использование экрана с помощью getScreenId.js в WebRTC для двух партнеров

Я пытаюсь реализовать функцию совместного использования экрана в видеоконференцсвязи webrtc. Из предложения я теперь следую за решением muaz-khan, используя https://www.webrtc-experiment.com/getScreenId/. Я могу легко захватить изображения приложений одного партнера и заменить видеопоток потоком захвата. Но это эксперимент по видеоконференцсвязи, поэтому два браузера должны проводить видеоконференцию друг с другом. Например, в браузере 1 есть видеопотоки A (локальное видео), видеопотоки B (удаленное видео); браузер 2 имеет видеопотоки B (локальное видео), видеопотоки A (удаленное видео). Поэтому, когда я нахожусь в браузере 1 и пытаюсь поделиться экраном, поток общего экрана должен заменить локальное видео в браузере 1 и удаленное видео в браузере 2.

Но прямо сейчас я могу сделать так, чтобы общий экран заменял локальное видео в браузере 1, браузер 2 не имеет никаких изменений, не могу видеть никаких изменений в своем удаленном видео (которое является локальным видео в браузере 1). Я также не знаю, как вызвать изменения в браузере 2. мне нужно передавать потоки экрана на сервер? и соответственно изменить удаленный поток?

Вот мой код на javascript:

$(function() {
    var brokerController, ws, webRTC, localid; 
    // ws = new XSockets.WebSocket("wss://rtcplaygrouund.azurewebsites.net:443", ["connectionbroker"], {
    ws = new XSockets.WebSocket("ws://localhost:4502", ["connectionbroker"], {
        ctx: "152300ed-4d84-4e72-bc99-965052dc1e95"
    }); 

    var addRemoteVideo = function(peerId,mediaStream) {
        var remoteVideo = document.createElement("video");
        remoteVideo.setAttribute("autoplay", "true");
        remoteVideo.setAttribute("rel",peerId);
        attachMediaStream(remoteVideo, mediaStream);                       
        remoteVideo.setAttribute("class", "col-md-3");
        remoteVideo.setAttribute("height", $( document ).height() * 0.3);
        remoteVideo.setAttribute("id", 'remoteVideo');                      
        $("#videoscreen").append(remoteVideo);
    };

    var onConnectionLost = function (remotePeer) {
        console.log("onconnectionlost");
        var peerId = remotePeer.PeerId;
        var videoToRemove = $("video[rel='" + peerId + "']");
        videoToRemove.remove();
    };

    var oncConnectionCreated = function() {
        console.log("oncconnectioncreated", arguments);
    }

    var onGetUerMedia = function(stream) {
    console.log("Successfully got some userMedia , hopefully a goat will appear..");
    webRTC.connectToContext(); // connect to the current context?
    };

    var onRemoteStream = function (remotePeer) {      
    addRemoteVideo(remotePeer.PeerId, remotePeer.stream);
    console.log("Opps, we got a remote stream. lets see if its a goat..");

    };

    var onLocalStream = function(mediaStream) {
    console.log("Got a localStream", mediaStream.id);
    localid = mediaStream.id;
    console.log("check this id:  meadiastram id ", mediaStream.id);

    var video = document.createElement("video");
    video.setAttribute("height", "100%");
    video.setAttribute("autoplay", "true");
    video.setAttribute("id", "localvideo");
    video.setAttribute("name", mediaStream.id);

    attachMediaStream(video, mediaStream);                  
    $("#videoscreen").append(video);

    $('#share').click(function() {

        getScreenId(function (error, sourceId, screen_constraints) {

            navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
            navigator.getUserMedia(screen_constraints, function (stream) {
                $('#localvideo').attr('src', URL.createObjectURL(stream));                     

            }, function (error) {
                console.error(error);
                });
            });
        });

    };

    var onContextCreated = function(ctx) {
    console.log("RTC object created, and a context is created - ", ctx);
    webRTC.getUserMedia(webRTC.userMediaConstraints.hd(true), onGetUerMedia, onError);
    };

    var onOpen = function() {
        console.log("Connected to the brokerController - 'connectionBroker'");

        webRTC = new XSockets.WebRTC(this);
        webRTC.onlocalstream = onLocalStream;
        webRTC.oncontextcreated = onContextCreated;
        webRTC.onconnectioncreated = oncConnectionCreated;
        webRTC.onconnectionlost = onConnectionLost;       
        webRTC.onremotestream = onRemoteStream;
    };

    var onConnected = function() {
        console.log("connection to the 'broker' server is established");
        console.log("Try get the broker controller form server..");
        brokerController = ws.controller("connectionbroker");
        brokerController.onopen = onOpen;

    };              
    ws.onconnected = onConnected;

}); 

Я использую xsocket в качестве сервера, а коды для совместного использования кликов и изменения локального потока с потоками экрана общего доступа очень просты:

$('#share').click(function() {
    getScreenId(function (error, sourceId, screen_constraints) {
        navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
        navigator.getUserMedia(screen_constraints, function (stream) {
            $('#localvideo').attr('src', URL.createObjectURL(stream));

        }, function (error) {
               console.error(error);
           });
    });

Любая помощь или предложение были бы благодарны.

Спасибо, что указали на другой пост: Как добавить трек в MediaStream в WebRTC, но я не думаю, что они такие же. И также я не уверен, как повторно согласовать удаленное соединение в этом случае.

Файл Xsocket.webrtc.js для подключения webrtc: https://github.com/XSockets/XSockets.WebRTC/blob/master/src/js/XSockets.WebRTC.latest.js

Как я мог бы повторно согласовать удаленное соединение в этом случае?