为什么在使用其他计算机时“ 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数组似乎为空。尝试在Turn中同时添加Stun和urlS服务器。

有关更多信息，请看here