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

Many-to-Many style of WebRTC Experiments

1. Group video sharing / video-conferencing
2. Group file sharing
3. Group text chat
4. Group file sharing + text chat — using DataChannel.js library
5. All-in-One Demo — using RTCMultiConnection library — screen, audio/video, text chat, files, audio-conferencing, broadcasting, etc.

Many other demos using RTCMultiConnection library.

One-to-Many style of WebRTC Experiments

1. One-Way audio+video+screen broadcasting
2. Video broadcasting
3. Audio broadcasting
4. Video broadcasting using RTCMultiConnection library
5. Video broadcasting + file sharing + text chat — using RTCMultiConnection library

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
3. One-to-One file sharing — using RTCMultiConnection library

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

WebRTC Experiments to share screen

1. Plugin free screen sharing
2. Chrome to Firefox Screen Sharing
3. Screen sharing
4. Screen viewer
5. One-Way screen sharing — using RTCMultiConnection library
6. One-Way screen sharing + file sharing + text chat — using RTCMultiConnection library

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

There is a video-conferencing experiment that acts as one-way video broadcasting if end-user has no camera/microphone. Try join session with/without camera

Documents for newcomers

A few documents for newbies and beginners
RTCPeerConnection 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 broadcast video using RTCWeb APIs?
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="http://bit.ly/DataChannel"></script>
<script>
    var channel = new DataChannel();

    // to create/open a new channel
    channel.open('channel-name');

    // to send text/data or file
    channel.send(file || data || 'text');
	
    // if someone already created a channel; to join it: use "connect" method
    channel.connect('channel-name');

    // to be alerted on data ports get open
    channel.onopen = function(channel) {}
	
    // to be alerted on data ports get new message
    channel.onmessage = function(message) {}
</script>

Getting started with RTCMultiConnection.js - v1.1

<script src="https://bit.ly/RTCMultiConnection-v1-1"></script>
<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');

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

        if (stream.type === 'remote') {
            document.body.appendChild(stream.mediaElement);
        }
    }
</script>

1. You can open multi-sessions and multi-connections — in the same page
2. You can share files of any size — directly
3. You can share text messages of any length
4. You can share one-stream in many unique ways — in the same page

RTCMultiConnection can help you write file sharing applications along with screen sharing and audio/video conferencing applications — in minutes.

RTCMultiConnection highly simplifies multi-sessions connectivity on the same page. To understand why multi-sessions are so important:

1. Sometimes you want to one-way broadcast your video for users who have no-camera or no-microphone
2. You may want to allow audio-conferencing along with video-conferencing in the same session / same stream!
3. You may want to open one-to-one ports between main-peer and the server to record speaker's speech or to further broadcast the stream
4. You may want to allow end-users to anonymously join/view main-video session or chatting room
5. You may want to open one-to-one private session between chairperson and CEO! — in the same session; same page!

There are many other use-cases of multi-sessions. Read RTCMultiConnection Documentation

Getting started with RTCDataConnection.js

<script src="https://bit.ly/RTCDataConnection-v1-0"></script>
<script>
var rtcDataConnection = new RTCDataConnection({
    onmessage: function (data) {
        console.log(data);
    },
    openSignalingChannel: function (config) {
        throw 'use your own socket.io implementation here';
    },
	
    // 'one-to-one' || 'one-to-many' || 'many-to-many'
    direction: 'one-to-many'
});

// Only session initiator should call below line; 
rtcDataConnection.initDataConnection();

// to send file/data /or text
rtcDataConnection.send( file || data || 'text' );
</script>

Use your own socket.io implementation!

You must link socket.io.js file before using below code:

var config = {
    openSocket: function (config) {
        var socket = io.connect('http://your-site:8888');
        socket.channel = config.channel || 'WebRTC-Experiment';
		socket.on('message', config.onmessage);
		
        socket.send = function (data) {
            socket.emit('message', data);
        };

        if (config.onopen) setTimeout(config.onopen, 1);
        return socket;
    }
};

For testing purpose, you can use Firebase. Remember, You must link firebase.js file before using below code:

var config = {
    openSocket: function (config) {
        var channel = config.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;
    }
};

License

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