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

Posted 2023-02-19

技术标签:

【中文标题】两个不同网络之间的 WebRTC 视频流出错【英文标题】：Error with WebRTC video stream between two different network 【发布时间】：2014-04-05 06:00:28 【问题描述】：

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

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 包后，我还将流附加到视频元素，但仍然无法正常工作。

我现在不知道该怎么办，我似乎有一些例子，代码非常相似，它们都可以工作，所以我不知道是什么问题！

谢谢你的进步

【问题讨论】：

你试过用 https 托管这个吗？我使用 https 提供静态数据，但我认为这不是问题。不完全确定。 【参考方案1】：

根据网络类型，您可能需要转向服务器。可以在这里免费获得一个：http://numb.viagenie.ca/

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

【讨论】：

我已经创建了一个帐户并更改为 TURN 服务器，但仍然无法正常工作。我没有收到来自 WebRTC chrome 内部控制台的任何错误，所以我不知道到底发生了什么。 google WebRTC 演示即使我在不同的网络中测试也能正常工作【参考方案2】：

问题在于信令服务器。我真的建议使用 TURN 服务器，不要使用 STUN google 服务器，因为我认为它只允许访问 Google WebRTC 示例。有一些 WebRTC 服务使用该 STUN 服务器，因此它们无法正常工作。

【讨论】：