Can't display remote stream

Question

I'm working on a webRTC app to do video broadcasting. The app works that way. - client A creates a channel; sees his local feed display (content loaded from /room), and waits. - clients B loads the page, clicks on a channel to join it.

• client A sends SDP offer, B receives it, sends answers, add remote stream and displays it.

Everything works fine except client B gets a black video element, with a MediaStream object inside it. the log seems fine... I'm lost, please have a look! I'll try and comment as clearly as possible but please ask for explanations if needed.

The script is as follow :

var pc_config = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};
    var pC = null;
    var localStream = null;
    var emitter = false;
    var mediaConstraints = {'mandatory': {
                      'OfferToReceiveAudio':false, 
                      'OfferToReceiveVideo':false }};

        var setLocal = function (sdp) {
        pC.setLocalDescription(sdp);
        console.log("Sending: SDP");
        console.log(sdp);
        socket.json.send(sdp);
    };

    function onRemoteStreamAdded(event) {
        console.log("Added remote stream" + event);
        video.src = window.URL.createObjectURL(event.stream);
        video.play();
    }

    function createPeerConnection() {
        console.log("Creating peer connection");
        pc_config.iceServers.push({
            "url": "turn:" + 'shirase.dev%40gmail.com' + "@" + 'numb.viagenie.ca',
            "credential": 'drkllr'
        });

        try {
            pC = new RTCPeerConnection(pc_config);
            console.log("Created peer connection" + pc_config);

        } catch (e) {
            console.log("Failed to create Peer Connection, exception: " + e.message);
        }
        pC.addEventListener("addstream", onRemoteStreamAdded, false);//receiver
        started = true;
        pC.onicecandidate = function(evt) {
            if (evt.candidate) {
                console.log('Sending ICE candidate...');
                console.log(evt.candidate);
                socket.json.send({
                        type: "candidate",
                        sdpMLineIndex: evt.candidate.sdpMLineIndex,
                        sdpMid: evt.candidate.sdpMid,
                        candidate: evt.candidate.candidate
                    });
            } else {
                console.log("End of candidates.");
            }
        };

The socket events are :

        var video = document.getElementById('video'),
        started = false;

    var channel = {
        create: function(){
            socket.emit('create');

            return false;
        },
        join: function(channelId){
            socket.emit('join', channelId);

            return false;
        }           
    };

    socket.on('channel_created', function () {
        $.get('/room', function(data) {
            $('#content').html(data);
        });
        emitter = true;
    }); 


    //fired by socket server when a new user joins
    socket.on('user_joined', function () {
        console.log('received');
        createPeerConnection();
        pC.addStream(localStream);//emitter
        console.log(pC);
        started = true;
        pC.createOffer(setLocal,null,mediaConstraints);
    });

    //peerconnection events from socket
    socket.on('message', function (evt) {
            if (evt.type === 'offer') {
                console.log("Received offer...");
                createPeerConnection();
                console.log('Creating remote session description...' );
                pC.setRemoteDescription(new RTCSessionDescription(evt));
                console.log('Sending answer...');
                pC.createAnswer(setLocal,null,mediaConstraints);

            } else if (evt.type === 'answer' && emitter) {
                console.log('Received answer...');
                console.log('Setting remote session description...' + evt);
                pC.setRemoteDescription(new RTCSessionDescription(evt));

            } else if (evt.type === 'candidate' && started) {
                console.log('Received ICE candidate...');
                var candidate = new RTCIceCandidate({
                        sdpMLineIndex: evt.sdpMLineIndex,
                        sdpMid: evt.sdpMid,
                        candidate: evt.candidate
                    });
                console.log(candidate);
                pC.addIceCandidate(candidate);

            } else if (evt.type === 'bye') {
                console.log("Received bye");
                stop();
            }
        });

Test : Start client A, Then B. After console prints :

On A :

Creating peer connection 

Created peer connection[object Object] 

Sending: SDP 

Sending ICE candidate... 

  **A few of those **

Received answer... 

Setting remote session description...

On B :

Received offer...

Creating peer connection

Created peer connection[object Object]

Creating remote session description... 

Sending answer... 

Received ICE candidate... 

**A few of those**

Added remote stream[object MediaStreamEvent] 

Sending: SDP 

And appears the black video element...

Any thoughts?

Answer 1

Set value true for both OfferToReceiveAudio and OfferToReceiveVideo:

var mediaConstraints = {
    'mandatory': {
        'OfferToReceiveAudio': true,
        'OfferToReceiveVideo': true
    }
};

These should be false only for data-only sessions.