实例化RTCPeerconnection对象后不执行onaddstream方法 [英] onaddstream method is not executed after RTCPeerconnection object is instantiated

问题描述

亲爱的朋友们，我正在尝试构建允许将浏览器窗口连接到自身的测试应用程序(来自用户相机的视频数据流).最终结果是在页面上获得两个视频流，一个直接来自相机，另一个来自浏览器在本地建立的 WebRTC 连接.我猜问题是在实例化 RTCPeerconnection 对象时没有调用 onaddstream 方法，因此第二个屏幕没有从 window.URL.createObjectURL(e.stream) 接收 url;

Dear friends I am trying to build test application which allows to connect a browser window to itself (streming video data from user's camera).The final result is to get two video streams on the page, one coming from the camera directly and the other coming from a WebRTC connection that the browser has made locally. I guess the problem is that onaddstream method is not invoked when RTCPeerconnection object is instantiated therefore the second screen does not recieve url from window.URL.createObjectURL(e.stream);

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

This is how it looks in browser: http://screencast.com/t/6dthclGcm

推荐答案

您的 onaddstream 事件未触发，因为您的连接尚未启动，您必须在此之前完成提供/应答过程该事件可以被触发.我在 Firefox 41.0.2 中尝试了您的代码，但由于您缺少错误回调方法，因此没有创建优惠，请尝试以下操作:

Your onaddstream event is not triggering because your connection is not started yet, you will have to get the offer/answer process done before that event can be triggered. I tried your code in Firefox 41.0.2 and the offer wasn't getting created because you are missing the error callback methods, try with the following:

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

这篇关于实例化RTCPeerconnection对象后不执行onaddstream方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！