Realtime/Working WebRTC Experiments
- It is a repository of uniquely experimented WebRTC demos; written by Muaz Khan!
- No special requirement! Just Chrome (for desktop and android) or Firefox!
- These demos/experiments are entirely client-side; i.e. no server installation needed!
=
Libraries
| Library Name | Short Description | Documentation | Demos |
|---|---|---|---|
RecordRTC.js |
A library for audio/video recording | Documentation | Demos |
AudioVideoRecorder.js |
Audio+video recording using MediaRecorder API | Documentation | Demos |
RTCMultiConnection.js |
An ultimate wrapper library for RTCWeb APIs |
Documentation | Demos |
DataChannel.js |
An ultimate wrapper library for RTCDataChannel APIs |
Documentation | Demos |
RTCall.js |
A library for voice (i.e. audio-only) calls | Documentation | Demos |
meeting.js |
A library for audio/video conferencing | Documentation | Demos |
=
Important Experiments
| Experiment Name | Short Description | Source Code | 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 |
Audio-only Calls |
Realtime, plugin-free, voice-only calls | 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 |
| text chat / multi-user (group) text chat | Demo / Source | 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 style of WebRTC Experiments
| 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 |
=
Single-Page / One-Page / Client Side
| Experiment Name | Demo | Source Code |
|---|---|---|
| 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 | ---- | Source |
=
Experiments to share tab/screen
| Experiment Name | Previous Demos | New Demos |
|---|---|---|
| Plugin-free screen sharing / share the entire screen | Demo / Source | Demo / Source Code |
Tab sharing / using tabCapture APIs |
Demo / Source | ---- |
=
Experiments to share region/part of the screen
| Experiment Name | Demo | Source Code |
|---|---|---|
| Share part-of-screen using RTCDataChannel APIs | Demo | Source |
| Share part-of-screen using Firebase | Demo | Source |
| A realtime chat using RTCDataChannel | Demo | Source |
| A realtime chat using Firebase | Demo | Source |
=
Demos using DataChannel.js library
| Experiment Name | Demo | Source Code |
|---|---|---|
| DataChannel basic demo | Demo | Source |
| Auto Session Establishment | Demo | Source |
| Share part-of-screen using DataChannel.js | Demo | Source |
| Private Chat | Demo | ---- |
=
Experimental (Non-Functional)
| Experiment Name | Demo | Source Code |
|---|---|---|
| Attaching Remote Media Streams | Demo | Source |
| mozCaptureStreamUntilEnded for pre-recorded media streaming | Demo | Source |
| Remote audio stream recording | Demo | Source |
=
Demos using RTCMultiConnection.js library
| Experiment Name | Demo | Source Code |
|---|---|---|
| All-in-One test | Demo | Source |
| Video Conferencing | Demo | Source |
| Multi-Session Establishment | Demo | Source |
| RTCMultiConnection-v1.3 testing demo | Demo | Source |
| Video Broadcasting | Demo | Source |
| File Sharing + Text Chat | Demo | Source |
| Audio Conferencing | 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](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission.html](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-Demos/manual-session-establishment-plus-extra-data-transmission.html) |
| Manual session establishment + extra data transmission + video conferencing | Demo | Source |
| Customizing Bandwidth | Demo | Source |
| Users ejection and presence detection | Demo | Source |
| RTCMultiConnection-v1.3 and socket.io | ---- | Source |
=
Demos using RTCMultiConnection-v1.4 library
| Experiment Name | Demo | Source Code |
|---|---|---|
| All-in-One test | Demo | Source |
| Renegotiation & Mute/UnMute/Stop | Demo | Source |
| Video-Conferencing | Demo | Source |
| Multi-streams attachment | Demo | Source |
=
Documents for newcomers/newbies/beginners
| A few documents for newbies and beginners |
|---|
| RTCMultiConnection Documentation |
| DataChannel Documentation |
| RTCPeerConnection Documentation |
| 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 |
=
DataChannel.js / A library for RTCDataChannel APIs
<script src="https://www.webrtc-experiment.com/DataChannel.js"></script>
var channel = new DataChannel('channel-name'); channel.onopen = function(e) {}; channel.onmessage = function(e) {}; // share with all participants channel.send(file || data || 'text'); // Direct messages using user-ids channel.userid = 'muazkh'; channel.channels['muazkh'].send(file || data || 'text');
=
RTCMultiConnection.js / A library for all WebRTC APIs
<script src="https://www.webrtc-experiment.com/firebase.js"> </script> <script src="https://www.webrtc-experiment.com/RTCMultiConnection-v1.4.js"> </script> <button id="init">Open New Connection</button><br /> <script> var connection = new RTCMultiConnection(); connection.session = { audio: true, video: true }; connection.onstream = function(e) { document.body.appendChild(e.mediaElement); }; connection.onstreamended = function(e) { if (e.mediaElement.parentNode) e.mediaElement.parentNode.removeChild(e.mediaElement); }; var session_unique_idetifier = 'Session Unique Identifier'; connection.connect(session_unique_idetifier); document.getElementById('init').onclick = function() { this.disabled = true; connection.open(session_unique_idetifier); }; </script>
=
RTCall.js / A library for audio-only calling
<script src="https://www.webrtc-experiment.com/RTCall.js"></script>
var call = new RTCall(); call.onincomingcall = function(caller) { call.receive(caller.receiverid); }; call.oncustomer = function(customer) { call.call(customer.callerid); };
=
signaling for RTCMultiConnection-v1.4 and earlier releases
var SIGNALING_SERVER = 'http://domain.com:8888/'; connection.openSignalingChannel = function(config) { var channel = config.channel || this.channel || 'one-to-one-video-chat'; var sender = Math.round(Math.random() * 60535) + 5000; io.connect(SIGNALING_SERVER).emit('new-channel', { channel: channel, sender : sender }); var socket = io.connect(SIGNALING_SERVER + channel); socket.channel = channel; socket.on('connect', function () { if (config.callback) config.callback(socket); }); socket.send = function (message) { socket.emit('message', { sender: sender, data : message }); }; socket.on('message', config.onmessage); };
=
signaling using socket.io over node.js
Signaling for all latest experiments and newer releases.
Your server-side node.js code looks like this:
io.sockets.on('connection', function (socket) { socket.on('message', function (data) { socket.broadcast.emit('message', data); }); });
And to override openSignalingChannel on the client side:
connection.openSignalingChannel = function(callback) { return io.connect().on('message', callback); };
Want to use XHR, WebSockets, SIP, XMPP, etc. for signaling? Read this post.
=
How to use RecordRTC?
<script src="https://www.webrtc-experiment.com/RecordRTC.js"></script>
=
How to record video using RecordRTC?
var recorder = RecordRTC({ video: HTMLVideoElement }); /* start recording video */ recorder.recordVideo(); /* stop recording video and save recorded file to disk */ recorder.stopVideo(function(recordedFileURL) { window.open(recordedFileURL); });
=
How to record GIF using RecordRTC?
<script src="https://www.webrtc-experiment.com/gif-recorder.js"></script>
var recorder = RecordRTC({ video: HTMLVideoElement }); /* start recording gif */ recorder.recordGIF(); /* stop recording gif and save recorded file to disk */ recorder.stopGIF(function(gifURL) { window.open(gifURL); });
=
How to record audio using RecordRTC?
var recorder = RecordRTC({ stream: MediaStream || LocalMediaStream }); /* start recording audio */ recorder.recordAudio(); /* stop recording audio and save recorded file to disk */ recorder.stopAudio(function(recordedFileURL) { window.open(recordedFileURL); });
=
=
How to record audio using AudioVideoRecorder?
AudioVideoRecorder({ // MediaStream object stream: MediaStream, // mime-type of the output blob mimeType: 'audio/ogg', // set time-interval to get the blob interval: 5000, // get access to the recorded blob onRecordedMedia: function (blob) { // POST/PUT blob using FormData/XMLHttpRequest // or readAsDataURL var reader = new FileReader(); reader.onload = function (e) { hyperlink.href = e.target.result; }; reader.readAsDataURL(blob); } });
=
AudioVideoRecorder Documentation
=
Browser Support
WebRTC Experiments works fine on following web-browsers:
| Browser | Support |
|---|---|
| Firefox | Stable / Aurora / Nightly |
| Google Chrome | Stable / Canary / Beta / Dev |
| Android | Chrome Beta |
=
License
WebRTC Experiments are released under MIT licence . Copyright (c) 2013 Muaz Khan.