为什么“WebRTC 屏幕共享”在使用不同计算机时没有流式传输？

Question

我正在开发一个 Web 应用程序，就像一个在线教室，我想在其中共享计算机上的浏览器屏幕并在另一台计算机上查看它。 当我尝试从计算机共享屏幕并在另一台计算机上查看它时，我在 chrome 中收到错误“未捕获（承诺）DOMException：错误”。

我为此使用WebRTC ，使用WebSocket进行信号传输。 在后端，java jersey 将搜索并转发请求到适当的客户端。 我可以从一个浏览器窗口共享屏幕，并在同一台机器上的另一个浏览器窗口中查看它。 但是当我使用不同的计算机时，我收到此错误。 当我调试 RTCPeerConnection 对象时，它显示属性 connectionState 为失败，而 iceConnectionState 为断开连接。

Javascript：请求共享屏幕

 var urlS = [];
 var config = {iceServers: urlS}; 
 var $source = $('#monitor-src');
 $scope.context.peerConnection = new RTCPeerConnection();
 $scope.context.peerConnection.onicecandidate = function(event) 
     {
         console.log(event)
         if (event.candidate) 
         {
         var json = 
          {
            type:event.type,
            label:event.candidate.sdpMLineIndex,
            id:event.candidate.sdpMid,
            candidate:event.candidate
          }
          WebSocket.send({desc:json,usrId:$scope.context.me.id},$scope)
         } 
         else 
         {
         console.error("Failed to create ice candidate")
         }
    };
try
    {
        $scope.context.peerConnection.createOffer({offerToReceiveAudio: true,offerToReceiveVideo: true}).then(function(offer) 
            {
            return $scope.context.peerConnection.setLocalDescription(offer);
        }).then(function() 
            {
            WebSocket.send({desc:$scope.context.peerConnection.localDescription,callee:mentee.id,caller:$scope.context.me.id,usrId:$scope.context.me.id},$scope)
            });
     }
     catch(error)
     {
         console.error("onnegotiationneeded-"+error)
     }
    $scope.context.peerConnection.onnegotiationneeded = function()
    {
        console.error("onnegotiationneeded")
    };
    try
    {
        console.log($scope.context.peerConnection);
        $scope.context.peerConnection.ontrack = function(event) 
        {
        console.log("ontrack:"+event.streams.length)
        $source.parent()[0].srcObject= event.streams[0];        
        };

       $scope.context.peerConnection.onaddstream = function(event) 
       {
         console.log("onaddstream:"+event.stream)
         $source.parent()[0].srcObject = event.stream;
       };

    }
    catch(error)
    {
        console.error(error)
    }

Javascript:WebSocket 处理请求并发送响应

$rootScope.socket.onMessage(function(message)
    {
        data = angular.fromJson(message.data);
        if(data.type == 'offer')
        {
        var stream = null;
        //var urlS = [{urls: 'stun:192.168.1.16:8443'}];
        var urlS = [];
        var config = {iceServers: urlS};
        scope.context.peerConnection = new RTCPeerConnection();
        scope.context.peerConnection.setRemoteDescription(data).then(function(){
            return navigator.mediaDevices.getDisplayMedia({video:true,audio: true});
        }).then(function(stream){
            console.log(scope.context.peerConnection)
             scope.context.peerConnection.addStream(stream);
            stream.getTracks().forEach(function(track)
                    {
             //var rtpSender = 
            });
            scope.context.peerConnection.createAnswer().then(function(answer){
                return scope.context.peerConnection.setLocalDescription(answer)
            }).then(function()
            {
                send({desc:scope.context.peerConnection.localDescription,usrId:scope.context.me.id},scope)
            }).catch(function(error){
                console.error(error)});
        })
        }
        else if(data.type == 'answer')
        {
        scope.context.peerConnection.setRemoteDescription(data);

        }
        else if(data.type == 'icecandidate')
        {
        console.log("icecandidate:"+angular.toJson(data))
              var promise = scope.context.peerConnection.addIceCandidate(data.candidate).then(function success(){
                 console.log("ice success")
                 }).catch(function error(err)
                 {
                console.log(err);
                 });
        }
    });
    };

ontrack 和 onaddstream 事件在将流添加到对等连接时触发。 但是我在请求的对等方上一无所获。

Answer 1

我不是 JavaScript 专家，但您的urlS数组似乎为空。 尝试在您的urlS添加Turn和Stun服务器。

欲了解更多信息，请看 这里