lucozhao / webrtc-experiment Goto Github PK

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!

WebRTC Experiments works fine on following web-browsers:

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.

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

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

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

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

RecordRTC: WebRTC audio/video recording / Demo

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

Majority of WebRTC Experiments are using libraries like:

1. DataChannel.js
2. RTCMultiConnection.js
3. RTCDataConnection.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>

<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

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

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

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