I have a basic webRTC application that supports video/audio communication and file sharing between two peers, The app runs as intended when I open it on Mozilla Firefox but when I run it on Google Chrome the onicecandidate returns null
My RTCPeerConnection
myConnection = new RTCPeerConnection();
Setting up the peer connection
myConnection.createOffer().then(offer => {
currentoffer = offer
myConnection.setLocalDescription(offer);
})
.then(function () {
myConnection.onicecandidate = function (event) {
console.log(event.candidate);
if (event.candidate) {
send({
type: "candidate",
candidate: event.candidate
});
}
};
send({
type: "offer",
offer: currentoffer
});
})
.catch(function (reason) {
alert("Problem with creating offer. " + reason);
});
On Mozilla Firefox you can see in the console log all the ICE candidates that are collected on each "onicecandidate" event

On Chrome the output is null

You should pass options object when calling createOffer() method, e.g.:
myConnection = new RTCPeerConnection();
var mediaConstraints = {
'offerToReceiveAudio': true,
'offerToReceiveVideo': true
};
myConnection.createOffer(mediaConstraints).then(offer => {
currentoffer = offer
myConnection.setLocalDescription(offer);
})
...// the rest of you code goes here
Alternatively, you can specify RTCRtpTransceiver before creating an offer:
myConnection = new RTCPeerConnection();
myConnection.addTransceiver("audio");
myConnection.addTransceiver("video");
myConnection.createOffer().then(offer => {
currentoffer = offer
myConnection.setLocalDescription(offer);
})
...// the rest of you code goes here
Sources:
WebRTC 1.0
MDN RTCPeerConnection.createOffer()
MDN RTCPeerConnection.addTransceiver()
Example -- GitHub
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With