Websocket [InvalidStateError:“需要在addIceCandidate之前调用setRemoteDescription”代码:11
我使用WebRTC和websockets创建了一个简单的视频通话应用程序。 但是当我运行代码时,发生了以下错误 DomeException[InvalidStateError:“需要在addIceCandidate之前调用setRemoteDescription” 代码:11 我不知道如何解决这个错误。 下面是我的代码:Websocket [InvalidStateError:“需要在addIceCandidate之前调用setRemoteDescription”代码:11,websocket,webrtc,videochat,Websocket,Webrtc,Videochat,我使用WebRTC和websockets创建了一个简单的视频通话应用程序。 但是当我运行代码时,发生了以下错误 DomeException[InvalidStateError:“需要在addIceCandidate之前调用setRemoteDescription” 代码:11 我不知道如何解决这个错误。 下面是我的代码: enter code here var localVideo; var remoteVideo; var peerConnection; var uuid; var loca
enter code here
var localVideo;
var remoteVideo;
var peerConnection;
var uuid;
var localStream;
var peerConnectionConfig = {
'iceServers': [
{'urls': 'stun:stun.services.mozilla.com'},
{'urls': 'stun:stun.l.google.com:19302'},
]
};
function pageReady() {
uuid = uuid();
console.log('Inside Page Ready');
localVideo = document.getElementById('localVideo');
remoteVideo = document.getElementById('remoteVideo');
serverConnection = new WebSocket('wss://' + window.location.hostname +
':8443');
serverConnection.onmessage = gotMessageFromServer;
var constraints = {
video: true,
audio: true,
};
if(navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(constraints)
.then(getUserMediaSuccess).catch(errorHandler);
}else
{
alert('Your browser does not support getUserMedia API');
}
}
function getUserMediaSuccess(stream) {
localStream = stream;
localVideo.src = window.URL.createObjectURL(stream);
}
function start(isCaller) {
console.log('Inside isCaller');
peerConnection = new RTCPeerConnection(peerConnectionConfig);
peerConnection.onicecandidate = gotIceCandidate;
peerConnection.onaddstream = gotRemoteStream;
peerConnection.addStream(localStream);
if(isCaller) {
console.log('Inside Caller to create offer');
peerConnection.createOffer().
then(createdDescription).catch(errorHandler);
}
}
function gotMessageFromServer(message) {
console.log('Message from Server');
if(!peerConnection)
{
console.log('Inside !Peer Conn');
start(false);
}
var signal = JSON.parse(message.data);
// Ignore messages from ourself
if(signal.uuid == uuid) return;
if(signal.sdp) {
console.log('Inside SDP');
peerConnection.setRemoteDescription(new
RTCSessionDescription(signal.sdp)).then(function() {
// Only create answers in response to offers
if(signal.sdp.type == 'offer') {
console.log('Before Create Answer');
peerConnection.createAnswer().then(createdDescription)
.catch(errorHandler);
}
}).catch(errorHandler);
} else if(signal.ice) {
console.log('Inside Signal Ice');
peerConnection.addIceCandidate(new
RTCIceCandidate(signal.ice)).catch(errorHandler);
}
}
function gotIceCandidate(event) {
console.log('Inside Got Ice Candi');
if(event.candidate != null) {
serverConnection.send(JSON.stringify({'ice': event.candidate,
'uuid': uuid}));
}
}
function createdDescription(description) {
console.log('got description');
peerConnection.setLocalDescription(description).then(function() {
console.log('Inside Setting ');
serverConnection.send(JSON.stringify({'sdp':
peerConnection.localDescription, 'uuid': uuid}));
}).catch(errorHandler);
}
function gotRemoteStream(event) {
console.log('got remote stream');
remoteVideo.src = window.URL.createObjectURL(event.stream);
}
function errorHandler(error) {
console.log(error);
}
// Taken from http://stackoverflow.com/a/105074/515584
// Strictly speaking, it's not a real UUID, but it gets the job done here
function uuid() {
function s4() {
return Math.floor((1 + Math.random()) *
0x10000).toString(16).substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() +
s4() + s4();
}
这是我的代码,我不知道如何安排addIceCandidate和addRemoteDescription函数。WebRTC的工作方式(据我所知)如果你想发送媒体流进行视频对话,你必须让两位同事就如何相互交流达成协议,以便向你的同事提供报价,得到你的同事的答案,并选择一位ICE候选人进行交流
对于你来说,有一个很好的例子来看看如何实现这些函数,以及你可以访问的顺序,他对如何做到这一点有很好的理解
此时您可能已经有了问题的解决方案,但如果您没有,我会回复。您需要确保
peerConnection.addIceCandidate(新的RTICEScandidate(signal.ice))
在设置描述后调用。
在peerConnection完成设置说明之前,您收到ice候选并尝试将其添加到peerConnection
我也遇到过类似的情况,我创建了一个数组,用于存储在设置描述完成之前到达的候选项,以及一个检查描述是否已设置的变量。如果已设置描述,我会将候选项添加到peerConnection,否则我会将它们添加到数组中。(当您将变量设置为true时,还可以遍历数组并将所有存储的候选项添加到peerConnection。编辑:正如我所说的,此解决方案是一种反模式,您应该而不是以这种方式实现它。有关如何在保持合理流量的情况下解决此问题的更多信息,请遵循此答案和评论部分: TLDR:在信令信息到达后,不要立即调用
addIceCandidate
,而是将候选对象添加到队列中。调用setRemoteDescription
后,检查候选对象队列并对每个候选对象调用addIceCandidate
--
从中我了解到,在添加Ice候选数据之前,我们必须调用setRemoteDescription(offer)
因此,在@Luxior-answer的基础上,我做了以下工作:
- 当带有候选者的信令消息到达时:
- 检查是否设置了远程(通过布尔标志,即:
)remoteIsReady
- 如果是,请调用
addIceCandidate
- 如果不是,则添加到队列中
- 检查是否设置了远程(通过布尔标志,即:
- 调用
后(在应答信号或应答客户端操作中):setRemoteDescription
- 调用一个方法遍历候选队列,并对每个候选队列调用
addIceCandidate
- 将布尔标志(
)设置为trueremoteIsReady
- 空队
- 调用一个方法遍历候选队列,并对每个候选队列调用