WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
JavaScript HTML CSS C# PHP ApacheConf
Latest commit 201553a Jan 21, 2017 @muaz-khan Translator.js, RTCMultiConnection.js, RecordRTC.js, Chrome-Extensions…
…, FileBufferReader.js, fbr-client, meeting.js demo, realtime-pluginfree-calls demo, RTCall.js demo, socket.io demo, web socket demo, and WebRTC-File-Sharing demo updated.
Permalink
Failed to load latest commit information.
AudioVideoRecorder RecordRTC — MediaRecorder API relevant bug fixed. Aug 7, 2013
Canvas-Designer Fixed #471 Updated: RecordRTC, RTCMultiConnection, DetectRTC, DataCha… Nov 29, 2016
Chrome-Extensions Translator.js, RTCMultiConnection.js, RecordRTC.js, Chrome-Extensions… Jan 21, 2017
ConcatenateBlobs Canvas-Designer, Chrome-Extensions, ConcatenateBlobs, Conversation.js… Mar 18, 2016
Conversation.js Canvas-Designer, Chrome-Extensions, ConcatenateBlobs, Conversation.js… Mar 18, 2016
DataChannel RecordRTC, DetectRTC, MediaStreamRecorder, RTCMultiConnection, Canvas… Oct 14, 2016
DetectRTC Fixed #471 Updated: RecordRTC, RTCMultiConnection, DetectRTC, DataCha… Nov 29, 2016
FileBufferReader Translator.js, RTCMultiConnection.js, RecordRTC.js, Chrome-Extensions… Jan 21, 2017
Firefox-Extensions Fixed #471 Updated: RecordRTC, RTCMultiConnection, DetectRTC, DataCha… Nov 29, 2016
MediaStreamRecorder RecordRTC, DetectRTC, MediaStreamRecorder, RTCMultiConnection, Canvas… Oct 14, 2016
MultiRTC Canvas-Designer, Chrome-Extensions, ConcatenateBlobs, Conversation.js… Mar 18, 2016
PluginRTC RecordRTC, PluginRTC, RTCMultiConnection, Chrome-Extensions and Canva… Feb 12, 2015
Pluginfree-Screen-Sharing latest commit Nov 28, 2016
Pre-recorded-Media-Streaming latest commit Nov 28, 2016
RTCDataConnection tinny fixes; a little bit updates and some new stuff. Aug 19, 2013
RTCMultiConnection Translator.js, RTCMultiConnection.js, RecordRTC.js, Chrome-Extensions… Jan 21, 2017
RTCPeerConnection RTCPeerConnection-v1.5, Scalable-Broadcast, RMC3, RecordRTC, MediaStr… Jun 5, 2016
RTCall Translator.js, RTCMultiConnection.js, RecordRTC.js, Chrome-Extensions… Jan 21, 2017
Record-Entire-Meeting Canvas-Designer, Chrome-Extensions, ConcatenateBlobs, Conversation.js… Mar 18, 2016
RecordRTC Translator.js, RTCMultiConnection.js, RecordRTC.js, Chrome-Extensions… Jan 21, 2017
Reliable-Signaler Canvas-Designer, MediaStreamRecorder, DataChannel, RecordRTC, RTCMult… Jan 27, 2015
Translator.js Translator.js, RTCMultiConnection.js, RecordRTC.js, Chrome-Extensions… Jan 21, 2017
WebRTC-File-Sharing Translator.js, RTCMultiConnection.js, RecordRTC.js, Chrome-Extensions… Jan 21, 2017
WebRTC-Scalable-Broadcast RecordRTC, DetectRTC, MediaStreamRecorder, RTCMultiConnection, Canvas… Oct 14, 2016
audio-broadcast RecordRTC, PluginRTC, RTCMultiConnection, Chrome-Extensions and Canva… Feb 12, 2015
broadcast Grammar corrections. Feb 17, 2015
chat-hangout latest commit Nov 28, 2016
demos latest commit Nov 28, 2016
desktop-sharing desktopCapture-extension, Conversation.js, DetectRTC.js, FileBufferRe… Sep 20, 2014
docs latest commit Nov 28, 2016
experimental Canvas-Designer, Chrome-Extensions, ConcatenateBlobs, Conversation.js… Mar 18, 2016
ffmpeg Fixed #471 Updated: RecordRTC, RTCMultiConnection, DetectRTC, DataCha… Nov 29, 2016
file-hangout latest commit Nov 28, 2016
file-sharing old updates! Nov 21, 2013
getMediaElement RecordRTC, PluginRTC, RTCMultiConnection-v2.0, getMediaElement.js, So… Aug 20, 2014
getScreenId.js Fixed #471 Updated: RecordRTC, RTCMultiConnection, DetectRTC, DataCha… Nov 29, 2016
getStats Canvas-Designer, Chrome-Extensions, ConcatenateBlobs, Conversation.js… Mar 18, 2016
gumadapter RecordRTC, DetectRTC, MediaStreamRecorder, RTCMultiConnection, Canvas… Oct 14, 2016
hark RTCMultiConnection-v1.8, hark, customGetUserMediaBar, & a few demos u… Jun 12, 2014
issues getMediaElement.js and RTCMultiConnection-v1.6 updated. Feb 1, 2014
meeting Translator.js, RTCMultiConnection.js, RecordRTC.js, Chrome-Extensions… Jan 21, 2017
navigator.customGetUserMediaBar conversation.js, screen.js, getScreenId.js, all-screen-demos, RTCMult… Aug 5, 2014
one-to-many-audio-broadcasting RecordRTC, PluginRTC, RTCMultiConnection, Chrome-Extensions and Canva… Feb 12, 2015
one-to-many-video-broadcasting RecordRTC, PluginRTC, RTCMultiConnection, Chrome-Extensions and Canva… Feb 12, 2015
part-of-screen-sharing Canvas-Designer, Chrome-Extensions, ConcatenateBlobs, Conversation.js… Mar 18, 2016
realtime-pluginfree-calls Translator.js, RTCMultiConnection.js, RecordRTC.js, Chrome-Extensions… Jan 21, 2017
screen-broadcast tabCapture, desktopCapture and RTCMultiConnection-v1.9 Jul 21, 2014
screen-sharing latest commit Nov 28, 2016
socket.io Translator.js, RTCMultiConnection.js, RecordRTC.js, Chrome-Extensions… Jan 21, 2017
socketio-over-nodejs DetectRTC, gum adapter, Chrome-Extensions, Canvas-Designer, Record-En… Jan 11, 2016
text-chat RecordRTC, PluginRTC, RTCMultiConnection, Chrome-Extensions and Canva… Feb 12, 2015
video-conferencing latest commit Nov 28, 2016
webrtc-broadcasting latest commit Nov 28, 2016
websocket-over-nodejs DetectRTC, gum adapter, Chrome-Extensions, Canvas-Designer, Record-En… Jan 11, 2016
websocket Translator.js, RTCMultiConnection.js, RecordRTC.js, Chrome-Extensions… Jan 21, 2017
.gitignore added rudimentary support for *nix recording audio/video, added .giti… Jan 4, 2014
LICENSE WebRTC Experiments — https://www.webrtc-experiment.com/ — updated. Jul 20, 2013
README.md Clarified some points in README. Fixes #449 Sep 14, 2016
Signaling.md latest commit Nov 28, 2016

