Uncaught (in promise) DOMException: Error processing ICE candidate WebRTC RTCIceCandidate - vuejs2

Question

turns out this error please help where the problem
** Uncaught (in promise) DOMException: Error processing ICE candidate **
here is the source code of the call
ConOut.getStartScreenSharing => ConIn.socket.on('OnMessage') => onOffer()
there the getStartScreenSharing function is called
did everything according to the example
using Chrome 68.0.3440.106 browser
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)
}
};
})
}
};
here we wait for the Offer and answer
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)
}
};
})
}
};

Answer 1

here is the code that works without errors
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;
}
};