baeeq / webrtc-experiment

WebRTC video conferencing, screen sharing, file sharing, pre-recorded media streaming, part of screen sharing, group text chat, hangout, broadcasting, audio only calls, RTCDataChannel, SIP over WebSocket etc. All these WebRTC experiments are JavaScript only experiments. Nothing to install; no requirement. Just copy HTML/JavaScript code and use in any site; free of cost!

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 or Firefox!

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

---

Browser Support

WebRTC Experiments works fine on following web-browsers:

Browser	Support
Firefox	Stable / Aurora / Nightly
Google Chrome	Stable / Canary / Beta / Dev
Internet Explorer / IE	Chrome Frame
Android	Chrome Beta

---

Many-to-Many style of WebRTC Experiments

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

---

One-way video broadcasting

1. WebRTC one-way video broadcasting

---

One-to-Many style of WebRTC Experiments

1. Video broadcasting
2. Audio broadcasting

---

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

---

Screen sharing

1. Plugin free screen sharing
2. Screen sharing

---

Part of screen sharing

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

---

WebRTC Audio + Video Recording

RecordRTC: WebRTC audio/video recording / Demo

---

Pre-recorded media streaming

Pre-recorded media streaming

---

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

---

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

---

Majority of WebRTC Experiments are using libraries like:

1. DataChannel.js
2. RTCMultiConnection.js

---

Getting started with DataChannel.js

<script src="https://webrtc-experiment.appspot.com/DataChannel.js"></script>
<script>
    var channel = new DataChannel('channel-name');
    channel.send(file || data || 'text');
    channel.onleave = function(userid) { };
    channel.eject(userid); // throw a user out of your room!
</script>

---

Getting started with RTCMultiConnection.js - v1.1

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

var connection = new RTCMultiConnection();

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

// if someone already created a session; to join it: use "connect" method
connection.connect('session-id');

connection.eject(userid); // throw a user out of your room!

---

Use your own socket.io implementation!

connection.openSignalingChannel = function(config) {
   var URL = '/';
   var channel = config.channel || this.channel || 'default-channel';
   var sender = Math.round(Math.random() * 60535) + 5000;
   
   io.connect(URL).emit('new-channel', {
      channel: channel,
      sender : sender
   });
   
   var socket = io.connect(URL + 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 testing purpose!

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

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

---

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 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

---

License

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