WebRTC remote video is black

Question

I am trying to follow the 'getting started' WebRTC guide on: http://www.html5rocks.com/en/tutorials/webrtc/basics/

What I am trying to achieve is to have a video connection between two peers. However when I share the webcam (press the allow button in chrome) the remoteVideo is black on the remote side.

My script:

var pc;
var sdpConstraints = {'mandatory': { 'OfferToReceiveAudio':true, 'OfferToReceiveVideo':true }};
var constraints = {video: true, audio: true};
var socket = io.connect();

function start(isCaller) {
    var servers = {"iceServers": [{ "url": "stun:stun.l.google.com:19302"}]};
    pc = new RTCPeerConnection(servers);

    pc.onicecandidate = function(event) {
        if(event.candidate) {
            socket.emit('candidate', {'candidate': event.candidate});
        }
    }

    pc.onaddstream = function(event) {
        attachMediaStream(remoteVideo, event.stream);
    }

    getUserMedia(constraints, function(stream) {
        attachMediaStream(localVideo, stream);
        pc.addStream(stream);

        if(isCaller) {
            pc.createOffer(gotDescription, null, sdpConstraints);
        } else {
            pc.createAnswer(pc.remoteDescription, gotDescription);
        }

        function gotDescription(desc) {
            pc.setLocalDescription(desc);
            socket.emit('sdpMessage', {'sdpMessage': desc});
        }
    }, printError);
}

socket.on('gotMessage', function(data) {
    if(!pc) { start(false); }

    if(data.remoteSDP) {
        pc.setRemoteDescription(new RTCSessionDescription(data.remoteSDP));
    } else {
        pc.addIceCandidate(new RTCIceCandidate(data.remoteCandidate), onAddIceCandidateSuccess, onAddIceCandidateError);
    }
});

The HTML contains:

<button onclick="start(true)">HIT ME</button>
<video id="localVideo" autoplay></video>
<video id="remoteVideo" autoplay></video>

part of the server.js

serv_io.sockets.on('connection', function(socket) {
    socket.on('candidate', function(data) {
        socket.broadcast.emit('gotMessage', {'remoteCandidate': data.candidate});
    });

    socket.on('sdpMessage', function(data) {
        socket.broadcast.emit('gotMessage', {'remoteSDP': data.sdpMessage});
    });
}

The console does log an addIceCandidate succes, and when I log the media stream on the receiving end it's id and label correspond to the sender's id & label...

What am I doing wrong?

I also get this error: "Failed to execute 'createAnswer' on 'RTCPeerConnection': The callback provided as parameter 1 is not a function."

Answer 1

Your usage of the API is incorrect. The blog you have mentioned has the same mistakes. Please see the correct API here and also take a look at the apprtc example.

The createAnswer signature is:

pc.createAnswer(successCallback, failureCallback, constraints);

Answer 2

You just need to right click in the video section and select show controls, and the video will show. It's really simple!

Answer 3

This happened to me when my computer was behind the proxy server. I solved this problem by using TURN server. Also list TURN server in iceServers.