Realtime working WebRTC Experiments and Demos

It is a repository of uniquely experimented WebRTC demos; written by Muaz Khan; contributed by you and the community!

No special requirement! Just Chrome (for desktop and android) or Firefox!

These demos/experiments are entirely client-side; i.e. no server installation needed! (for basic webpages only!)

---

Libraries

1. RTCMultiConnection.js — Demos
2. DataChannel.js — Demos
3. RecordRTC.js — Demo
4. RTCall.js — Demo

---

WebRTC Signaling Gateways

Following signaling gateways can work with each and every WebRTC Experiment!

1. Socket.io over Node.js — Demo
2. WebSocket over Node.js — Demo

---

1. RecordRTC: WebRTC audio/video recording / Demo
2. Pre-recorded media streaming
3. WebRTC one-way video broadcasting

---

Screen sharing

1. Plugin free screen sharing
2. Screen sharing

---

Many-to-Many style of WebRTC Experiments

1. Group video sharing / video-conferencing / Latest Demo
2. Group file sharing
3. Group text chat

---

Part of screen sharing

1. Using RTCDataChannel
2. Using Firebase
3. A realtime chat using RTCDataChannel
4. A realtime chat using Firebase

---

Demos using DataChannel.js

1. DataChannel basic demo
2. Auto Session Establishment and Users presence detection

---

RTCMultiConnection Demos

1. Multi-Session Establishment
2. File Sharing + Text Chat
3. All-in-One test
4. Video Conferencing
5. Video Broadcasting
6. Audio Conferencing
7. Join with/without camera
8. Screen Sharing
9. One-to-One file sharing
10. Manual session establishment + extra data transmission
11. Manual session establishment + extra data transmission + video conferencing
12. Users ejection and presence detection
13. Customizing Bandwidth
14. RTCMultiConnection-v1.3 testing demo

---

One-to-Many style of WebRTC Experiments

1. Video broadcasting / Latest Demo
2. Audio broadcasting / Latest Demo

---

One-to-One style of WebRTC Experiments

1. One-to-one WebRTC video chat using WebSocket
2. One-to-one WebRTC video chat using socket.io

---

in-Page / One-Page / Client Side
Text chat using RTCDataChannel APIs
Simple video chat
Sharing video - using socket.io for signaling
Sharing video - using WebSockets for signaling

---

Documents for newcomers/newbies/beginners

A few documents for newbies and beginners
RTCPeerConnection Documentation
RTCMultiConnection Documentation
DataChannel Documentation
How to use RTCPeerConnection.js?
RTCDataChannel for Beginners
How to use RTCDataChannel? - single code for both canary and nightly
WebRTC for Beginners: A getting stared guide!
WebRTC for Newbies
How to write video-conferencing application using WebRTC?
How to broadcast files using RTCDataChannel APIs?
WebRTC Signaling Concepts

---

DataChannel.js

<script src="https://webrtc-experiment.appspot.com/DataChannel.js"></script>

var channel = new DataChannel('channel-name');

channel.onopen = function(e) {};
channel.onmessage = function(e) {};

// share with all participants
channel.send(file || data || 'text');

// Direct messages using user-ids
channel.userid = 'muazkh';
channel.channels['muazkh'].send(file || data || 'text');

---

RTCMultiConnection.js

<script src="https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.3.js"></script>

var connection = new RTCMultiConnection();
connection.session = {
    audio: true,
    video: true
};
connection.bandwidth = {
    audio: 50,
    video: 256,
    data: 1638400
};
connection.onstream = function (e) {
    if (e.type === 'local') mainVideo.src = e.blobURL; // or URL.createObjectURL(e.stream)
    if (e.type === 'remote') document.body.appendChild(e.mediaElement);
}

// searching/connecting pre-created session
connection.connect('session-id');

// to create/open a new session
connection.open('session-id');

---

RTCall.js

