Realtime/Working WebRTC Experiments

1. It is a repository of uniquely experimented WebRTC demos; written by Muaz Khan!
2. No special requirement! Just WebRTC compatible web-browser (e.g. chrome/firefox/opera on desktop/android)
3. These demos/experiments are entirely client-side; i.e. no server installation needed!
4. You can use all these demos in PHP/Python/Ruby/ASP.NET/etc. everywhere!

=

Libraries

Library Name	Short Description	Documentation	Demos
RecordRTC.js	A library for audio/video recording	Documentation	Demos
RTCMultiConnection.js	An ultimate wrapper library for RTCWeb APIs	Documentation	Demos
Conversation.js	Enjoy Skype-like Conversations!	Documentation	Demos
DataChannel.js	An ultimate wrapper library for RTCDataChannel APIs	Documentation	Demos
SdpSerializer.js	An easiest way to modify SDP	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
File.js	A standalone library for file sharing functionalities	Documentation	Demos
getMediaElement.js	A library for audio/video media elements' layout	Documentation	Demos
Translator.js	Voice & Text Translator	Documentation	Demos
DetectRTC.js	A library for detecting WebRTC features	Documentation	Demos
navigator.customGetUserMediaBar.js	Keep your users Privacy!	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

=

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
file sharing using SCTP data channels	Demo / --	-- / Source Code
text chat / multi-user (group) text chat	Demo / Source	Demo / Source Code
MultiRTC	Demo / --	-- / Source Code

=

Google Chrome Extensions for WebRTC!

1. https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Chrome-Extensions/desktopCapture
2. https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Chrome-Extensions/tabCapture
3. https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Chrome-Extensions/webrtc-extension
4. https://github.com/muaz-khan/WebRTC-Experiment/tree/master/desktop-sharing

=

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
WebRTC 1-1 Audio/Video/Screen Sharing	Realtime, pluginfree!	Source

=

Single-Page / One-Page / Client Side

Experiment Name	Demo	Source Code
Switch streams from screen-sharing to audio+video. (Renegotiation)	Demo	Source
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	Demo	Source
MediaStreamTrack.getSources	Demo	Source

=

Experiments to share tab/screen/desktop

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

=

Experiments to share region/part of the screen

Experiment Name	Demo	Source Code
Share part-of-screen RTCMultiConnection	Demo	Source
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 MediaStreamRecorder.js library

Experiment Name	Demo	Source Code
Audio Recording	Demo	Source
Video/Gif Recording	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

1. MultiRTC! RTCMultiConnection all-in-one demo!
2. All-in-One test
3. Multi-Broadcasters and Many Viewers
4. OneWay Screen & Two-Way Audio
5. Stream Mp3 Live

            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/remote-stream-forwarding.html">Remote Stream Forwarding</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/getMediaDevices.html">navigator.getMediaDevices AKA navigator.enumerateDevices</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/changeBandwidth.html">connection.changeBandwidth({ audio: 128, video: 256 })</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/RTCMultiConnection.sharePartOfScreen.html">connection.sharePartOfScreen({ element: 'body'})</a></li>
            
			<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/Renegotiation.html">Renegotiation & Mute/UnMute/Stop</a></li>
			<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/videoconferencing.html">Video-Conferencing</a></li>
			<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/video-broadcasting.html">Video Broadcasting</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/audioconferencing.html">Audio Conferencing</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/multi-streams-attachment.html">Multi-streams attachment</a></li>
			<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/admin-guest.html">Admin/Guest audio/video calling</a></li>
			<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/session-reinitiation.html">Session Re-initiation Test</a></li>
			<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/rooms-screenshots.html">Preview Screenshot of the room</a></li>
			<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/RecordRTC-and-RTCMultiConnection.html">RecordRTC & RTCMultiConnection</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/features.html">Explains how to customize ice servers; and resolutions</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/mute-unmute.html">Mute/Unmute and onmute/onunmute</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/one-page-demo.html">One-page demo: Explains how to skip external signalling gateways</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/password-protect-rooms.html">Password Protect Rooms: Explains how to authenticate users</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/session-management.html">Session Management: Explains difference between "leave" and "close" methods</a></li>
            
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/multi-sessions-management.html">Multi-Sessions Management</a></li>
			
			<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/RTCMultiConnection-v1.3-demo.html">RTCMultiConnection-v1.3 test</a></li>
			<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/bandwidth.html">Customizing Bandwidth</a></li>
			<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/users-ejection.html">Users ejection and presence detection</a></li>				
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/multi-session-establishment.html">Multi-Session Establishment</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/group-file-sharing-plus-text-chat.html">File Sharing + Text Chat</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/audio-conferencing-data-sharing.html">Audio Conferencing + File Sharing + Text Chat</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/join-with-or-without-camera.html">Join with/without camera</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/screen-sharing.html">Screen Sharing</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/one-to-one-filesharing.html">One-to-One file sharing</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission.html">Manual session establishment + extra data transmission</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission-plus-videoconferencing.html">Manual session establishment + extra data transmission + video conferencing</a></li>
            <li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/chrome-to-firefox-screen-sharing.html">Chrome-to-Firefox Screen Sharing</a></li>

