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!

How to use?

Each demo has a unique directory. Simply download that directory, upload in your webserver and use it; and it'll work!

You don't need to modify any single line to use it. No single installation or modification is needed :)

Libraries

Library Name	Short Description	Documentation	Demos
RecordRTC.js	Supports cross-browser audio/video recordings!	Documentation	Demos
Translator.js	Voice & Text Translator	Documentation	Demos
RTCMultiConnection.js	Single Library for Everything! Just imagine :)	Documentation	Demos
FileBufferReader.js	File buffers reader & chunkifier	Documentation	Demos
getScreenId.js	Single chrome extension for all domains! Again, imagine :)	Documentation	Demos
Conversation.js	Enjoy Skype-like Conversations! Oops :)	Documentation	Demos
DataChannel.js	Supports data-streaming among multiple peers	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
DetectRTC.js	A library for detecting WebRTC features	Documentation	Demos
navigator.customGetUserMediaBar.js	Keep your users Privacy!	Documentation	Demos
ConcatenateBlobs.js	Concatenate Array of Blobs	Documentation	Demos

Other Repositories

1. PluginRTC: IE/Safari Plugins compatible WebRTC-Experiments
2. RecordRTC.js
3. RTCMultiConnection.js
4. Conversation.js
5. Collaborate Canvas Designer
6. XHR-Signaling
7. ASP.NET MVC based WebRTC 1:1 Demo
8. WebSync Signaling
9. SdpSerializer.js
10. FileBufferReader.js

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. desktopCapture API / Install App Store Extension
2. tabCapture API / Install App Store Extension
3. Desktop Sharing / Install App Store Extension

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 Calls

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	Source	Demo
WebRTC 1-1 Calls	Source	Demo

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 Recording	Demo	Source
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	----
Text Chat using Pusher and DataChannel.js	Demo	Source

Experimental (Non-Functional)

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

Demos using RTCMultiConnection

Experiment Name	Demo	Source Code
AppRTC like RTCMultiConnection demo!	Demo	Source
MultiRTC! RTCMultiConnection all-in-one demo!	Demo	Source
Collaborative Canvas Designer	Demo	Source
Conversation.js - Skype like library	Demo	Source
All-in-One test	Demo	Source
Multi-Broadcasters and Many Viewers	Demo	Source
Select Broadcaster at runtime	Demo	Source
OneWay Screen & Two-Way Audio	Demo	Source
Stream Mp3 Live	Demo	Source
Socket.io auto Open/Join rooms	Demo	Source
Screen Sharing & Cropping	Demo	Source
Share Part of Screen without cropping it	Demo	Source
getMediaDevices/enumerateDevices	Demo	Source
Renegotiation & Mute/UnMute/Stop	Demo	Source
Video-Conferencing	Demo	Source
Video Broadcasting	Demo	Source
Audio Conferencing	Demo	Source
Multi-streams attachment	Demo	Source
Admin/Guest audio/video calling	Demo	Source
Session Re-initiation Test	Demo	Source
Preview Screenshot of the room	Demo	Source
RecordRTC & RTCMultiConnection	Demo	Source
Explains how to customize ice servers; and resolutions	Demo	Source
Mute/Unmute and onmute/onunmute	Demo	Source
One-page demo: Explains how to skip external signalling gateways	Demo	Source
Password Protect Rooms: Explains how to authenticate users	Demo	Source
Session Management: Explains difference between "leave" and "close" methods	Demo	Source
Multi-Sessions Management	Demo	Source
Customizing Bandwidth	Demo	Source
Users ejection and presence detection	Demo	Source
Multi-Session Establishment	Demo	Source
Group File Sharing + Text Chat	Demo	Source
Audio Conferencing + File Sharing + Text Chat	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
Manual session establishment + extra data transmission + video conferencing	Demo	Source
takeSnapshot i.e. Take Snapshot of Local/Remote streams	Demo	Source
Audio/Video/Screen sharing and recording	Demo	Source

Demos using Conversation.js

