我正在开发一个网络应用程序,就像一个在线教室,我想在其中共享计算机上的浏览器屏幕并在另一台计算机上查看它。当我尝试从计算机共享屏幕并在另一台计算机上查看它时,我在 Chrome 中收到错误“未捕获( promise )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 事件。但我在所请求的对等点上一无所获。
最佳答案
我不是 JavaScript 专家,但您的 urlS
数组似乎是空的。尝试在您的 urlS
中添加 Turn
和 Stun
服务器。
有关更多信息,请查看 here
关于javascript - 为什么使用不同电脑时 "WebRTC Screen sharing"不流?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57708426/