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

Posted 2023-02-16

【中文标题】实例化 RTCPeerconnection 对象后不执行 onaddstream 方法

【英文标题】：onaddstream method is not executed after RTCPeerconnection object is instantiated

【发布时间】：2016-01-14 17:10:12

【问题描述】：

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

【参考方案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);

【讨论】：

谢谢你的回答，我试过你的代码，firefox显示“ReferenceError: RTCIceCandidate is not defined”和“ICE failed, see about:webrtc for more details”screencast.com/t/JWgbW4wT

尝试将RTCIceCandidate 更改为mozRTCIceCandidate

太棒了，它有效！！！所以原因是 RTCIceCandidate 候选人与 firefox 不兼容，对吧？

就是这样，不同浏览器的API函数有很多不同。例如，此代码在 Chrome 中不起作用。如果您计划部署一些 WebRTC 应用程序，我建议您使用 adapter.js，以便它可以在不同的浏览器上运行：github.com/webrtc/adapter

谢谢，我还注意到，offer/answer 过程不会在没有错误回调的情况下完成，你知道为什么会这样，因为我在文献中没有遇到这种方法吗？