Исключение DOME: приложение WebRTC "Невозможно создать предложение без локальных треков, без предложения ToReceiveAudio/Video и без DataChannel"

Question

Я пытаюсь разработать веб-приложение для видеоконференций с помощью webrtc. Я использую socket.io для сигнализации. Когда комната создается одним участником и присоединяется к другому. Он показывает на терминале сервера, что они успешно подключились, но в браузере потоковое видео транслируется только локальное, а удаленное - нет. Как DOMException в моем браузере Firefox отображается как:

Код DOMException: 0 columnNumber: 0 data: null filename: "" lineNumber: 0 message: "Невозможно создать предложение без локальных треков, без offerToReceiveAudio/Video и без DataChannel." имя: "InternalError" результат: 0 стек: "" proto: DOMExceptionPrototype {name: Getter, сообщение: Getter, INDEX_SIZE_ERR: 1, … }

На client.js:81:68

Мой клиентский скрипт выглядит следующим образом

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 - это:

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

Спасибо

Answer 1

Вы должны сделать addTrack или addStream перед созданием предложения.