Vuejs2 未捕获(承诺中)DOMEException:处理ICE候选WebRTC RTICE候选时出错
结果显示此错误,请帮助解决问题 **未捕获(承诺中)DomeException:处理ICE候选项时出错** 下面是调用的源代码 ConOut.getStartScreenSharing=>ConIn.socket.on('OnMessage')=>onOffer() 在那里调用getStartScreenSharing函数 一切都按照例子做 使用Chrome 68.0.3440.106浏览器Vuejs2 未捕获(承诺中)DOMEException:处理ICE候选WebRTC RTICE候选时出错,vuejs2,signalr,webrtc,Vuejs2,Signalr,Webrtc,结果显示此错误,请帮助解决问题 **未捕获(承诺中)DomeException:处理ICE候选项时出错** 下面是调用的源代码 ConOut.getStartScreenSharing=>ConIn.socket.on('OnMessage')=>onOffer() 在那里调用getStartScreenSharing函数 一切都按照例子做 使用Chrome 68.0.3440.106浏览器 import Vue from "vue"; export default class ConOut
import Vue from "vue";
export default class ConOut {
constructor() {
let t = this;
t.pc = new RTCPeerConnection();
this.socket = Vue.prototype.$signalR;
this.socket.on('OnMessage', (chName, message) => {
var desc = JSON.parse(message);
if (desc.type === 'candidate') {
t.pc.addIceCandidate(new RTCIceCandidate({
sdpMLineIndex: desc.label,
candidate: desc.candidate
}))
}
if (desc.type == 'answer') {
t.pc.setRemoteDescription(desc);
}
});
this.socket.start().then(function () {});
}
send = function (message) {
this.socket.invoke("SendOtherV2", this.channelName, JSON.stringify(message));
}
getStartScreenSharing() {
let t = this;
navigator.getUserMedia({
audio: false,
video: true
}, function (stream) {
t.pc.addStream(stream);
t.pc.createOffer().then(function (ff) {
t.pc.setLocalDescription(ff);
t.send({
type: "offer",
offer: ff
});
});
t.pc.onicecandidate = function (event) {
if (event.candidate) {
t.send({
type: 'candidate',
label: event.candidate.sdpMLineIndex,
id: event.candidate.sdpMid,
candidate: event.candidate.candidate
})
};
t.pc.onaddstream = function (s) {
t.CreateVideoTag(s)
}
};
})
}
};
我们在这里等待报价和答复
import Vue from "vue";
export default class ConIn {
constructor() {
let t = this;
t.pc = new RTCPeerConnection();
this.socket = Vue.prototype.$signalR;
this.socket.on('OnMessage', (chName, message) => {
var desc = JSON.parse(message);
if (desc.type === 'candidate') {
console.log(desc)
t.pc.addIceCandidate(new RTCIceCandidate({
sdpMLineIndex: desc.label,
candidate: desc.candidate
}))
} else {
t.onOffer(desc.offer)
}
});
this.socket.start().then(function () {});
}
send = function (message) {
this.socket.invoke("SendOtherV2", this.channelName, JSON.stringify(message));
}
onOffer(offer) {
let t = this;
navigator.getUserMedia({
audio: false,
video: true
}, function (stream) {
t.pc.addStream(stream);
t.pc.setRemoteDescription(new RTCSessionDescription(offer), function () {
t.pc.createAnswer(function (answer) {
t.pc.setLocalDescription(answer);
t.send(answer)
});
});
t.pc.onicecandidate = function (event) {
if (event.candidate) {
t.send({
type: 'candidate',
label: event.candidate.sdpMLineIndex,
id: event.candidate.sdpMid,
candidate: event.candidate.candidate
})
}
t.pc.onaddstream = function (s) {
t.CreateVideoTag(s)
}
};
})
}
};
下面是可以正常工作的代码 ConOut.js
import Vue from "vue";
export default class ConOut {
constructor() {
let t = this;
t.pc = new RTCPeerConnection();
t.pc.onicecandidate = function (event) {
if (event.candidate) {
t.send({
type: 'candidate',
candidate: event.candidate
})
};
};
t.pc.onaddstream = function (s) {
console.log('onaddstream')
t.createVideoTag(s)
}
this.socket = Vue.prototype.$signalR;
this.socket.on('OnMessage', (chName, message) => {
var desc = JSON.parse(message);
if (desc.type === 'candidate') {
t.pc.addIceCandidate(new RTCIceCandidate(desc.candidate))
}
if (desc.type == 'answer') {
t.pc.setRemoteDescription(new RTCSessionDescription(desc), function () {
console.log('Setting remote description by answer');
}, function (e) {
console.error(e);
});
}
});
this.socket.start().then(function () {
console.info('SignalR connection is opened.');
});
}
send = function (message) {
this.socket.invoke("SendOtherV2", this.channelName, JSON.stringify(message));
}
getStartScreenSharing() {
let t = this;
navigator.getUserMedia({
audio: false,
video: true
}, function (stream) {
t.pc.addStream(stream);
t.pc.createOffer().then(function (ff) {
t.pc.setLocalDescription(ff);
t.send({
type: "offer",
offer: ff
});
});
})
}
createVideoTag = function (s, isRemote = false) {
let videoContener = document.getElementById('videoContener');
let x = document.createElement("VIDEO");
x.setAttribute("width", "320");
x.setAttribute("height", "240");
x.srcObject = s.stream;
x.controls = true
x.playsinline = true
x.autoplay = true
videoContener.appendChild(x);
return x;
}
};
ConIn.js
import Vue from "vue";
export default class ConIn {
constructor() {
let t = this;
t.ic = [];
t.isSetRD = false
t.pc = new RTCPeerConnection();
t.pc.onicecandidate = function (event) {
if (event.candidate) {
t.send({
type: 'candidate',
candidate: event.candidate
})
};
};
t.pc.onaddstream = function (s) {
console.log('onaddstream')
t.createVideoTag(s)
}
this.socket = Vue.prototype.$signalR;
this.socket.on('OnMessage', (chName, message) => {
var desc = JSON.parse(message);
console.log(desc)
if (desc.type === 'candidate') {
setTimeout(function () {
t.pc.addIceCandidate(new RTCIceCandidate(desc.candidate))
}, 5000);
} else {
t.onOffer(desc.offer)
}
});
this.socket.start().then(function () {
if (t.enableLogs) {
console.info('SignalR connection is opened.');
}
});
}
send = function (message) {
this.socket.invoke("SendOtherV2", this.channelName, JSON.stringify(message));
}
onOffer(offer) {
let t = this;
navigator.getUserMedia({
audio: false,
video: true
}, function (stream) {
t.pc.addStream(stream);
t.pc.setRemoteDescription(new RTCSessionDescription(offer))
.then(() => t.pc.createAnswer())
.then(answer => {
t.pc.setLocalDescription(answer)
t.send(answer)
})
.catch(e => console.error(e));
})
}
createVideoTag = function (s, isRemote = false) {
let videoContener = document.getElementById('videoContener');
let x = document.createElement("VIDEO");
x.setAttribute("width", "320");
x.setAttribute("height", "240");
x.srcObject = s.stream;
x.controls = true
x.playsinline = true
x.autoplay = true
videoContener.appendChild(x);
return x;
}
};
您是否可以发布您的代码,以便其他人可以看到问题的原因?另外,请查看以了解如何在StackOverflow中提问。发生此错误的原因是未调用setRemoteDescription。现在,从源代码中看不出发生这种情况的原因……您是对的,有一部分是setRemoteDescription,但在t.pc.addIceCandidate(new RTCIceCandidate(desc.candidate))之后调用的,因为我在navigator.getUserMedia({感谢您的提示