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

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

RecordRTC to Node.js
RecordRTC to PHP
RecordRTC to ASP.NET MVC
RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!
MRecordRTC i.e. Multi-RecordRTC!
RecordRTC on Ruby!
RecordRTC over Socket.io
ffmpeg-asm.js and RecordRTC! Audio/Video Merging & Transcoding!
RecordRTC / PHP / FFmpeg
Record Audio and upload to Nodejs server
ConcatenateBlobs.js - Concatenate multiple recordings in single Blob!
Remote audio-stream recording or a real p2p demo
Mp3 or Wav Recording
Record entire DIV including video, image, textarea, input, drag/move/resize, everything
Record canvas 2D drawings, lines, shapes, texts, images, drag/resize/enlarge/move via a huge drawing tool!
Record Canvas2D Animation
WebGL animation recording
Plotly - WebGL animation recording
Video+Screen recording using RecordRTC
16khz Audio Recording using RecordRTC
Promises and RecordRTC
Microsoft Edge Audio Recording using RecordRTC
Multi-Videos (Conference) recording using RecordRTC
onStateChanged using RecordRTC
Reuse Same Instance using RecordRTC
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

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

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

Custom Signaling

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

RecordRTC wiki pages:

Other wiki pages:

Credits

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

License

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

License

jianglong98/WebRTC-Experiment

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages