Realtime working WebRTC Experiments and Demos

Plug & play type of WebRTC Experiments. Nothing to install. No requirements. Just copy HTML/JavaScript code in your site and that's all you need to do!

---

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

Majority of WebRTC Experiments are using libraries like:

1. DataChannel.js
2. RTCMultiConnection.js
3. RTCDataConnection.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.leave(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>
<script>
    var connection = new RTCMultiConnection('session-id');

    // to create/open a new session - argument is optional
    connection.open({
        // "extra" object allows you pass extra data like username, number of participants etc.
        extra: { },

        // it is the broadcasting interval � default value is 3 seconds
        interval: 3000
    });

    // get access to local or remote streams
    connection.onstream = function (stream) {
        if (stream.type === 'local') {
            mainVideo.src = stream.blobURL;
        }

        if (stream.type === 'remote') {
            var video = stream.mediaElement;
            video.id = stream.userid;    // useful to remove user video when he leaves your room
            document.body.appendChild();
        }
    }

    // Use "onUserLeft" to be get alerted if a user leaves the room	
    connection.onUserLeft = function(userid, extra) {
        // remove user's video using his user-id
    };
	
    // Eject a user or close your own entire session
    connection.leave(userid); // throw a user out of your room!
    connection.leave();       // close your own entire session
	
    // Use "onNewSession" method to show each new session in a list 
    // so end users can manually join any session they prefer:
    connection.onNewSession = function(session) {
        // use "session.extra" to access "extra" data
    };
	
    // To manually join a preferred session any time; 
    // use "join" method instead of "connect" method
    connection.join(session, extra);

    // e.g. passing string
    connection.join(session, 'username');

    // e.g. passing object
    connection.join(session, {
        username: 'mine user name'
    });
</script>

---

Use your own socket.io implementation!

If you want to install/use your own socket.io 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.