Question

我尝试根据O'Reilly WebRTC课程使用socket.io制作WebRTC p2p应用程序。首先要做的是使用STUN服务器配置初始化对等连接：

var configuration = {
    'iceServers': [{
        'urls': 'stun:stun.l.google.com:19302'
    }]
};

rtcPeerConn = new webkitRTCPeerConnection(configuration);

启动信号的下一部分是定义建立WebRTC连接所需的几个处理程序。当这些准备好发送给对等方的冰候选人时，将触发第一个事件处理程序，并且该候选人将通过socket.io通道发送给其中的任何人。

// 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);
};

完整代码：

io.on('signal', function(data) {

    if (myUserType == "manager") {
    // here is checking user type customer/manager and show the elements for this user type
    }
    // ... //
    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));
        }
    }
});

创建RTCPeerConnection：

function startSignaling() {
    console.log("starting signaling...");
    rtcPeerConn = new webkitRTCPeerConnection(configuration);

    // 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);
    };

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

    // get a local stream, show it in our video tag and add it to be sent
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    navigator.getUserMedia({
        'audio': false,
        'video': true
    }, function (stream) {
        console.log("going to display my stream...");
        smallVideoArea.srcObject = stream;
        rtcPeerConn.addStream(stream);
    }, logError);

}

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);
}

为什么不显示远程视频？如果有人知道如何从本课程中修复代码，我将不胜感激

WebRTC不显示远程视频

0 个答案: