Realtime/Working WebRTC Experiments
- 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 entirely client-side; i.e. no server installation needed!
- You can use all these demos in PHP/Python/Ruby/ASP.NET/etc. everywhere!
=
Library Name | Short Description | Documentation | Demos |
---|---|---|---|
RecordRTC.js |
A library for audio/video recording | Documentation | Demos |
RTCMultiConnection.js |
An ultimate wrapper library for RTCWeb APIs |
Documentation | Demos |
getScreenId.js |
Single chrome extension for all domains! | Documentation | Demos |
Conversation.js |
Enjoy Skype-like Conversations! | Documentation | Demos |
DataChannel.js |
An ultimate wrapper library for RTCDataChannel APIs |
Documentation | Demos |
SdpSerializer.js |
An easiest way to modify SDP | 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 |
File.js |
A standalone library for file sharing functionalities | Documentation | Demos |
getMediaElement.js |
A library for audio/video media elements' layout | Documentation | Demos |
Translator.js |
Voice & Text Translator | Documentation | Demos |
DetectRTC.js |
A library for detecting WebRTC features | Documentation | Demos |
navigator.customGetUserMediaBar.js |
Keep your users Privacy! | Documentation | Demos |
=
- PluginRTC: IE/Safari Plugins compatible WebRTC-Experiments
- RecordRTC Experimental
- RTCMultiConnection Experimental
- Conversation.js Experimental
=
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 |
=
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 |
=
- desktopCapture API / Install App Store Extension
- tabCapture API / Install App Store Extension
- Desktop Sharing / Install App Store Extension
=
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 |
WebRTC 1-1 Audio/Video/Screen Sharing |
Realtime, pluginfree! | Source |
=
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 |
=
Experiment Name | Previous Demos | New Demos |
---|---|---|
Plugin-free screen sharing / share the entire screen | Demo / Source | Demo / Source Code |
Desktop sharing / using desktopCapture APIs |
Demo / Source | -- |
Tab sharing / using tabCapture APIs |
Demo / Source | -- |
=
Experiments to share region/part of the screen
Experiment Name | Demo | Source Code |
---|---|---|
Share part-of-screen RTCMultiConnection | Demo | Source |
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 MediaStreamRecorder.js library
Experiment Name | Demo | Source Code |
---|---|---|
Audio Recording | Demo | Source |
Video/Gif Recording | 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 | ---- |
=
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
- MultiRTC! RTCMultiConnection all-in-one demo!
- All-in-One test
- Multi-Broadcasters and Many Viewers
- OneWay Screen & Two-Way Audio
- Stream Mp3 Live
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/remote-stream-forwarding.html">Remote Stream Forwarding</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/getMediaDevices.html">navigator.getMediaDevices AKA navigator.enumerateDevices</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/changeBandwidth.html">connection.changeBandwidth({ audio: 128, video: 256 })</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/RTCMultiConnection.sharePartOfScreen.html">connection.sharePartOfScreen({ element: 'body'})</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/Renegotiation.html">Renegotiation & Mute/UnMute/Stop</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/videoconferencing.html">Video-Conferencing</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/video-broadcasting.html">Video Broadcasting</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/audioconferencing.html">Audio Conferencing</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/multi-streams-attachment.html">Multi-streams attachment</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/admin-guest.html">Admin/Guest audio/video calling</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/session-reinitiation.html">Session Re-initiation Test</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/rooms-screenshots.html">Preview Screenshot of the room</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/RecordRTC-and-RTCMultiConnection.html">RecordRTC & RTCMultiConnection</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/features.html">Explains how to customize ice servers; and resolutions</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/mute-unmute.html">Mute/Unmute and onmute/onunmute</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/one-page-demo.html">One-page demo: Explains how to skip external signalling gateways</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/password-protect-rooms.html">Password Protect Rooms: Explains how to authenticate users</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/session-management.html">Session Management: Explains difference between "leave" and "close" methods</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/multi-sessions-management.html">Multi-Sessions Management</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/RTCMultiConnection-v1.3-demo.html">RTCMultiConnection-v1.3 test</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/bandwidth.html">Customizing Bandwidth</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/users-ejection.html">Users ejection and presence detection</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/multi-session-establishment.html">Multi-Session Establishment</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/group-file-sharing-plus-text-chat.html">File Sharing + Text Chat</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/audio-conferencing-data-sharing.html">Audio Conferencing + File Sharing + Text Chat</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/join-with-or-without-camera.html">Join with/without camera</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/screen-sharing.html">Screen Sharing</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/one-to-one-filesharing.html">One-to-One file sharing</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission.html">Manual session establishment + extra data transmission</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/manual-session-establishment-plus-extra-data-transmission-plus-videoconferencing.html">Manual session establishment + extra data transmission + video conferencing</a></li>
<li><a href="https://www.webrtc-experiment.com/RTCMultiConnection/chrome-to-firefox-screen-sharing.html">Chrome-to-Firefox Screen Sharing</a></li>
=
- http://muaz-khan.blogspot.com/search/label/WebRTC
- https://www.webrtc-experiment.com/#documentations
- https://www.facebook.com/WebRTC
- https://plus.google.com/+WebRTC-Experiment/posts
=
- Transcoding WAV into Ogg / Source Code
- Transcoding WebM into mp4 / Source Code
- Transcoding WebM into mp4; then merging WAV+mp4 into single mp4 / Source Code
- Recording Audio+Canvas and merging in single mp4 / Source Code
=
=
How to record audio using RecordRTC?
<script src="//cdn.webrtc-experiment.com/RecordRTC.js"></script>
var recordRTC = RecordRTC(mediaStream);
recordRTC.startRecording();
recordRTC.stopRecording(callback_function);
var blob = recordRTC.getBlob();
var blobURL = recordRTC.toURL();
recordRTC.getDataURL(callback_function);
- RecordRTC to Node.js
- RecordRTC to PHP
- RecordRTC to ASP.NET MVC
- RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!
- MRecordRTC i.e. Multi-RecordRTC!
- RecordRTC on Ruby!
- RecordRTC over Socket.io
- ffmpeg-asm.js and RecordRTC! Audio/Video Merging & Transcoding!
- Recording Audio+Video in single WebM on Firefox
- RecordRTC / PHP / FFmpeg
=
You can write entire skype-like web-app using RTCMultiConnection! It supports all complex renegotiation scenarios!
<button id="openNewSessionButton">open New Session Button</button><br />
<script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js"> </script>
<script>
var connection = new RTCMultiConnection().connect();
document.getElementById('openNewSessionButton').onclick = function() {
connection.open();
};
</script>
RTCMultiConnection Documentation
=
DataChannel.js / A library for RTCDataChannel APIs
<script src="//cdn.webrtc-experiment.com/DataChannel.js"> </script>
<script>
var channel = new DataChannel();
channel.onopen = function(userid) {};
channel.onmessage = function(message) {};
// search for existing channels
channel.connect();
document.getElementById('new-channel').onclick = function() {
channel.open(); // setup new channel
};
</script>
=
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!
<script src="//cdn.webrtc-experiment.com/Translator.js"> </script>
var translator = new Translator();
translator.voiceToText(function (text) {
console.log('Your voice as text!', text);
}, 'your-language');
translator.translateLanguage(textToConvert, {
from: 'language-of-the-text',
to: 'convert-into',
callback: function (translatedText) {
console.log('translated text', translatedText);
}
});
translator.speakTextUsingRobot(textToPlay);
translator.speakTextUsingGoogleSpeaker({
textToSpeak: 'text-to-convert',
targetLanguage: 'your-language'
});
=
Simply use getScreenId.js and enjoy screen capturing from any domain. You don't need to deploy chrome extension yourself. You can refer your users to install this chrome extension instead. Also, getScreenId.js auto-fallbacks to command-line based screen capturing if chrome extension isn't installed or disabled. getScreenId.js throws clear exceptions which is helpful for end-user experiences.
Demo: https://www.webrtc-experiment.com/getScreenId/
<script src="//cdn.WebRTC-Experiment.com/getScreenId.js"></script>
<script>
getScreenId(function (error, sourceId, screen_constraints) {
// error == null || 'permission-denied' || 'not-installed' || 'installed-disabled' || 'not-chrome'
// sourceId == null || 'string'
navigator.webkitGetUserMedia(screen_constraints, function (stream) {
document.querySelector('video').src = URL.createObjectURL(stream);
}, function (error) {
console.error(error);
});
});
</script>
=
openSignalingChannel
for RTCMultiConnection.js and DataChanel.js (Client-Side Code)
var onMessageCallbacks = {};
var socketio = io.connect('http://localhost:8888/');
socketio.on('message', function(data) {
if(data.sender == connection.userid) return;
if (onMessageCallbacks[data.channel]) {
onMessageCallbacks[data.channel](data.message);
};
});
connection.openSignalingChannel = function (config) {
var channel = config.channel || this.channel;
onMessageCallbacks[channel] = config.onmessage;
if (config.onopen) setTimeout(config.onopen, 1000);
return {
send: function (message) {
socketio.emit('message', {
sender: connection.userid,
channel: channel,
message: message
});
},
channel: channel
};
};
=
io.sockets.on('connection', function (socket) {
socket.on('message', function (data) {
socket.broadcast.emit('message', data);
});
});
=
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 |
=
- Personal Webpage � http://www.muazkhan.com
- Email � muazkh@gmail.com
- Twitter � https://twitter.com/muazkh and https://twitter.com/WebRTCWeb
=
All WebRTC Experiments are released under MIT licence . Copyright (c) Muaz Khan.