DOMException:"Cannot create an offer with no local tracks, no offerToReceiveAudio/Video, and no DataChannel" webRTC app

Question

I'm trying to develop a video conferencing web application with webrtc. I'm using socket.io for signaling. When a room is created by one participant and joined by another. It shows on the server terminal that they joined successfully, but on the browser only the local video is streaming and the remote is not. As a DOMException on my firefox browser is displayed as :

DOMException code: 0 columnNumber: 0 data: null filename: "" lineNumber: 0 message: "Cannot create an offer with no local tracks, no offerToReceiveAudio/Video, and no DataChannel." name: "InternalError" result: 0 stack: "" proto: DOMExceptionPrototype { name: Getter, message: Getter, INDEX_SIZE_ERR: 1, … }

At client.js:81:68

My client script is as follow

var divConsultingRoom = document.getElementById("consultingRoom");
var localVideo = document.getElementById("localVideo");
var remoteVideo = document.getElementById("remoteVideo");
var localStream;
var remoteStream;
var rtcPeerConnection;
//Stun Server
var iceServers={
    'iceServers':[
        {'urls':'stun:stun.services.mozilla.com'},
        {'urls':'stun:stun.l.google.com:19302'}
        ]
}
var streamConstraints = {audio:true,video:true};
var isCaller;

//Socket.io server connection
var socket= io();

//button click event
btnGoRoom.onclick = function(){
    if(inputRoomNumber.value===""){
       alert("Please type a room number")
       }
    else{
        roomNumber= inputRoomNumber.value;
        socket.emit('create or join',roomNumber);
        divSelectRoom.style="display:none;";
//        divConsultingRoom.style="display:block;";
    }

};

//when server emits created
socket.on('created',function(room){
          //caller gets user media devices with the defined constraints
          navigator.mediaDevices.getUserMedia(streamConstraints).then(function(stream){
                localStream = stream;
                //localVideo.src = URL.createObjectURL(stream);
                localVideo.srcObject = stream;
                isCaller=true;

            }).catch(function(err){
    console.log('An error ocurred when accessing media devices');
});
          });

//when server emits joined
socket.on('joined',function(room){
    navigator.mediaDevices.getUserMedia(streamConstraints).then(function(stream){
        localStream= stream;
        //localVideo.src= URL.createObjectURL(stream);
         localVideo.srcObject = stream;

        socket.emit('ready',roomNumber);
    }).catch(function(err){
        console.log('An error ocurred when accessing media devices');
    });
});


//when server emits ready 
socket.on('ready',function(){
    if(isCaller){
        //creates an RTCPeerConncetion object
        rtcPeerConnection = new RTCPeerConnection(iceServers);

        //add event listeners to the newly created object
        rtcPeerConnection.onicecandidate = onIceCandidate;
        rtcPeerConnection.ontrack= onAddStream;

        //adds the current local stream to the object
        rtcPeerConnection.ontrack(localStream);

        //prepare the offer
        rtcPeerConnection.createOffer(setLocalAndOffer,function(e){console.log(e)},setSdpConstraints);
    }
});

var setSdpConstraints= {
        mandatory: {
            'OfferToReceiveAudio': true,
        'OfferToReceiveVideo': true
        },
        'OfferToReceiveAudio': true,
        'OfferToReceiveVideo': true

    };

//when servers emits offer
socket.on('offer',function(event){
    if(!isCaller){
        rtcPeerConnection = new RTCPeerConnection(iceServers);

        rtcPeerConnection.onicecandidate=onIceCandidate;
        rtcPeerConnection.onaddstream = onAddStream;

        rtcPeerConnection.addStream(localStream);

        rtcPeerConnection.createAnswer(setLocalAndAnswer,function(e){console.log(e)});
    }
});


socket.on('answer',function(event){
    rtcPeerConnection.setRemoteDescription(new RTCSessionDescription(event));
});

socket.on('candidate',function(event){
    var candidate = new RTCIceCandidate({
        sdpMLineIndex:event.label,
        candidate:event.candidate
    });
    rtcPeerConnection.addIceCandidate(candidate);
});

function onAddStream(event){
   // remoteVideo.src= URL.createObjectURL(event.stream);
    remoteVideo.srcObject = event.stream;
    remoteStream= event.stream;
}

function onIceCandidate(event){
    if(event.candidate){
        console.log('sending ice candidate');
        socket.emit('candidate',{
                    type:'candidate',
                    lable: event.candidate.sdpMLineIndex,
                    id: event.candidate.sdpMid,
                    candidate:event.candidate.candidate,
                    room:roomNumber
                    })
    }
}

function setLocalAndOffer(sessionDescription){
    rtcPeerConnection.setLocalDescription(sessionDescription);
    socket.emit('offer',{
        type:'offer',
        sdp:sessionDescription,
        room: roomNumber
    });
}

function setLocalAndAnswer(sessionDescription){
    rtcPeerConnection.setLocalDescription(sessionDescription);
    socket.emit('answer',{
        type:'answer',
        sdp:sessionDescription,
        room:roomNumber
    });
}

client.js:81 is :

 rtcPeerConnection.createOffer(setLocalAndOffer,function(e){console.log(e)},setSdpConstraints);

Thank you

Answer 1

You have to do addTrack or addStream before creating an offer.