WebRTC远程视频是黑色的

时间:2014-03-03 12:55:10

标签: javascript socket.io webrtc

我正在尝试遵循'入门'WebRTC指南: http://www.html5rocks.com/en/tutorials/webrtc/basics/

我想要实现的是在两个对等体之间建立视频连接。但是,当我共享网络摄像头时(按下chrome中的允许按钮),远程端的remoteVideo为黑色。

我的剧本:

var pc;
var sdpConstraints = {'mandatory': { 'OfferToReceiveAudio':true, 'OfferToReceiveVideo':true }};
var constraints = {video: true, audio: true};
var socket = io.connect();

function start(isCaller) {
    var servers = {"iceServers": [{ "url": "stun:stun.l.google.com:19302"}]};
    pc = new RTCPeerConnection(servers);

    pc.onicecandidate = function(event) {
        if(event.candidate) {
            socket.emit('candidate', {'candidate': event.candidate});
        }
    }

    pc.onaddstream = function(event) {
        attachMediaStream(remoteVideo, event.stream);
    }

    getUserMedia(constraints, function(stream) {
        attachMediaStream(localVideo, stream);
        pc.addStream(stream);

        if(isCaller) {
            pc.createOffer(gotDescription, null, sdpConstraints);
        } else {
            pc.createAnswer(pc.remoteDescription, gotDescription);
        }

        function gotDescription(desc) {
            pc.setLocalDescription(desc);
            socket.emit('sdpMessage', {'sdpMessage': desc});
        }
    }, printError);
}

socket.on('gotMessage', function(data) {
    if(!pc) { start(false); }

    if(data.remoteSDP) {
        pc.setRemoteDescription(new RTCSessionDescription(data.remoteSDP));
    } else {
        pc.addIceCandidate(new RTCIceCandidate(data.remoteCandidate), onAddIceCandidateSuccess, onAddIceCandidateError);
    }
});

HTML包含:

<button onclick="start(true)">HIT ME</button>
<video id="localVideo" autoplay></video>
<video id="remoteVideo" autoplay></video>

server.js

的一部分
serv_io.sockets.on('connection', function(socket) {
    socket.on('candidate', function(data) {
        socket.broadcast.emit('gotMessage', {'remoteCandidate': data.candidate});
    });

    socket.on('sdpMessage', function(data) {
        socket.broadcast.emit('gotMessage', {'remoteSDP': data.sdpMessage});
    });
}

控制台会记录addIceCandidate成功,当我在接收端记录媒体流时,它的id和标签对应于发送者的id&amp;标签...

我做错了什么?

我也遇到这个错误: “无法在'RTCPeerConnection'上执行'createAnswer':作为参数1提供的回调不是函数。”

3 个答案:

答案 0 :(得分:2)

您对API的使用不正确。你提到的博客也有同样的错误。请查看正确的API here,并查看apprtc example

createAnswer签名是:

pc.createAnswer(successCallback, failureCallback, constraints);

答案 1 :(得分:1)

您只需要右键单击视频部分并选择显示控件,即可显示视频。真的很简单!

enter image description here

答案 2 :(得分:0)

当我的计算机在代理服务器后面时,这发生在我身上。我通过使用TURN服务器解决了这个问题。还列出了iceServers中的TURN服务器。