1. AndroidRTC

            <li>
				<a href="https://www.webrtc-experiment.com/Conversationjs/search-user.html">Search Users</a>
            </li>
            
            <li>
				<a href="https://www.webrtc-experiment.com/Conversationjs/cross-language-chat.html">Cross-Language (Multi-Lingual) Text Chat</a>
            </li>
            
            <li>
                <a href="https://www.rtcmulticonnection.org/conversationjs/demos/">Old Conversation.js demos</a>
            </li>

Documents for newcomers/newbies/beginners

A few documents for newbies and beginners
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
5. openSignalingChannel

How to record audio using RecordRTC?

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

Documentation page: http://recordrtc.org/RecordRTC.html

var recordRTC = RecordRTC(mediaStream, {
    type: 'video' // audio or video or gif or canvas
});

recordRTC.startRecording();

recordRTC.stopRecording(function(videoURL) {
    video.src = videoURL;
    
    var blob = recordRTC.blob;
    var arrayBuffer = recordRTC.buffer;
    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="openRoom">Open Room</button>
<button id="joinRoom">Join Room</button><br />

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

RTCMultiConnection Documentation

DataChannel.js / A library for RTCDataChannel APIs

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

    document.getElementById('new-channel').onclick = function() {
        datachannel.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'
});

FileBufferReader.js / Demo

FileBufferReader is a JavaScript library reads file and returns chunkified array-buffers. The resulting buffers can be shared using WebRTC data channels or socket.io.

var fileBufferReader = new FileBufferReader();

fileBufferReader.readAsArrayBuffer(file, function(uuid) {
    // var file         = fileBufferReader.chunks[uuid];
    // var listOfChunks = file.listOfChunks;
    
    // get first chunk, and send using WebRTC data channels
    // NEVER send chunks in loop; otherwise you'll face issues in slow networks
    // remote peer should notify if it is ready for next chunk
    fileBufferReader.getNextChunk(uuid, function(nextChunk, isLastChunk) {
        if(isLastChunk) {
            alert('File Successfully sent.');
        }
        // sending using WebRTC data channels
        datachannel.send(nextChunk);
    });
});

datachannel.onmessage = function(event) {
    var chunk = event.data;
    
    if (chunk instanceof ArrayBuffer || chunk instanceof DataView) {
        // array buffers are passed using WebRTC data channels
        // need to convert data back into JavaScript objects
    
        fileBufferReader.convertToObject(chunk, function(object) {
            datachannel.onmessage({
                data: object
            });
        });
        return;
    }
    
    // if you passed "extra-data", you can access it here:
    // chunk.extra.senderUserName or whatever else
    
    // if target peer requested next chunk
    if(chunk.readyForNextChunk) {
        fileBufferReader.getNextChunk(chunk.uuid, function(nextChunk, isLastChunk) {
            if(isLastChunk) {
                alert('File Successfully sent.');
            }
            // sending using WebRTC data channels
            datachannel.send(nextChunk);
        });
        return;
    }
    
    // if chunk is received
    fileBufferReader.addChunk(chunk, function(promptNextChunk) {
        // request next chunk
        datachannel.send(promptNextChunk);
    });
};

getScreenId.js / Demo

Simply use getScreenId.js and enjoy screen capturing from any domain. You don't need to deploy chrome extension yourself. You can refer your users to install this chrome extension instead. Also, getScreenId.js auto-fallbacks to command-line based screen capturing if chrome extension isn't installed or disabled. getScreenId.js throws clear exceptions which is helpful for end-user experiences.

<script src="//cdn.WebRTC-Experiment.com/getScreenId.js"></script>

<script>
getScreenId(function (error, sourceId, screen_constraints) {
    navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    navigator.getUserMedia(screen_constraints, function (stream) {
        document.querySelector('video').src = URL.createObjectURL(stream);
    }, function (error) {
        console.error(error);
    });
});
</script>

Signaling?

• 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

Credits

Muaz Khan:

1. Personal Webpage: http://www.muazkhan.com
2. Email: [email protected]
3. Twitter: https://twitter.com/muazkh and https://twitter.com/WebRTCWeb
4. Google+: https://plus.google.com/+WebRTC-Experiment
5. Facebook: https://www.facebook.com/WebRTC

License

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