I'm trying to make a video call using WebRTC on the local same machine. I can see the remote video on Firefox. But I can't see it on Chrome. When I console logged my code I found that event.candidate is null for both localPeerConnection.onicecandidate and remotePeerConnection.onicecandidate. So, I tested on Chrome again and found out that the connectionStatus is "new" and the iceGatheringState is "complete". On trying out Trickle ICE (https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/), I found that I wasn't getting any ice options on Chrome, but was for Firefox.
Thank you :)
Here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebRTC</title>
</head>
<body>
<video id="local" playsinline muted autoplay controls></video>
<video id="remote" playsinline autoplay controls></video>
<button id="startButton">Start</button>
<button id="callButton">Call</button>
<button id="hangupButton">Hang UP</button>
<script type="text/javascript">
// Stream info
var localStream, localPeerConnection, remotePeerConnection;
// Video tags
var localVideo = document.getElementById("local");
var remoteVideo = document.getElementById("remote");
// Buttons
var startButton = document.getElementById("startButton");
var callButton = document.getElementById("callButton");
var hangupButton = document.getElementById("hangupButton");
startButton.disabled = false;
callButton.disabled = true;
hangupButton.disabled = true;
var servers = null;
startButton.onclick = start;
callButton.onclick = call;
hangupButton.onclick = hangup;
function log(text){
console.log("At time"+(performance.now()/1000).toFixed(3)+"-->\n"+ text);
}
function successCallback(stream){
log("Received local stream");
if(navigator.mediaDevices.getUserMedia){
localVideo.srcObject = stream;
}
else{
console.error("GetUserMediaError",error);
}
localStream = stream;
callButton.disabled = false;
}
var constraints = {audio: true, video: true};
function start(){
log("Requesting local stream");
startButton.disabled = true;
navigator.mediaDevices.getUserMedia(constraints).then(successCallback);
}
function call(){
callButton.disabled = true;
hangupButton.disabled = false;
log("Starting Call");
if(navigator.mediaDevices.getUserMedia){
if(localStream.getVideoTracks().length > 0){
log("Using video device:" + localStream.getVideoTracks()[0].label);
}
if(localStream.getAudioTracks().length > 0){
log("Using audio device:" + localStream.getAudioTracks()[0].label);
}
}
localPeerConnection = new RTCPeerConnection(servers);
log("Created local peer connection object localPeerConnection");
localPeerConnection.onicecandidate = gotLocalIceCandidate;
localPeerConnection.onconnectionstatechange = function(event){
console.log("QWERTY");
}
remotePeerConnection = new RTCPeerConnection(servers);
log("Created remote peer connection object remotePeerConnection");
remotePeerConnection.onicecandidate = gotRemoteIceCandidate;
if (remotePeerConnection.addTrack !== undefined) {
remotePeerConnection.ontrack = ev => {
ev.streams.forEach(stream => doAddStream(stream));
}
} else {
remotePeerConnection.onaddstream = ev => {
doAddStream(ev.stream);
}
}
localStream.getTracks().forEach((track)=>{
localPeerConnection.addTrack(track, localStream);
});
// localPeerConnection.addStream(localStream);
log("Added localStream to localPeerConnection");
localPeerConnection.createOffer(gotLocalDescription, onSignalingError);
}
function gotLocalDescription(description){
localPeerConnection.setLocalDescription(description);
log("Offer from localPeerConnection: "+ description.sdp);
remotePeerConnection.setRemoteDescription(description);
remotePeerConnection.createAnswer(gotRemoteDescription, onSignalingError);
}
function gotRemoteDescription(description){
remotePeerConnection.setLocalDescription(description);
log("Answer from remotePeerConnection:"+description.sdp);
localPeerConnection.setRemoteDescription(description);
}
function hangup(){
log("Ending call");
localPeerConnection.close();
remotePeerConnection.close();
localPeerConnection = null;
remotePeerConnection = null;
hangupButton.disabled = true;
callButton.disabled = false;
}
function onSignalingError(error){
log("Failed to create signaling message: "+ error.name);
}
function gotLocalIceCandidate(event){
if(event.candidate){
remotePeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
log("Local ICE candidate: \n" + event.candidate.candidate);
}
}
function gotRemoteIceCandidate(event){
if(event.candidate){
localPeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
log("Remote ICE candidate: \n" +event.candidate.candidate);
}
}
function doAddStream(stream){
remoteVideo.srcObject = stream;
log("Received remote stream Do add Stream");
}
</script>
</body>
</html>
[1]: https://i.stack.imgur.com/gjNi4.png