Example of createSignalingChannel() in HTML5

WebRTC enables peer-to-peer communication between browsers, requiring signaling for network information, session control, and media exchange. Developers can implement signaling using various protocols like SIP, XMPP, or custom two-way communication channels.

What is createSignalingChannel()?

The createSignalingChannel() function establishes a communication channel between peers to exchange connection information before direct peer-to-peer communication begins. This is essential for WebRTC setup.

Complete Example

var signalingChannel = createSignalingChannel();
var pc;
var configuration = {
    iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
};

// run start(true) to initiate a call
function start(isCaller) {
    pc = new RTCPeerConnection(configuration);
    
    // send any ice candidates to the other peer
    pc.onicecandidate = function (evt) {
        if (evt.candidate) {
            signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
        }
    };
    
    // once remote stream arrives, show it in the remote video element
    pc.onaddstream = function (evt) {
        remoteView.srcObject = evt.stream;
    };

    // get the local stream, show it in the local video element and send it
    navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
        selfView.srcObject = stream;
        pc.addStream(stream);
        
        if (isCaller) {
            pc.createOffer(gotDescription);
        } else {
            pc.createAnswer(pc.remoteDescription, gotDescription);
        }
        
        function gotDescription(desc) {
            pc.setLocalDescription(desc);
            signalingChannel.send(JSON.stringify({ "sdp": desc }));
        }
    });
}

signalingChannel.onmessage = function (evt) {
    if (!pc) {
        start(false);
    }
    
    var signal = JSON.parse(evt.data);
    
    if (signal.sdp) {
        pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
    } else if (signal.candidate) {
        pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
    }
};

How It Works

The signaling process follows these steps:

1. Initialize Connection: Create RTCPeerConnection with STUN server configuration
2. Handle ICE Candidates: Send network connectivity information to the remote peer
3. Media Stream Setup: Capture local media and display remote streams
4. Offer/Answer Exchange: Negotiate connection parameters through SDP (Session Description Protocol)
5. Message Processing: Handle incoming signaling messages for connection establishment

Key Components

Important Notes

This example uses deprecated APIs like navigator.getUserMedia and onaddstream. Modern implementations should use navigator.mediaDevices.getUserMedia() and ontrack event handlers. The signaling channel implementation depends on your chosen transport mechanism (WebSocket, Socket.IO, etc.).

Conclusion

The createSignalingChannel() function is crucial for WebRTC peer connection establishment. It handles the exchange of connection information before direct peer-to-peer communication begins, enabling real-time media streaming between browsers.