Question

抱歉，如果这篇文章似乎重复了，但实际上任何类似的帖子都对我有所帮助，所以我决定再次问它，希望能解决这个问题。

var local;
var remote;
var localStream;
var remoteStream;
var localPeerConnection;

var configuration      = { "iceServers": [ {"url": "stun:provserver.televolution.net"} ] };
var mediaConstraints   = { 
    'mandatory': {
        'OfferToReceiveAudio': true,
        'OfferToReceiveVideo': true
    }
};
var socket             = io.connect('http:/xxx/');
var RTCPeerConnection  = webkitRTCPeerConnection || mozRTCPeerConnection;
navigator.getUserMedia = navigator.getUserMedia  || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
local                  = document.getElementById('person1');
remote                 = document.createElement('video');

localPeerConnection = new RTCPeerConnection( configuration );

navigator.webkitGetUserMedia({ audio: true, video: true }, function ( stream ) {
    localStream = stream;
    localPeerConnection.addStream( stream );
    local.src = URL.createObjectURL( stream );
    local.play();
});

localPeerConnection.onaddstream = function ( stream ) {
    console.log('stream received');
    remoteStream = stream.stream;
    document.getElementsByTagName('body')[0].appendChild( remote );
    remote.src = URL.createObjectURL( stream.stream );
    remote.play();
}

localPeerConnection.onicecandidate = function ( info ) {

    console.log('ICE candidate created');

    if ( info.candidate ) {
        socket.emit('candidate', info.candidate );
    } else {
        console.log('ICE candidate finished');
    }

}

socket.on('newUser', function ( data ) {

    console.log('Call received an accepted');

    localPeerConnection.setRemoteDescription( new RTCSessionDescription( data.description ));

    localPeerConnection.createAnswer(function( desc ) {
        console.log('sending answer');
        localPeerConnection.setLocalDescription( desc ); 
        socket.emit('accepted', {
            desc: desc
        });
      }, null, mediaConstraints);

});

socket.on('callAccepted', function ( data ) {
    console.log('Call accepted');
    localPeerConnection.setRemoteDescription( new RTCSessionDescription( data.desc ) );
});

socket.on('newCandidate', function ( data ) {

    var candidate = new RTCIceCandidate({ 
        sdpMLineIndex: data.sdpMLineIndex,
        candidate: data.candidate
    });

    localPeerConnection.addIceCandidate( candidate, function () {

    }, function ( err ) {   
        console.log( err );
    });

});

function start() {

    console.log('Call created');

    localPeerConnection.createOffer( function ( desc ) {

        localPeerConnection.setLocalDescription( desc );

        console.log('Local desc setted');

        socket.emit('newConnection', {
            description: desc
        });

    }, null, mediaConstraints);

}

function waitToVideo () {

    if ( remote.currentTime > 0 ) {

        console.log(2);
        document.getElementsByTagName('body')[0].appendChild( remote );
        remote.play();

    } else {
        setTimeout( waitToVideo, 100 );
    }

}

问题是我在控制台中没有收到任何错误，一切似乎都是正确的，但远程流视频是黑色的。我已经读过，这可能是ICE包的一个问题，但它们被发送得很好，当对等体连接到同一个网络时，我的代码就可以工作。

我尝试更改STUN服务器，但它仍无法正常工作。在收到所有ICE包之后，我还将流附加到视频元素，但仍无效。

我现在不做什么，我似乎有一些例子，代码非常相似，而且它们有效，所以我不知道是什么问题！

感谢先进

Answer 1

根据网络类型，您可能需要转弯服务器。这里有一个免费的：http://numb.viagenie.ca/

其中一个网络也可能阻止p2p连接，因为它使用随机端口

Answer 2

问题在于信令服务器。我真的建议使用TURN服务器，不要使用STUN谷歌服务器，因为我认为它只允许访问谷歌WebRTC示例。有一些WebRTC服务使用STUN服务器，但由于这个原因，它们无法正常工作。

两个不同网络之间的WebRTC视频流出错

2 个答案: