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
- Record full screen, apps' screen, youtube audio, and more. download source or install from Google Web Store
- Share full screen, apps' screen, youtube audio, and more. download source or install from Google Web Store
- Access/capture screen from any HTTPs domain. download source or install from Google Web Store
- Share selected tab. download source or install from Google Web Store
- 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
- 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
- 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
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
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
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
Experiments
ImportantExperiment 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 |
Experiments
UsefulExperiment 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 |
Experiments
One-to-Many style of WebRTCExperiment 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 |
- http://muaz-khan.blogspot.com/search/label/WebRTC
- https://www.webrtc-experiment.com/#documentations
- https://www.facebook.com/WebRTC
- https://plus.google.com/+WebRTC-Experiment/posts
Custom Signaling
- Socket.io over Node.js
- WebSocket over Node.js
- WebSync / ASP.NET MVC
- XHR Signaling
- openSignalingChannel
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 |
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 |
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:
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.