README.md

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 mostly client-side; i.e. no server installation needed!
  4. You can use all these demos in PHP/Python/Ruby/ASP.NET/etc. since they are only relying on JavaScript and 3rd party services!

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 Doc Demos
RecordRTC.js Supports cross-browser audio/video recordings! Doc Demos
Translator.js Voice & Text Translator Doc Demos
RTCMultiConnection.js Single Library for Everything! Just imagine :) Doc Demos
FileBufferReader.js File buffers reader & chunkifier Doc Demos
getScreenId.js Single chrome extension for all domains! Again, imagine :) Doc Demos
Conversation.js Enjoy Skype-like Conversations! Oops :) Doc Demos
DataChannel.js Supports data-streaming among multiple peers Doc Demos
getMediaElement.js A library for audio/video media elements' layout Doc Demos
DetectRTC.js A library for detecting WebRTC features Doc Demos
ConcatenateBlobs.js Concatenate Array of Blobs Doc Demos
getStats.js Get peers statistics Doc None

Other libraries:

Other Repositories

  1. WebRTC Scalable Broadcast
  2. Reliable Signaling
  3. RTCMultiConnection.js
  4. RecordRTC.js
  5. Collaborate Canvas Designer
  6. Translator.js
  7. FileBufferReader.js
  8. Chrome-Extensions
  9. Firefox-Extensions
  10. DetectRTC.js
  11. getStats.js
  12. Conversation.js
  13. Ffmpeg.js
  14. DataChannel.js
  15. MultiRTC Demos
  16. XHR-Signaling
  17. PluginRTC: IE/Safari Plugins compatible WebRTC-Experiments
  18. ASP.NET MVC based WebRTC 1:1 Demo
  19. WebSync Signaling
  20. SdpSerializer.js

Important Experiments

Experiment Name Short Description Source 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
  4. File Sharing / Install App Store Extension

Firefox Extensions for WebRTC!

  1. enable-screen-capturing

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

Or RecordRTC entire Meeting using MediaStreamRecorder.js

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

RTCMultiConnection v2.2.2 Demos

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
Many-to-One Broadcast 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
Broadcast Multiple-Cameras Demo Source
Remote Stream Forwarding Demo Source
WebRTC Scalable Broadcast Socketio/Nodejs Source

v2.2.2 is available here:

Demos using Conversation.js

  1. AndroidRTC
  2. Search Users
  3. Cross-Language (Multi-Lingual) Text Chat
  4. Old Conversation.js demos

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 && Ffmpeg Demos

Demo Name Live Demo Source Code
Transcoding WAV into Ogg Live Demo Source Code
Transcoding WebM into mp4 Live Demo Source Code
Transcoding WebM into mp4; then merging WAV+mp4 into single mp4 Live Demo Source Code
Recording Audio+Canvas and merging in single mp4 Live Demo 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?

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

License

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