WebRTC Experiments & Demos

• It is a repository of uniquely experimented WebRTC demos; written by Muaz Khan!
• No special requirement! Just WebRTC compatible web-browser (e.g. chrome/firefox/opera on desktop/android)
• These demos/experiments are mostly client-side; i.e. no server installation needed!
• 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 :)

DetectRTC | Is WebRTC Supported On Your Browser?

A tiny JavaScript library that can be used to detect WebRTC features e.g. system having speakers, microphone or webcam, screen capturing is supported, number of audio/video devices etc.

Live Demo: https://www.webrtc-experiment.com/DetectRTC/

Github (open sourced): https://github.com/muaz-khan/DetectRTC

RecordRTC | WebRTC Audio+Video+Screen Recording

WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.

Live Demo: https://www.webrtc-experiment.com/RecordRTC/

Github (open sourced): https://github.com/muaz-khan/RecordRTC

MediaStreamRecorder

Cross browser audio/video/screen recording. It supports Chrome, Firefox, Opera and Microsoft Edge. It even works on Android browsers. It follows latest MediaRecorder API standards and provides similar APIs.

Live Demos: https://www.webrtc-experiment.com/msr/

Github (open-sourced): https://github.com/streamproc/MediaStreamRecorder

iOS and Android open-sourced apps

Source codes and demos are available here: http://webrtcweb.com/cordova-apps/

A few demo apps published to Google Play Store:

• File Sharing: https://play.google.com/store/apps/details?id=com.webrtc.experiment
• WebRTC Scalable Broadcasting: https://play.google.com/store/apps/details?id=com.webrtc.scalablebroadcast
• WebRTC Video Conferencing: https://play.google.com/store/apps/details?id=rmc3.videoconference

RTCMultiConnection

WebRTC JavaScript library for peer-to-peer applications (screen sharing, audio/video conferencing, file sharing, media streaming etc.)

Documentation: http://www.rtcmulticonnection.org/

Version 3 demos: https://rtcmulticonnection.herokuapp.com/

Version 2 and older demos: https://www.webrtc-experiment.com/RTCMultiConnection/

Github (open-sourced): https://github.com/muaz-khan/RTCMultiConnection

WebRTC Scalable Broadcasting

This module simply initializes socket.io and configures it in a way that single broadcast can be relayed over unlimited users without any bandwidth/CPU usage issues. Everything happens peer-to-peer!

Live Demo: https://rtcmulticonnection.herokuapp.com/demos/Scalable-Broadcast.html

Github (open sourced): https://github.com/muaz-khan/WebRTC-Scalable-Broadcast

WebRTC Chrome Extensions

WebRTC chrome extensions for screen sharing, screen recording, file sharing, youtube+audio sharing, etc.

Github (open sourced): https://github.com/muaz-khan/Chrome-Extensions

1. Record full screen, apps' screen, youtube audio, and more. download source or install from Google Web Store
2. Share full screen, apps' screen, youtube audio, and more. download source or install from Google Web Store
3. Access/capture screen from any HTTPs domain. download source or install from Google Web Store
4. Share selected tab. download source or install from Google Web Store
5. Share files peer-to-peer. download source or install from Google Web Store

WebRTC Firefox Addons

Firefox extension API are used to enable screen capturing flag for specific domains, etc.

Install from Firefox addons store: https://addons.mozilla.org/en-US/firefox/addon/enable-screen-capturing/

Github (open-sourced): https://github.com/muaz-khan/Firefox-Extensions

WebRTC Dashboard | Canvas2D Drawing Tool

Collaborative, extendable, JavaScript Canvas2D drawing tool, supports dozens of builtin tools, as well as generates JavaScript code for 2D animations.

Live Demo: https://www.webrtc-experiment.com/Canvas-Designer/

Github (open-sourced): https://github.com/muaz-khan/Canvas-Designer

You video presentation: https://www.youtube.com/watch?v=pvAj5l_v3cM

WebRTC Voice & Text Translator

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!

Live Demo: https://www.webrtc-experiment.com/Translator/

Github (open-sourced): https://github.com/muaz-khan/Translator

getStats | Get WebRTC Peer Connection Stats

A tiny JavaScript library using WebRTC getStats API to return peer connection stats i.e. bandwidth usage, packets lost, local/remote ip addresses and ports, type of connection etc.

Live Demo: https://www.webrtc-experiment.com/getStats/

Github (open-sourced): https://github.com/muaz-khan/getStats

FileBufferReader | File Sharing

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.

Live Demo: https://www.webrtc-experiment.com/FileBufferReader/

Github (open-sourced): https://github.com/muaz-khan/FileBufferReader

Youtube video presentation: https://www.youtube.com/watch?v=gv8xpdGdS4o

getScreenId | Capture screen from any domain

getScreenId | Capture Screen on Any Domain! This script is a hack used to support single chrome extension usage on any HTTPs domain.

Live Demo: https://www.webrtc-experiment.com/getScreenId/

Youtube video presentation: https://www.youtube.com/watch?v=UHrsfe9RYAQ

