Question

亲爱的朋友们我正在尝试构建测试应用程序，它允许将浏览器窗口连接到自身（从用户的摄像头传输视频数据）。最终结果是在页面上获得两个视频流，一个来自摄像头直接和另一个来自浏览器在本地制作的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);

在实例化RTCPeerconnection对象后，不执行onaddstream方法

1 个答案: