Dewyzee / WebRTC-Experiment

WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!

WebRTC Demos, Experiments, Libraries, Examples

• 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

RTCMultiConnection

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

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

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

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/

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

iOS and Android open-sourced apps

Source codes and demos are available here:

• https://github.com/muaz-khan/cordova-mobile-apps
• See How to Write Android Apps
• See How to Write iOS Apps

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 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
• getDisplayMedia: https://www.webrtc-experiment.com/getDisplayMedia/

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

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):

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

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

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

• https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md

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.

Disclaimer

There is no warranty, expressed or implied, associated with this product. Use at your own risk.

• https://www.webrtc-experiment.com/disclaimer/

Credits

• Muaz Khan - https://MuazKhan.com

License

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