/WebRTC-Experiment

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

Primary LanguageJavaScriptMIT LicenseMIT

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/

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, and Microsoft Edge. Platforms: Linux, Mac and Windows.

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

npm downloads Build Status: Linux

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/

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: http://webrtcweb.com/cordova-apps/

A few demo apps published to Google Play Store:

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/

npm downloads Build Status: Linux

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

npm downloads

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

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.

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

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

  • rtcmulticonnection-client: npm downloads
  • datachannel-client: npm downloads
  • videoconferencing-client: npm downloads

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

  • MultiRTC Firebase: npm downloads
  • MultiRTC WebSockets: npm downloads
  • MultiRTC Socketio: npm downloads

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

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

RecordRTC wiki pages:

Other wiki pages:

Credits

License

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