두 피어의 WebRTC에서 getScreenId.js를 사용하여 화면 공유

Question

webrtc 화상 회의에서 공유 화면 기능을 구현하려고합니다. 제안에서, 나는 이제 https://www.webrtc-experiment.com/getScreenId/을 사용하는 muaz-khan의 해결책을 따른다. 한 피어의 응용 프로그램 이미지를 쉽게 캡처하고 비디오 스트림을 캡처 스트림으로 바꿀 수 있습니다. 그러나 화상 회의 실험이므로 두 브라우저가 서로 화상 회의를해야합니다. 예를 들어, 브라우저 1, 비디오 스트림 A (로컬 비디오), 비디오 스트림 B (원격 비디오); 브라우저 (2)는 비디오 스트림 B (로컬 비디오), 비디오 스트림 A (원격 비디오)를 갖는다. 따라서 브라우저 1에 있고 화면 공유를 시도 할 때 공유 화면 스트림이 브라우저 1의 로컬 비디오와 브라우저 2의 원격 비디오를 대체해야합니다.

그러나 지금은 공유 화면을 대체 할 수 있습니다 브라우저 1의 로컬 비디오, 브라우저 2에는 변경 사항이 없으며 원격 비디오 (브라우저 1에서 로컬 비디오)의 변경 사항을 볼 수 없습니다. 브라우저 2에서도 변경 사항을 트리거하는 방법을 모르겠습니다. 공유 화면 스트림을 서버에 신호로 보내야합니까? 그에 따라 원격 스트림을 변경 하시겠습니까? 여기

내 자바 스크립트 코드입니다 : 나는 서버로 xsocket 사용하고

$(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; 

}); 

및 클릭 공유에 대한 코드 및 공유와 로컬 스트림을 변경 화면 스트림 그냥이 매우 간단합니다 :

$('#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에서 이전 로컬 스트림을 제거한 다음 로컬 공유에 새 공유 화면 스트림을 추가하십시오. 그 동안 datachanel을 사용하여 이전 로컬 스트림 ID를 다른 피어로 보내고 오래된 원격 비디오도 제거하십시오.

가장 중요한 것은 스트림 재 작성 (재협상)입니다. 그러면 공유 화면에 공유 화면이 표시됩니다.

코드 : 명령이 서버에서 오래된 비디오 스트림을 제거 할 수

$('#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); 
    }); 
}); 

의