WebRTC One-to-One video sharing using WebSockets / Demo

It supports any WebSockets signaling gateway.

=

How to use it in your own website?

First of all; link following library:

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

=

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');

=

Explanation

Constructor takes two arguments. Last argument is optional.

var peer = new PeerConnection('websocket-url', 'user-id');

// you can write like this:
var peer = new PeerConnection('websocket-url');

1. websocket-url: it is mandatory
2. user-id: by default, it is auto generated

There are two ways to connect peers:

1. The easiest method of "manual" peers connection is call "sendParticipationRequest" and pass user-id of the target user.
2. otherwise, call "startBroadcasting" (behind the scene) this function will be invoked recursively until a participant found.

peer.sendParticipationRequest(userid);

// or
peer.startBroadcasting();

By default peers are auto-connected; however, you can override this behavior and be alerted if a user transmitted himself using "startBroadcasting":

// "onUserFound" allows you connect multiple peers i.e. one-to-many
peer.onUserFound = function(userid) {
   peer.sendParticipationRequest(userid);
};

You can access local or remote media streams using "onStreamAdded":

offerer.onStreamAdded = function(e) {
   // e.mediaElement --- HTMLVideoElement
   // e.stream       --- MediaStream
   // e.type         --- "local" or "remote"
};

You may want to remove HTML video elements if a peers leaves:

offerer.onStreamEnded = function(e) {
   // e.mediaElement --- HTMLVideoElement
   // e.stream       --- MediaStream
   // e.type         --- "local" or "remote"

   if(e.mediaElement.parentNode)
      e.mediaElement.parentNode.removeChild(e.mediaElement);
};

You can override user-id any time:

peer.userid = '123';

setTimeout(function() {
   peer.userid = '890
}, 5000);

You can manually leave/close the room:

peer.close();

You can access target user's id too:

console.log('target user-id is', peer.participant);

You may want to be alerted for each participantion request; and manually allow/reject them:

peer.onParticipationRequest = function(userid) {
   peer.acceptRequest(userid);
};

1. override "onParticipationRequest" to prevent auto-accept of requests
2. use "acceptRequest" method to manually allow requests

You may want to list number of users connected with you:

var numberOfUsers = 0;
for(var user in peer.peers) {
   console.log(user, 'is connected with you.');
   numberOfUsers++;
}
console.log('total users connected with you:', numberOfUsers);

You can access media stream like this:

console.log('local media stream:', peer.MediaStream);

// you can stop media strema too:
peer.MediaStream.stop();

// however, instead of "stopping" media-stream manually
// you "close" method instead:
peer.close();

=

Browser Support

This PeerConnection.js supports following web-browsers:

Browser	Support
Firefox	Stable / Aurora / Nightly
Google Chrome	Stable / Canary / Beta / Dev
Android	Chrome Beta

=

License

PeerConnection.js is released under MIT licence . Copyright (c) 2013 Muaz Khan.