javascript - RTCPeerconnection对象实例化后不执行onaddstream方法

Question

亲爱的 friend 们，我正在尝试构建测试应用程序，该应用程序允许将浏览器窗口连接到自身(从用户摄像头传输视频数据)。最终结果是在页面上获取两个视频流，一个直接来自摄像头，一个来自摄像头。另一个来自浏览器在本地建立的 WebRTC 连接。我猜问题是实例化 RTCPeerconnection 对象时不会调用 onaddstream 方法，因此第二个屏幕不会从 window.URL.createObjectURL(e.stream); 接收 url

function hasUserMedia() {
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    return !!navigator.getUserMedia;
}

function hasRTCPeerConnection() {
    window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
    return !!window.RTCPeerConnection;
}

var yourVideo = document.querySelector('#yours'),
    theirVideo = document.querySelector('#theirs'),
    yourConnection, theirConnection;

if (hasUserMedia()) {
    navigator.getUserMedia({ video: true, audio: false }, function (stream) {
        yourVideo.src = window.URL.createObjectURL(stream);

        if (hasRTCPeerConnection()) {
            startPeerConnection(stream);
        } else {
            alert("Sorry, your browser does not support WebRTC.");
        }
    }, function (error) {
        console.log(error);
    });
} else {
    alert("Sorry, your browser does not support WebRTC.");
}

function startPeerConnection(stream) {
    var configuration = {
        "iceServers": [{ "url": "stun:192.168.1.100:9876" }] // this is address of a local server 
    };
    yourConnection = new mozRTCPeerConnection(configuration);
    theirConnection = new mozRTCPeerConnection(configuration);
console.log(theirConnection);

    // Setup stream listening
    yourConnection.addStream(stream);

    theirConnection.onaddstream = function (e) {
        theirVideo.src = window.URL.createObjectURL(e.stream);
    };

    // Setup ice handling
    yourConnection.onicecandidate = function (event) {
        if (event.candidate) {
            theirConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

    theirConnection.onicecandidate = function (event) {
        if (event.candidate) {
            yourConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

    // Begin the offer
    yourConnection.createOffer(function (offer) {
        yourConnection.setLocalDescription(offer);
        theirConnection.setRemoteDescription(offer);

        theirConnection.createAnswer(function (offer) {
            theirConnection.setLocalDescription(offer);
            yourConnection.setRemoteDescription(offer);
        });
    });
};

这是完整的代码:https://gist.github.com/johannesMatevosyan/8e4529fdcc53dd711479

这是它在浏览器中的样子:http://screencast.com/t/6dthclGcm

Answer 1

您的 onaddstream 事件未触发，因为您的连接尚未启动，您必须先完成提供/应答流程，然后才能触发该事件。我在 Firefox 41.0.2 中尝试了您的代码，但未创建优惠，因为您缺少错误回调方法，请尝试以下操作:

function error () { console.log('There was an error'); };

yourConnection.createOffer(function (offer) { console.log('Offer:'); console.log(offer);
    yourConnection.setLocalDescription(offer);
    theirConnection.setRemoteDescription(offer);

    theirConnection.createAnswer(function (answer) { console.log('Answer:'); console.log(answer);
        theirConnection.setLocalDescription(answer);
        yourConnection.setRemoteDescription(answer);
    }, error);
}, error);