Install this chrome extension (required): https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk

Github (open-sourced): https://github.com/muaz-khan/getScreenId

WebRTC Video Conferencing Demos

• Simple Demo: https://rtcmulticonnection.herokuapp.com/demos/Video-Conferencing.html
• AppRTC like Demo: https://www.webrtc-experiment.com/RTCMultiConnection/AppRTC-Look.html
• Advance (skype-like) Demo: https://www.webrtc-experiment.com/RTCMultiConnection/MultiRTC/
• Old (simple) Demo: https://www.webrtc-experiment.com/video-conferencing/

WebRTC File Sharing

• Advance file sharing demo: https://rtcmulticonnection.herokuapp.com/demos/file-sharing.html
• File sharing using FileBufferReader: https://www.webrtc-experiment.com/FileBufferReader/
• Old file sharing demo: https://www.webrtc-experiment.com/file-hangout/
• Old file sharing plus text chat demo: https://www.webrtc-experiment.com/RTCMultiConnection/group-file-sharing-plus-text-chat.html

WebRTC Screen Sharing

• Recommended Google Chrome Extension for Screen Sharing: https://chrome.google.com/webstore/detail/webrtc-desktop-sharing/nkemblooioekjnpfekmjhpgkackcajhg
• Old Screen Sharing Demo: https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/
• Screen Sharing using screen.js: https://www.webrtc-experiment.com/screen-sharing/
• Latest Screen Sharing Demo: https://www.webrtc-experiment.com/RTCMultiConnection/screen-sharing.html
• Scalable Screen Sharing Demo: https://rtcmulticonnection.herokuapp.com/demos/Scalable-Screen-Broadcast.html

WebRTC Part of Screen Sharing

• Latest part-of-screen sharing Demo: https://rtcmulticonnection.herokuapp.com/demos/share-part-of-screen.html
• Old part-of-screen sharing Demo: https://www.webrtc-experiment.com/RTCMultiConnection/RTCMultiConnection.sharePartOfScreen.html
• Cropped screen sharing Demo: https://www.webrtc-experiment.com/RTCMultiConnection/cropped-screen-sharing.html
• Simplest part-of-screen sharing Demo: https://www.webrtc-experiment.com/part-of-screen-sharing/firebase/
• Part-of-screen sharing Demo using DataChannel.js: https://www.webrtc-experiment.com/part-of-screen-sharing/webrtc-data-channel/
• Share only embedded iframe: https://www.webrtc-experiment.com/part-of-screen-sharing/iframe/
• Text chat screenshot sharing Demo: https://www.webrtc-experiment.com/part-of-screen-sharing/realtime-chat/No-WebRTC-Chat.html
• Record part-of-screen: https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/webpage-recording.html

RecordRTC Demos

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. RecordRTC / PHP / FFmpeg
10. Record Audio and upload to Nodejs server
11. ConcatenateBlobs.js - Concatenate multiple recordings in single Blob!
12. Remote audio-stream recording or a real p2p demo
13. Mp3 or Wav Recording
14. Record entire DIV including video, image, textarea, input, drag/move/resize, everything
15. Record canvas 2D drawings, lines, shapes, texts, images, drag/resize/enlarge/move via a huge drawing tool!
16. Record Canvas2D Animation
17. WebGL animation recording
18. Plotly - WebGL animation recording
19. Video+Screen recording using RecordRTC
20. 16khz Audio Recording using RecordRTC
21. Promises and RecordRTC
22. Microsoft Edge Audio Recording using RecordRTC
23. Multi-Videos (Conference) recording using RecordRTC
24. onStateChanged using RecordRTC
25. Reuse Same Instance using RecordRTC
26. setRecordingDuration using RecordRTC

MediaStreamRecorder Demos

Experiment Name	Demo	Source Code
Audio Recording	Demo	Source
Video Recording	Demo	Source
Gif Recording	Demo	Source
MultiStreamRecorder Demo	Demo	Source

Other WebRTC Libraries

• navigator.customGetUserMediaBar.js / Demo
• File.js / Demo
• Meeting.js / Demo
• RTCall.js / Demo
• SdpSerializer.js / Demo
• ConcatenateBlobs.js / Demos
• getMediaElement.js / Demo

WebRTC Reliable Signaling Implementation

A reliable socketlio/node.js based signaling implementation for DataChannel.js, RTCMultiConnection.js and WebRTC Experiments.

Github (open-sourced): https://github.com/muaz-khan/Reliable-Signaler

• rtcmulticonnection-client:
• datachannel-client:
• videoconferencing-client:

Ffmpeg.js demos, both for browsers and node.js

Github (open-sourced): https://github.com/muaz-khan/Ffmpeg.js

Demo Name	Demo	Code
Transcoding WAV into AAC	Demo	Source
Transcoding WAV into Ogg	Demo	Source
Transcoding WebM into mp4	Demo	Source
Transcoding WebM into mp4; then merging WAV+mp4 into single mp4	Demo	Source
Recording Audio+Canvas and merging in single mp4	Demo	Source
Recording Audio+Screen and merging in single mp4	Demo	Source

