webRTC ReferenceError: webkitRTCPeerConnection is not defined

Question

I am study about learning WebRTC book and create a demo 4 chapter. I am gating an error in console:

ReferenceError: webkitRTCPeerConnection is not defined

and not understand what can I confi the "iceServers":

Here is my javascript code

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


//This function will create our RTCPeerConnection objects, set up the SDP offer and response, and find the ICE candidates for both peers. page 48

function startPeerConnection(stream) {
    var configuration = {
        // Uncomment this code to add custom iceServers
        "iceServers": [{ "url": "stun:stun.1.google.com:19302" }]
    };
    yourConnection = new webkitRTCPeerConnection(configuration);
    theirConnection = new webkitRTCPeerConnection(configuration);

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


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

and it output like this..

Please let me know why my video not working properly? Please help me to do this

learning WebRTC

Answer 1

Change:

yourConnection = new webkitRTCPeerConnection(configuration);

into:

yourConnection = new RTCPeerConnection(configuration);

as webkitRTCPeerConnection is for Chrome browsers, and the code already defines window.RTCPeerConnection in hasRTCPeerConnection so that it works for most browsers (inclusing Firefox that you are using).

[EDIT]

Your logic is not correct in this program. You are creating both connections like this:

yourConnection = new webkitRTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration);

This is not logical. Your program is one peer of a 2-peers connection. You need to setup your connection only. Also, you need some kind of messaging server to transmit SDP messages between the two peers. This is not the role of the ICE server.

Your ICE configuration is fine. You are using a public Google STUN server to handle the streaming and the public IP discovery necessary for establishing the WebRTC connection.