Socket.io | WebRTC One-to-One Video Chat

HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?

Private ?? #123456789
  1. Using socket.io (over node.js) for signaling
  2. It is one-to-one peers connection

How to use PeerConnection.js?

// http://cdn.webrtc-experiment.com/socket.io/PeerConnection.js

var peer = new PeerConnection('http://domain:port');
peer.onStreamAdded = function(e) {
   document.body.appendChild(e.mediaElement);
};

// the easiest method of "manual" peers connection is
// call "sendParticipationRequest" and pass user-id of the target user
peer.sendParticipationRequest(userid);

// otherwise, call "startBroadcasting"
// (behind the scene) this function will be invoked
// recursively until a participant found
peer.startBroadcasting();

Simplest Demo

var offerer = new PeerConnection('http://domain:port', 'message', 'offerer');
offerer.onStreamAdded = function(e) {
   document.body.appendChild(e.mediaElement);
};
var answerer = new PeerConnection('http://domain:port', 'message', 'answerer');
answerer.onStreamAdded = function(e) {
   document.body.appendChild(e.mediaElement);
};
answerer.sendParticipationRequest('offerer');

getUserMedia is "in-your-own-hands"!

It is upto you to decide when to capture the stream; how to capture; and the quality of the stream.

function getUserMedia(callback) {
    var hints = {
        audio: true,
        video: {
            optional: [],

            // capture super-hd stream!
            mandatory: {
                minWidth: 1280,
                minHeight: 720,
                maxWidth: 1920,
                maxHeight: 1080,
                minAspectRatio: 1.77
            }
        }
    };

    navigator.getUserMedia(hints, function (stream) {
        //    you can use "peer.addStream" to attach stream
        //    peer.addStream(stream);
        // or peer.MediaStream = stream;

        callback(stream);

        // preview local video
        var video = document.createElement('video');
        video.src = URL.createObjectURL(stream);
        video.controls = true;
        video.muted = true;

        peer.onStreamAdded({
            mediaElement: video,
            userid: 'self',
            stream: stream
        });
    });
}

Want to use Socket.io over Node.js?

var channel = location.href.replace(/\/|:|#|%|\.|\[|\]/g, '');
var sender = Math.round(Math.random() * 999999999) + 999999999;

var SIGNALING_SERVER = 'https://signaling-muazkh.c9.io:443/';
io.connect(SIGNALING_SERVER).emit('new-channel', {
    channel: channel,
    sender: sender
});

var socket = io.connect(SIGNALING_SERVER + channel);
socket.send = function (message) {
    socket.emit('message', {
        sender: sender,
        data: message
    });
};

// pass "socket" object over the constructor instead of URL
var peer = new PeerConnection(socket);

Check other signaling examples.

Latest Updates

Feedback

Enter your email too; if you want "direct" reply!