DataChannel.js

DataChannel.js is a JavaScript library useful to write many-to-many i.e. group file/data sharing or text chat applications. Its syntax is easier to use and understand. It highly simplifies complex tasks like any or all user rejection/ejection; direct messages delivery; and more.

Github (open-sourced): https://github.com/muaz-khan/DataChannel

• DataChannel basic demo
• Auto Session Establishment and Users presence detection
• Text Chat using Pusher and DataChannel.js

MultiRTC | Skype-like Demo Application

Github (open-sorced): https://github.com/muaz-khan/MultiRTC

• MultiRTC Firebase:
• MultiRTC WebSockets:
• MultiRTC Socketio:

XHR-Signaling

XHR/XMLHttpRequest based WebRTC signaling implementation.

Github (open-sourced): https://github.com/muaz-khan/XHR-Signaling

PluginRTC | IE/Safari Plugins compatible WebRTC-Experiments

Github (open-sourced): https://github.com/muaz-khan/PluginRTC

ASP.NET MVC based WebRTC Demo

A simple WebRTC one-to-one demo written in September, 2012! It supports public rooms as well as password-protected private rooms! MS-SQL database is used as signaling gateway!

Github (open-sourced): https://github.com/muaz-khan/WebRTC-ASPNET-MVC

WebSync-Signaling

WebSync is used as signaling gateway with/for WebRTC-Experiments e.g. RTCMultiConnection.js, DataChannel.js, Plugin-free screen sharing, and video conferencing.

Github (open-sourced): https://github.com/muaz-khan/WebSync-Signaling

Server Sent Events (SSE) over PHP

Server Sent Events (SSE) are used to setup WebRTC peer-to-peer connections.

Github (open-sourced): https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/SSEConnection

SignalR

• https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md#how-to-use-signalr-for-signaling

SdpSerializer

SdpSerializer.js — An easiest way to modify SDP. It is an object-oriented way of sdp declaration, manipulation and serialization.

Github (open-sourced): https://github.com/muaz-khan/SdpSerializer

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

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

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

Custom Signaling

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

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

RTCMultiConnection v3 Demos

DemoTitle	TestLive	ViewSource
Audio+Video+File+TextChat	Demo	Source
Pre-recorded media streaming (webm/mp3 live streaming)	Demo	Source
FileSharing	Demo	Source
Scalable Audio/Video Broadcast	Demo	Source
Scalable Screen Broadcast	Demo	Source
Scalable Video Broadcast	Demo	Source
Scalable File Sharing	Demo	Source
Video Conferencing	Demo	Source
SSEConnection (Server Sent Events)	Demo	Source
Audio+Video+Screen Sharing	Demo	Source
One-to-One Video Chat	Demo	Source
Audio Conferencing	Demo	Source
Video Broadcasting	Demo	Source
TextChat+FileSharing	Demo	Source
addStream in a Chat room	Demo	Source
Part-of-Screen Sharing	Demo	Source
Share Audio+Screen	Demo	Source
Screen Sharing	Demo	Source
Disconnect/Rejoin rooms	Demo	Source
Password Protected Rooms	Demo	Source
replaceTrack in Firefox	Demo	Source
applyConstraints in Firefox	Demo	Source
Firebase-Demo	Demo	Source
PubNub Demo	Demo	Source
Socket.io Custom-Messaging	Demo	Source
Check Rooms Presence	Demo	Source
getPublicModerators	Demo	Source
Change Cameras/Microphone	Demo	Source
MultiRTC: Skype-like app	Demo	Source
Change Video Resolutions in your Live Sessions	Demo	Source
Admin/Guest demo	Demo	Source
Check if StreamHasData	Demo	Source
Capture & Share Screen from any domain!	Demo	Source

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

• https://github.com/muaz-khan/RTCMultiConnection/tree/master/v2.2.2

Wiki Pages

• List of Breaking Changes
• Coding Tricks
• Switch Between Cameras
• Bandwidth Management
• Channels and Sessions Management
• How to send Custom/Private messages?
• Custom Private Servers
• How to link RTCMultiConnection.js?
• How to fix echo?
• How to share Part-of-Screen?
• How to detect Presence of the users & sessions?
• How to share screen?
• How to secure your RTCMultiConnection codes?
• Use WebSync Signaling Server in any RTCMultiConnection demo
• How to implement client-side (local) screen-sharing without involving any 3rd-party service or extension or addon
• Detect Who is Speaking
• Select Camera and Microphone Devices
• Fix Duplicate Videos Issues

RecordRTC wiki pages:

• PHP Upload Issues
• Get Synced WAV WebM
• Ffmpeg

Other wiki pages:

• WebRTC DataChannel and Firefox
• Broadcasting Demos
• mozAV2AudioOnly
• RTCDataConnection
• RTCMultiConnection v1.0
• RTCPeerConnection Documentation

Credits

• Muaz Khan - https://github.com/muaz-khan

License

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