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

Question

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

Но сейчас я могу сделать только экран совместного использования локальное видео в браузере 1, браузер 2 не имеет каких-либо изменений, cann't видеть какие-либо изменения в своем удаленном видео (которое является местным видео в браузере 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); 
      }); 
    }); 

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

Спасибо за то, что указал другой пост: How to addTrack in MediaStream in WebRTC, но я не думаю, что они одинаковы. А также я не уверен, как в этом случае пересмотреть дистанционную связь.

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

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

Answer 1

Я решил самостоятельно решить проблему, не заменяя локальный поток потоком общего доступа, вместо этого удаляю старый локальный поток из локального div, а затем добавляем новый поток общего экрана в локальный div. Тем временем отправьте старый локальный поток с помощью datachanel другому сверстнику и удалите это старое удаленное видео.

Самое главное - это очистить потоки (повторное обсуждение), затем в удаленном peer будет отображаться поток общего экрана.

Код:

$('#share').click(function() { 
    getScreenId(function (error, sourceId, screen_constraints) { 
     navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia; 
     navigator.getUserMedia(screen_constraints, function (stream) { 
      webRTC.removeStream(webRTC.getLocalStreams()[0]); 
      var id = $('#localvideo').attr('name'); 
      $('#localvideo').remove(); 
      brokerController.invoke('updateremotevideo', id); 
      webRTC.addLocalStream(stream); 
      webRTC.getRemotePeers().forEach(function (p) { 
       webRTC.refreshStreams(p); 
      }); 
     }, function (error) { 
       console.error(error); 
      }); 
    });    
}); 

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

brokerController.on('updateremotevideo', function(streamid){ 
    $(document.getElementById(streamid)).remove(); 
}); 

Это решение работает для меня. Хотя, если только хотите заменить локальный видеопоток потоком общего экрана, нам нужно создать предложение с помощью sdp и отправить sdp удаленному одноранговому узлу. Это сложнее.

Answer 2

getScreenId(function (error, sourceId, screen_constraints) { 
    navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia; 
    navigator.getUserMedia(screen_constraints, function (stream) { 
    navigator.getUserMedia({audio: true}, function (audioStream) { 
     stream.addTrack(audioStream.getAudioTracks()[0]); 
     var mediaRecorder = new MediaStreamRecorder(stream); 
     mediaRecorder.mimeType = 'video/mp4' 
     mediaRecorder.stream = stream; 
     self.setState({recorder: mediaRecorder, startRecord: true, shareVideo: true, pauseRecord: false, resumeRecord: false, stopRecord: false, downloadRecord: false, updateRecord: false}); 
     document.querySelector('video').src = URL.createObjectURL(stream); 
     var video = document.getElementById('screen-video') 
     if (video) { 
     video.src = URL.createObjectURL(stream); 
     video.width = 360; 
     video.height = 300; 
     } 
    }, function (error) { 
     alert(error); 
    }); 
    }, function (error) { 
    alert(error); 
    }); 
});