gaoheming/WebRTC-Experiment

Realtime/Working WebRTC Experiments

It is a repository of uniquely experimented WebRTC demos; written by Muaz Khan!
No special requirement! Just Chrome (for desktop and android) or Firefox!
These demos/experiments are entirely client-side; i.e. no server installation needed!

Libraries

Library Name	Short Description	Documentation	Demos
`RecordRTC.js`	A library for audio/video recording	Documentation	Demos
`AudioVideoRecorder.js`	Audio+video recording using MediaRecorder API	Documentation	Demos
`RTCMultiConnection.js`	An ultimate wrapper library for `RTCWeb APIs`	Documentation	Demos
`DataChannel.js`	An ultimate wrapper library for `RTCDataChannel APIs`	Documentation	Demos
`RTCall.js`	A library for voice (i.e. audio-only) calls	Documentation	Demos
`meeting.js`	A library for audio/video conferencing	Documentation	Demos

Important Experiments

Experiment Name	Short Description	Source Code	Demo
`Pre-recorded Media Streaming`	Stream video files in realtime; same like webcam streaming!	Source	Demo
`Part of Screen Sharing`	Share a region of the screen; not the entire screen!	Source	Demo
`Plugin-free Screen Sharing`	Share the entire screen	Source	Demo
`One-Way Broadcasting`	Same like radio stations; transmit audio/video/screen streams in one-way direction. Though, it is browser-to-browser streaming!	Source	Demo
`Audio-only Calls`	Realtime, plugin-free, voice-only calls	Source	Demo

Useful Experiments

Experiment Name	Previous Demos	New Demos
video-conferencing / multi-user (group) video sharing	Demo / Source	Demo / Source Code
file sharing / multi-user (group) files hangout	Demo / Source	Demo / Source Code
text chat / multi-user (group) text chat	Demo / Source	Demo / Source Code

One-to-Many style of WebRTC Experiments

Experiment Name	Previous Demos	New Demos
video-broadcasting	Demo / Source	Demo / Source Code
audio-broadcasting	Demo / Source	Demo / Source Code

One-to-One style of WebRTC Experiments

Experiment Name	Demo	Source Code
One-to-one WebRTC video chat using WebSocket	Demo	Source
One-to-one WebRTC video chat using socket.io	Demo	Source

Single-Page / One-Page / Client Side

Experiment Name	Demo	Source Code
Share screen and audio/video from single peer connection!	Demo	Source
Text chat using RTCDataChannel APIs	Demo	Source
Simple video chat	Demo	Source
Sharing video - using socket.io for signaling	Demo	Source
Sharing video - using WebSockets for signaling	Demo	Source
Audio Only Streaming	----	Source

Experiments to share tab/screen

Experiment Name	Previous Demos	New Demos
Plugin-free screen sharing / share the entire screen	Demo / Source	Demo / Source Code
Tab sharing / using `tabCapture` APIs	Demo / Source	----

Experiments to share region/part of the screen

Experiment Name	Demo	Source Code
Share part-of-screen using RTCDataChannel APIs	Demo	Source
Share part-of-screen using Firebase	Demo	Source
A realtime chat using RTCDataChannel	Demo	Source
A realtime chat using Firebase	Demo	Source

Demos using DataChannel.js library

Experiment Name	Demo	Source Code
DataChannel basic demo	Demo	Source
Auto Session Establishment	Demo	Source
Share part-of-screen using DataChannel.js	Demo	Source
Private Chat	Demo	----

Experimental (Non-Functional)

Experiment Name	Demo	Source Code
Attaching Remote Media Streams	Demo	Source
mozCaptureStreamUntilEnded for pre-recorded media streaming	Demo	Source
Remote audio stream recording	Demo	Source

Demos using RTCMultiConnection.js library

Experiment Name	Demo	Source Code
All-in-One test	Demo	Source
Video Conferencing	Demo	Source
Multi-Session Establishment	Demo	Source
RTCMultiConnection-v1.3 testing demo	Demo	Source
Video Broadcasting	Demo	Source
File Sharing + Text Chat	Demo	Source
Audio Conferencing	Demo	Source
Join with/without camera	Demo	Source
Screen Sharing	Demo	Source
One-to-One file sharing	Demo	Source
Manual session establishment + extra data transmission	Demo	[Source](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission.html](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission.html)
Manual session establishment + extra data transmission + video conferencing	Demo	Source
Customizing Bandwidth	Demo	Source
Users ejection and presence detection	Demo	Source
RTCMultiConnection-v1.3 and socket.io	----	Source

Demos using RTCMultiConnection-v1.4 library

Experiment Name	Demo	Source Code
All-in-One test	Demo	Source
Renegotiation & Mute/UnMute/Stop	Demo	Source
Video-Conferencing	Demo	Source
Multi-streams attachment	Demo	Source

Documents for newcomers/newbies/beginners

A few documents for newbies and beginners
RTCMultiConnection Documentation
DataChannel Documentation
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

DataChannel.js / A library for RTCDataChannel APIs

<script src="https://www.webrtc-experiment.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 / A library for all WebRTC APIs

<script src="https://www.webrtc-experiment.com/firebase.js"> </script>
<script src="https://www.webrtc-experiment.com/RTCMultiConnection-v1.4.js"> </script>

<button id="init">Open New Connection</button><br />

<script>
    var connection = new RTCMultiConnection();

    connection.session = {
        audio: true,
        video: true
    };

    connection.onstream = function(e) {
        document.body.appendChild(e.mediaElement);
    };

    connection.onstreamended = function(e) {
        if (e.mediaElement.parentNode) e.mediaElement.parentNode.removeChild(e.mediaElement);
    };

    var session_unique_idetifier = 'Session Unique Identifier';

    connection.connect(session_unique_idetifier);

    document.getElementById('init').onclick = function() {
        this.disabled = true;
        connection.open(session_unique_idetifier);
    };
</script>

RTCall.js / A library for audio-only calling

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

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

signaling for RTCMultiConnection-v1.4 and earlier releases

var SIGNALING_SERVER = 'http://domain.com:8888/';
connection.openSignalingChannel = function(config) {   
   var channel = config.channel || this.channel || 'one-to-one-video-chat';
   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);
};

signaling using socket.io over node.js

Signaling for all latest experiments and newer releases.

Your server-side node.js code looks like this:

io.sockets.on('connection', function (socket) {
    socket.on('message', function (data) {
        socket.broadcast.emit('message', data);
    });
});

And to override openSignalingChannel on the client side:

connection.openSignalingChannel = function(callback) {
    return io.connect().on('message', callback);
};

Want to use XHR, WebSockets, SIP, XMPP, etc. for signaling? Read this post.

How to use RecordRTC?

<script src="https://www.webrtc-experiment.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://www.webrtc-experiment.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

How to record audio using AudioVideoRecorder?

AudioVideoRecorder({

    // MediaStream object
    stream: MediaStream,

    // mime-type of the output blob
    mimeType: 'audio/ogg',

    // set time-interval to get the blob
    interval: 5000,

    // get access to the recorded blob
    onRecordedMedia: function (blob) {
        // POST/PUT blob using FormData/XMLHttpRequest

        // or readAsDataURL
        var reader = new FileReader();
        reader.onload = function (e) {
            hyperlink.href = e.target.result;
        };
        reader.readAsDataURL(blob);
    }

});

AudioVideoRecorder 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

gaoheming / WebRTC-Experiment