SO WebRTC negotiationneeded Chrome bug
by jib1
HTML
<video id="video" height="120" width="160" autoplay></video><br>
<button id="call">Call!</button><br><div id="div"></div>
<script src="https://jan-ivar.github.io/localSocket/localSocket.js"></script>
JavaScript
const socket = new localSocket();
const constraints = {
audio: true,
video: true
};
const configuration = {
iceServers: [{
"url": "stun:23.21.150.121"
}, {
"url": "stun:stun.l.google.com:19302"
}]
};
const selfView = {};
const remoteView = video;
var pc = new RTCPeerConnection(configuration);
pc.onicecandidate = ({
candidate
}) => {
socket.send({
candidate: candidate
});
};
let negotiating;
pc.onnegotiationneeded = async () => {
console.log(`negotiating in ${pc.signalingState}`);
// Uncomment for workaround:
//if (negotiating) return;
//if (pc.signalingState != "stable") return;
negotiating = true;
try {
await pc.setLocalDescription(await pc.createOffer());
socket.send({
desc: pc.localDescription
});
} catch (err) {
console.error(err);
} finally {
negotiating = false;
}
};
pc.ontrack = (event) => {
// don't set srcObject again if it is already set.
if (remoteView.srcObject) return;
remoteView.srcObject = event.streams[0];
};
socket.onmessage = async ({data: {desc, candidate}}) => {
try {
if (desc) {
console.log("onmessage " + desc.type);
// if we get an offer, we need to reply with an answer
if (desc.type === 'offer') {
await pc.setRemoteDescription(desc);
const stream = await navigator.mediaDevices.getUserMedia(constraints);
stream.getTracks().forEach((track) => {
console.log(`adding ${track.kind} track`);
pc.addTrack(track, stream)
});
selfView.srcObject = stream;
await pc.setLocalDescription(await pc.createAnswer());
console.log(pc.localDescription);
socket.send({
desc: pc.localDescription
});
} else if (desc.type === 'answer') {
await pc.setRemoteDescription(desc).catch(err => console.log(err));
} else {
console.log('Unsupported SDP type.');
}
} else if (candidate) {
await pc.addIceCandidate(new...