Last Updated On:
Discuss Below (Ask Questions)

Stars Forks Follow

WebRTC Demos, Experiments, Libraries, Examples

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/

npm downloads Build Status: Linux

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, Safari, and Microsoft Edge. Platforms: Linux, Mac and Windows (as well as mobile deviecs e.g. android and iOS).

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

npm downloads Build Status: Linux

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

RTCMultiConnection

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

npm downloads Build Status: Linux

Github: https://github.com/muaz-khan/RTCMultiConnection

Socket.io signaling server: https://github.com/muaz-khan/RTCMultiConnection-Server

npm downloads

WebRTC Chrome Extensions

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

Description Download Install
Record full screen, apps' screen, youtube audio, and more. Source Code Install from Google Web Store
Share full screen, apps' screen, youtube audio, and more. Source Code Install from Google Web Store
Access/capture screen from any HTTPs domain. Source Code Install from Google Web Store
Share selected tab (peer-to-peer). Source Code Install from Google Web Store
Share files peer-to-peer. Source Code Install from Google Web Store
Detect WebRTC Features Source Code Install from Google Web Store
getUserMedia on HTTP Source Code Install from Google Web Store

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

MultiStreamsMixer

Pass multiple streams (e.g. screen+camera or multiple-cameras) and get single stream.

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

Github: https://github.com/muaz-khan/MultiStreamsMixer

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/

npm downloads Build Status: Linux

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

iOS and Android open-sourced apps

Source codes and demos are available here:

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

npm downloads

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

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

npm downloads Build Status: Linux

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/

npm downloads

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

npm downloads Build Status: Linux

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.

npm downloads

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

WebRTC File Sharing

WebRTC Screen Sharing

WebRTC Part of Screen Sharing

RecordRTC Demos

DemoTitle TestLive ViewSource
16khz-audio-recording.html Demo Source
Record-Mp3-or-Wav.html Demo Source
RecordRTCPromisesHandler.html Demo Source
audio-recording.html Demo Source
auto-stop-on-silence.html Demo Source
bitsPerSecond.html Demo Source
calculate-recording-duration.html Demo Source
destroy.html Demo Source
edge-audio-recording.html Demo Source
gif-recording.html Demo Source
multi-audios-recording.html Demo Source
multi-cameras-recording.html Demo Source
onStateChanged.html Demo Source
onTimeStamp.html Demo Source
ondataavailable-StereoAudioRecorder.html Demo Source
ondataavailable.html Demo Source
pass-getUserMedia-constraints.html Demo Source
php-upload-jquery.html Demo Source
php-upload-simple-javascript.html Demo Source
preview-blob-size-during-recording.html Demo Source
raw-pcm.html Demo Source
record-cropped-screen.html Demo Source
recording-html-element.html Demo Source
reuse-same-instance.html Demo Source
setRecordingDuration.html Demo Source
show-animated-bar-on-video.html Demo Source
show-logo-on-recorded-video.html Demo Source
video-mirror-recording.html Demo Source
video-plus-screen-recording.html Demo Source
video-recording.html Demo Source

Other 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. Record entire DIV including video, image, textarea, input, drag/move/resize, everything
  14. Record canvas 2D drawings, lines, shapes, texts, images, drag/resize/enlarge/move via a huge drawing tool!
  15. Record Canvas2D Animation
  16. WebGL animation recording
  17. Plotly - WebGL animation recording

RTCMultiConnection 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
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
SignalR demo for RTCMultiConnection -- Source

Older demos (v2.2.2 or earlier):

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.

npm downloads

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.

npm downloads Build Status: Linux

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

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

SignalR project for RTCMultiConnection: https://github.com/muaz-khan/RTCMultiConnection-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

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
WebRTC for ASP.NET developers
Write Screen Sharing Application for Your Own WebSite
RecordRTC and Upload to PHP Server
Take photo from a webcam using JavaScript
WebRTC captureStream API
Disable ICE Trickling
I want to learn WebRTC!
  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?

Browser Support

WebRTC Experiments works fine on following web-browsers:

Browser Support
Firefox Windows, Mac, Ubuntu, Android
Google Chrome Windows, Mac, Ubuntu, Android, Chrome OS
Opera [Windows, Mac, Ubuntu, Android
Edge Windows 10+
Safari 11 Mac OSX, iOS 10+, iphone/ipad

and Cordova/ionic/phonegap/electron/node-webkit/etc apps.

RTCMultiConnection Wiki Pages

RecordRTC Wiki Pages

  1. PHP Upload Issues
  2. Get Synced WAV WebM
  3. Ffmpeg
  4. Upload to YouTube
  5. Upload to Server
  6. RecordRTC on AngularJs
  7. Record Multiple Streams Into Single File

Other Wiki Pages

Credits

License

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