https://github.com/muaz-khan/WebRTC-Experiment

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

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 NameDemoSource CodeAudio RecordingDemoSourceVideo RecordingDemoSourceGif RecordingDemoSourceMultiStreamRecorder DemoDemoSource

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 NameDemoCodeTranscoding WAV into AACDemoSourceTranscoding WAV into OggDemoSourceTranscoding WebM into mp4DemoSourceTranscoding WebM into mp4; then merging WAV+mp4 into single mp4DemoSourceRecording Audio+Canvas and merging in single mp4DemoSourceRecording Audio+Screen and merging in single mp4DemoSource

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 NameShort DescriptionSourceDemoPre-recorded Media StreamingStream video files in realtime; same like webcam streaming!SourceDemoPart of Screen SharingShare a region of the screen; not the entire screen!SourceDemoPlugin-free Screen SharingShare the entire screenSourceDemoOne-Way BroadcastingSame like radio stations; transmit audio/video/screen streams in one-way direction. Though, it is browser-to-browser streaming!SourceDemo

Useful Experiments

Experiment NamePrevious DemosNew Demosvideo-conferencing / multi-user (group) video sharingDemo / SourceDemo / Source Codefile sharing / multi-user (group) files hangoutDemo / SourceDemo / Source Codefile sharing using SCTP data channelsDemo / ---- / Source Codetext chat / multi-user (group) text chatDemo / SourceDemo / Source CodeMultiRTCDemo / ---- / Source Code

One-to-Many style of WebRTC Experiments

Experiment NamePrevious DemosNew Demosvideo-broadcastingDemo / SourceDemo / Source Codeaudio-broadcastingDemo / SourceDemo / Source Code

One-to-One Audio Calls

Experiment NameDemoSource CodeOne-to-one WebRTC video chat using WebSocketDemoSourceOne-to-one WebRTC video chat using socket.ioDemoSourceWebRTC 1-1 Audio/Video/Screen SharingSourceDemoWebRTC 1-1 CallsSourceDemo

Single-Page / One-Page / Client Side

Experiment NameDemoSource CodeSwitch streams from screen-sharing to audio+video. (Renegotiation)DemoSourceShare screen and audio/video from single peer connection!DemoSourceText chat using RTCDataChannel APIsDemoSourceSimple video chatDemoSourceSharing video - using socket.io for signalingDemoSourceSharing video - using WebSockets for signalingDemoSourceAudio Only StreamingDemoSourceMediaStreamTrack.getSourcesDemoSource

Documents for newcomers/newbies/beginners

A few documents for newbies and beginnersHow to use RTCPeerConnection.js?RTCDataChannel for BeginnersHow to use RTCDataChannel? - single code for both canary and nightlyWebRTC for Beginners: A getting stared guide!WebRTC for NewbiesHow to switch streams?How to echo cancellation? / Noise management?STUN or TURN? Which one to prefer; and why?WebRTC RTP Usagewebrtcpedia!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:

BrowserSupportFirefoxStable / Aurora / NightlyGoogle ChromeStable / Canary / Beta / DevOperaStable / NEXTAndroidChrome / Firefox / Opera

RTCMultiConnection v3 Demos

DemoTitleTestLiveViewSourceAudio+Video+File+TextChatDemoSourcePre-recorded media streaming (webm/mp3 live streaming)DemoSourceFileSharingDemoSourceScalable Audio/Video BroadcastDemoSourceScalable Screen BroadcastDemoSourceScalable Video BroadcastDemoSourceScalable File SharingDemoSourceVideo ConferencingDemoSourceSSEConnection (Server Sent Events)DemoSourceAudio+Video+Screen SharingDemoSourceOne-to-One Video ChatDemoSourceAudio ConferencingDemoSourceVideo BroadcastingDemoSourceTextChat+FileSharingDemoSourceaddStream in a Chat roomDemoSourcePart-of-Screen SharingDemoSourceShare Audio+ScreenDemoSourceScreen SharingDemoSourceDisconnect/Rejoin roomsDemoSourcePassword Protected RoomsDemoSourcereplaceTrack in FirefoxDemoSourceapplyConstraints in FirefoxDemoSourceFirebase-DemoDemoSourcePubNub DemoDemoSourceSocket.io Custom-MessagingDemoSourceCheck Rooms PresenceDemoSourcegetPublicModeratorsDemoSourceChange Cameras/MicrophoneDemoSourceMultiRTC: Skype-like appDemoSourceChange Video Resolutions in your Live SessionsDemoSourceAdmin/Guest demoDemoSourceCheck if StreamHasDataDemoSourceCapture & Share Screen from any domain!DemoSource

RTCMultiConnection v2 Demos

Experiment NameDemoSource CodeAppRTC like RTCMultiConnection demo!DemoSourceMultiRTC! RTCMultiConnection all-in-one demo!DemoSourceCollaborative Canvas DesignerDemoSourceConversation.js - Skype like libraryDemoSourceAll-in-One testDemoSourceMulti-Broadcasters and Many ViewersDemoSourceSelect Broadcaster at runtimeDemoSourceOneWay Screen & Two-Way AudioDemoSourceStream Mp3 LiveDemoSourceSocket.io auto Open/Join roomsDemoSourceScreen Sharing & CroppingDemoSourceShare Part of Screen without cropping itDemoSourcegetMediaDevices/enumerateDevicesDemoSourceRenegotiation & Mute/UnMute/StopDemoSourceVideo-ConferencingDemoSourceVideo BroadcastingDemoSourceMany-to-One BroadcastDemoSourceAudio ConferencingDemoSourceMulti-streams attachmentDemoSourceAdmin/Guest audio/video callingDemoSourceSession Re-initiation TestDemoSourcePreview Screenshot of the roomDemoSourceRecordRTC & RTCMultiConnectionDemoSourceExplains how to customize ice servers; and resolutionsDemoSourceMute/Unmute and onmute/onunmuteDemoSourceOne-page demo: Explains how to skip external signalling gatewaysDemoSourcePassword Protect Rooms: Explains how to authenticate usersDemoSourceSession Management: Explains difference between "leave" and "close" methodsDemoSourceMulti-Sessions ManagementDemoSourceCustomizing BandwidthDemoSourceUsers ejection and presence detectionDemoSourceMulti-Session EstablishmentDemoSourceGroup File Sharing + Text ChatDemoSourceAudio Conferencing + File Sharing + Text ChatDemoSourceJoin with/without cameraDemoSourceScreen SharingDemoSourceOne-to-One file sharingDemoSourceManual session establishment + extra data transmissionDemoSourceManual session establishment + extra data transmission + video conferencingDemoSourcetakeSnapshot i.e. Take Snapshot of Local/Remote streamsDemoSourceAudio/Video/Screen sharing and recordingDemoSourceBroadcast Multiple-CamerasDemoSourceRemote Stream ForwardingDemoSourceWebRTC Scalable BroadcastSocketio/NodejsSource

• 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.