WebSockets | WebRTC One-to-One Video Chat

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

Private ?? #123456789
  1. Using WebSockets for signaling
  2. It is one-to-one peers connection

Latest Updates

Feedback

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

How to use PeerConnection.js?

// http://www.webrtc-experiment.com/websocket/PeerConnection.js

var peer = new PeerConnection('ws://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('ws://domain:port', 'offerer');
offerer.onStreamAdded = function(e) {
   document.body.appendChild(e.mediaElement);
};
var answerer = new PeerConnection('ws://domain:port', '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.srcObject = stream;
        video.controls = true;
        video.muted = true;

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

Want to use WebSocket over Node.js?

var channel = location.href.replace(/\/|:|#|%|\.|\[|\]/g, '');
var websocket = new WebSocket('wss://yourdomain:port');
websocket.onopen = function () {
    websocket.push(JSON.stringify({
        open: true,
        channel: channel
    }));
};
websocket.push = websocket.send;
websocket.send = function (data) {
    websocket.push(JSON.stringify({
        data: data,
        channel: channel
    }));
};

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

Check other signaling examples.