onaddstream method is not executed after RTCPeerconnection object is instantiated

Question

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

Here is the full code : https://gist.github.com/johannesMatevosyan/8e4529fdcc53dd711479

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

score 3 · Accepted Answer · answered Jan 14 '16 at 17:35

3

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

answered Jan 14 '16 at 17:35

Javier Conde

2,553
17
25

thanks for the answer, I tried your code, firefox shows that "ReferenceError: RTCIceCandidate is not defined" and "ICE failed, see about:webrtc for more details" http://screencast.com/t/JWgbW4wT – johannesMatevosyan Jan 14 '16 at 17:56
Try changing `RTCIceCandidate` by `mozRTCIceCandidate` – Javier Conde Jan 14 '16 at 18:01
great, it works!!! so the reason was that RTCIceCandidate candidate is not compatible with firefox, right? – johannesMatevosyan Jan 14 '16 at 18:07
That´s it, there are many differences in the API functions for different browsers. For example, this code won't work in Chrome. If you plan to deploy some WebRTC app I'd recommend to use adapter.js so it works on different browsers: https://github.com/webrtc/adapter/ – Javier Conde Jan 14 '16 at 18:17
thanks, I also noticed that offer/answer process is not done without error callbacks, have you any idea why it is like that, because I have not meet that approach in literature? – johannesMatevosyan Jan 14 '16 at 18:26
According to the MDN reference, that argument is mandatory (non-optional): https://developer.mozilla.org/es/docs/Web/API/RTCPeerConnection#createOffer but I don't know why the decided to make it that way. In my opinion, being undefined should mean "if there's an error, don't do anything". – Javier Conde Jan 14 '16 at 18:30
This is a great example of why they made it that way. At least you got an error when things didn't work. Btw, the `moz` prefixes will be removed in the next version of Firefox (44), but using adapter.js is still a good idea until browsers converge. – jib Jan 15 '16 at 02:45

onaddstream method is not executed after RTCPeerconnection object is instantiated

1 Answers1

Linked