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 |
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 |
=
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 |
=
- https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Chrome-Extensions/desktopCapture
- https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Chrome-Extensions/tabCapture
- https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Chrome-Extensions/webrtc-extension
- https://github.com/muaz-khan/WebRTC-Experiment/tree/master/desktop-sharing
=
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 | -- |
=
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 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
Experiment Name | Demo | Source Code |
---|---|---|
All-in-One test | Demo | Source |
Renegotiation & Mute/UnMute/Stop | Demo | Source |
Multi-streams attachment | Demo | Source |
Admin/Guest audio/video calling | Demo | Source |
Session-Reinitiation | Demo | Source |
Audio/Video Recording | Demo | Source |
Mute/UnMute | Demo | Source |
Password Protected Rooms | Demo | Source |
WebRTC remote media stream forwarding | 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 + video conferencing | Demo | Source |
Customizing Bandwidth | Demo | Source |
Users ejection and presence detection | Demo | Source |
RTCMultiConnection-v1.3 and socket.io | ---- | Source |
Multi-Broadcasters and Many Viewers | Demo | Source |
=
- 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="//www.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="http://www.RTCMultiConnection.org/latest.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="//www.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="//www.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'
});
=
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.