=

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
How to switch streams?
How to echo cancellation? / Noise management?
STUN or TURN? Which one to prefer; and why?
WebRTC RTP Usage
webrtcpedia!
Are you want to learn WebRTC?
WebRTC Tips & Tricks

1. http://muaz-khan.blogspot.com/search/label/WebRTC
2. https://www.webrtc-experiment.com/#documentations
3. https://www.facebook.com/WebRTC
4. https://plus.google.com/+WebRTC-Experiment/posts

=

ffmpeg-asm.js Demos

1. Transcoding WAV into Ogg / Source Code
2. Transcoding WebM into mp4 / Source Code
3. Transcoding WebM into mp4; then merging WAV+mp4 into single mp4 / Source Code
4. Recording Audio+Canvas and merging in single mp4 / Source Code

=

Custom Signaling

1. Socket.io over Node.js
2. WebSocket over Node.js
3. WebSync / ASP.NET MVC
4. XHR Signaling

=

How to record audio using RecordRTC?

<script src="//cdn.webrtc-experiment.com/RecordRTC.js"></script>

var recordRTC = RecordRTC(mediaStream);

recordRTC.startRecording();
recordRTC.stopRecording(callback_function);

var blob = recordRTC.getBlob();
var blobURL = recordRTC.toURL();

recordRTC.getDataURL(callback_function);

1. RecordRTC to Node.js
2. RecordRTC to PHP
3. RecordRTC to ASP.NET MVC
4. RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!
5. MRecordRTC i.e. Multi-RecordRTC!
6. RecordRTC on Ruby!
7. RecordRTC over Socket.io
8. ffmpeg-asm.js and RecordRTC! Audio/Video Merging & Transcoding!
9. Recording Audio+Video in single WebM on Firefox
10. RecordRTC / PHP / FFmpeg

=

RTCMultiConnection.js

You can write entire skype-like web-app using RTCMultiConnection! It supports all complex renegotiation scenarios!

<button id="openNewSessionButton">open New Session Button</button><br />

<script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js"> </script>
<script>
var connection = new RTCMultiConnection().connect();
document.getElementById('openNewSessionButton').onclick = function() {
    connection.open();
};
</script>

RTCMultiConnection Documentation

=

DataChannel.js / A library for RTCDataChannel APIs

<script src="//cdn.webrtc-experiment.com/DataChannel.js"> </script>
<script>
    var channel = new DataChannel();
    channel.onopen = function(userid) {};
    channel.onmessage = function(message) {};
	
    // search for existing channels
    channel.connect();

    document.getElementById('new-channel').onclick = function() {
        channel.open(); // setup new channel
    };
</script>

DataChannel Documentation

=

Translator.js / Demo

Translator.js is a JavaScript library built top on Google Speech-Recognition & Translation API to transcript and translate voice and text. It supports many locales and brings globalization in WebRTC!

<script src="//cdn.webrtc-experiment.com/Translator.js"> </script>

var translator = new Translator();

translator.voiceToText(function (text) {
    console.log('Your voice as text!', text);
}, 'your-language');

translator.translateLanguage(textToConvert, {
    from: 'language-of-the-text',
    to: 'convert-into',
    callback: function (translatedText) {
        console.log('translated text', translatedText);
    }
});

translator.speakTextUsingRobot(textToPlay);

translator.speakTextUsingGoogleSpeaker({
    textToSpeak: 'text-to-convert',
    targetLanguage: 'your-language'
});

=

openSignalingChannel for RTCMultiConnection.js and DataChanel.js (Client-Side Code)

var onMessageCallbacks = {};
var socketio = io.connect('http://localhost:8888/');

socketio.on('message', function(data) {
    if(data.sender == connection.userid) return;
    
    if (onMessageCallbacks[data.channel]) {
        onMessageCallbacks[data.channel](data.message);
    };
});

connection.openSignalingChannel = function (config) {
    var channel = config.channel || this.channel;
    onMessageCallbacks[channel] = config.onmessage;

    if (config.onopen) setTimeout(config.onopen, 1000);
    return {
        send: function (message) {
            socketio.emit('message', {
                sender: connection.userid,
                channel: channel,
                message: message
            });
        },
        channel: channel
    };
};

=

Nodejs/Socketio Server-Side Code

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

Read more here:

• https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md

=

Browser Support

WebRTC Experiments works fine on following web-browsers:

Browser	Support
Firefox	Stable / Aurora / Nightly
Google Chrome	Stable / Canary / Beta / Dev
Opera	Stable / NEXT
Android	Chrome / Firefox / Opera

=

Muaz Khan

1. Personal Webpage � http://www.muazkhan.com
2. Email � [email protected]
3. Twitter � https://twitter.com/muazkh and https://twitter.com/WebRTCWeb

=

License

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