<script src="https://webrtc-experiment.appspot.com/RTCall.js"></script>

var call = new RTCall();
call.onincomingcall = function(caller) {
   call.receive(caller.receiverid);
};
call.oncustomer = function(customer) {
   call.call(customer.callerid);
};

---

Use WebSocket over Node.js for signaling

In ui.js files you can find openSocket method; or in all libraries; you can find openSignalingChannel method.

var SIGNALING_SERVER = 'ws://' + document.domain + ':8888/';
openSignalingChannel: function(config) {
    config.channel = config.channel || 'default-channel';
    var websocket = new WebSocket(SIGNALING_SERVER);
    websocket.channel = config.channel;
    websocket.onopen = function() {
        websocket.push(JSON.stringify({
            open: true,
            channel: config.channel
        }));
        if (config.callback)
            config.callback(websocket);
    };
    websocket.onmessage = function(event) {
        config.onmessage(JSON.parse(event.data));
    };
    websocket.push = websocket.send;
    websocket.send = function(data) {
        websocket.push(JSON.stringify({
            data: data,
            channel: config.channel
        }));
    };
}

---

Use Socket.io over Node.js for signaling!

// openSignalingChannel or openSocket!
openSignalingChannel: function(config) {
   var SIGNALING_SERVER = 'http://domain.com:8888/';
   var channel = config.channel || this.channel || 'default-channel';
   var sender = Math.round(Math.random() * 60535) + 5000;
   
   io.connect(SIGNALING_SERVER).emit('new-channel', {
      channel: channel,
      sender : sender
   });
   
   var socket = io.connect(SIGNALING_SERVER + channel);
   socket.channel = channel;
   
   socket.on('connect', function () {
      if (config.callback) config.callback(socket);
   });
   
   socket.send = function (message) {
        socket.emit('message', {
            sender: sender,
            data  : message
        });
    };
   
   socket.on('message', config.onmessage);
}

For a ready-made socket.io over node.js implementation; visit this link.

---

Use firebase for signaling!

Remember, You must link firebase.js file before using below code:

openSignalingChannel: function (config) {
    var SIGNALING_SERVER = 'https://chat.firebaseIO.com/';
    var channel = config.channel || this.channel || 'WebRTC-Experiment';
    var firebase = new Firebase(SIGNALING_SERVER + channel);
    firebase.channel = channel;
    firebase.on('child_added', function (data) {
        config.onmessage && config.onmessage(data.val());
    });
    firebase.send = function (data) {
        this.push(data);
    };
    config.onopen && setTimeout(config.onopen, 1);
    firebase.onDisconnect().remove();
    return firebase;
}

---

How to use RecordRTC?

<script src="https://webrtc-experiment.appspot.com/RecordRTC.js"></script>

How to record video using RecordRTC?

var recorder = RecordRTC({
	video: HTMLVideoElement
});

/* start recording video */
recorder.recordVideo();

/* stop recording video and save recorded file to disk */
recorder.stopVideo(function(recordedFileURL) {
   window.open(recordedFileURL);
});

How to record GIF using RecordRTC?

<script src="https://webrtc-experiment.appspot.com/gif-recorder.js"></script>

var recorder = RecordRTC({
	video: HTMLVideoElement
});

/* start recording gif */
recorder.recordGIF();

/* stop recording gif and save recorded file to disk */
recorder.stopGIF(function(gifURL) {
   window.open(gifURL);
});

How to record audio using RecordRTC?

var recorder = RecordRTC({
	stream: MediaStream || LocalMediaStream
});

/* start recording audio */
recorder.recordAudio();

/* stop recording audio and save recorded file to disk */
recorder.stopAudio(function(recordedFileURL) {
   window.open(recordedFileURL);
});

RecordRTC Documentation

---

Browser Support

WebRTC Experiments works fine on following web-browsers:

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

---

License

WebRTC Experiments are released under MIT licence . Copyright (c) 2013 Muaz Khan.