WebRTC远程视频无法显示

Question

我尝试创建自己的简单webrtc应用程序并获得在线课程以学习本教程。不幸的是，源代码已过时，我从开发控制台修复了一些旧的api。因此，控制台不会出现更多错误，但我也会收到没有远程视频源。

这是我坚持的代码。我不明白为什么这个日志根本没有出现。

// once remote stream arrives, show it in the main video element
rtcPeerConn.ontrack = function (evt) {
    console.log("going to add their stream...");
    mainVideoArea.srcObject = evt.stream;

};

在这里，我用ontrack api替换了已弃用的URL.createObjectURL。

这是我的完整信令代码：

io = io.connect();
var myName = "";
var theirName = "";
var myUserType = "";
var configuration = {
    'iceServers': [{
        'urls': 'stun:stun.l.google.com:19302'
    }]
};
var rtcPeerConn;
var dataChannel;
var mainVideoArea = document.querySelector("#mainVideoTag");
var smallVideoArea = document.querySelector("#smallVideoTag");
var dataChannelOptions = {
    ordered: false, //no guaranteed delivery, unreliable but faster 
    maxPacketLifeTime: 1000, //milliseconds
};


io.on('signal', function(data) {
    if (data.user_type == "doctor" && data.command == "joinroom") {
        console.log("The doctor is here!");
        if (myUserType == "patient") {
            theirName = data.user_name;
            document.querySelector("#messageOutName").textContent = theirName;
            document.querySelector("#messageInName").textContent = myName;
        }
        //Switch to the doctor listing
        document.querySelector("#requestDoctorForm").style.display = 'none';
        document.querySelector("#waitingForDoctor").style.display = 'none';
        document.querySelector("#doctorListing").style.display = 'block';
    }
    else if (data.user_type == "patient" && data.command == "calldoctor") {
        console.log("Patient is calling");
        if (!rtcPeerConn) startSignaling();
        if (myUserType == "doctor") {
            theirName = data.user_name;
            document.querySelector("#messageOutName").textContent = theirName;
            document.querySelector("#messageInName").textContent = myName;
        }
        document.querySelector("#doctorSignup").style.display = 'none';
        document.querySelector("#videoPage").style.display = 'block';
    }
    else if (data.user_type == 'signaling') {
        if (!rtcPeerConn) startSignaling();
        var message = JSON.parse(data.user_data);
        if (message.sdp) {
            rtcPeerConn.setRemoteDescription(new RTCSessionDescription(message.sdp), function () {
                // if we received an offer, we need to answer
                if (rtcPeerConn.remoteDescription.type == 'offer') {
                    rtcPeerConn.createAnswer(sendLocalDesc, logError);
                }
            }, logError);
        }
        else {
            rtcPeerConn.addIceCandidate(new RTCIceCandidate(message.candidate));
        }
    }
}); 

function startSignaling() {
    console.log("starting signaling...");

    rtcPeerConn = new RTCPeerConnection(configuration);

    dataChannel = rtcPeerConn.createDataChannel('textMessages', dataChannelOptions);

    dataChannel.onopen = dataChannelStateChanged;
    rtcPeerConn.ondatachannel = receiveDataChannel;

    // send any ice candidates to the other peer
    rtcPeerConn.onicecandidate = function (evt) {
        if (evt.candidate)
            io.emit('signal',{"user_type":"signaling", "command":"icecandidate", "user_data": JSON.stringify({ 'candidate': evt.candidate })});
        console.log("completed sending an ice candidate...");
    };

    // let the 'negotiationneeded' event trigger offer generation
    rtcPeerConn.onnegotiationneeded = function () {
        console.log("on negotiation called");
        rtcPeerConn.createOffer(sendLocalDesc, logError);
        mainVideoArea.srcObject = stream;
    };

    // once remote stream arrives, show it in the main video element
    rtcPeerConn.ontrack = function (evt) {
        console.log("going to add their stream...");
        mainVideoArea.srcObject = evt.stream;

    };



    navigator.getWebcam = (navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.moxGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({  audio: true, video: true })
        .then(function (stream) {
        console.log("going to display my stream...");
        smallVideoArea.srcObject = stream;
        rtcPeerConn.addStream(stream);

         })
         .catch(function (e) { logError(e.name + ": " + e.message); });
    }
    else {
    navigator.getWebcam({ audio: true, video: true }, 
         function (stream) {
            console.log("going to display my stream...");
            smallVideoArea.srcObject = stream;
            rtcPeerConn.addStream(stream);
         }, 
         function () { logError("Web cam is not accessible."); });
    }

}

function sendLocalDesc(desc) {
    rtcPeerConn.setLocalDescription(desc, function () {
        console.log("sending local description");
        io.emit('signal',{"user_type":"signaling", "command":"SDP", "user_data": JSON.stringify({ 'sdp': rtcPeerConn.localDescription })});
    }, logError);
}

function logError(error) {
}

感谢。