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 |
=
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 |
WebRTC 1-1 Audio/Video/Screen Sharing |
Realtime, pluginfree! | Source | Demo |
=
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 |
=
Experiment Name | Previous Demos | New Demos |
---|---|---|
video-broadcasting | Demo / Source | Demo / Source Code |
audio-broadcasting | Demo / Source | Demo / Source Code |
=
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 |
=
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 |
=
=
- 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();
var blob = recordRTC.getBlob();
var blobURL = recordRTC.toURL();
recordRTC.getDataURL(function(dataURL) {});
- 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
=
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 channels = {};
var currentUserUUID = Math.round(Math.random() * 60535) + 5000;
var socketio = io.connect('http://localhost:8888/');
socketio.on('message', function(data) {
if(data.sender == currentUserUUID) return;
if (channels[data.channel] && channels[data.channel].onmessage) {
channels[data.channel].onmessage(data.message);
};
});
connection.openSignalingChannel = function (config) {
var channel = config.channel || this.channel;
channels[channel] = config;
if (config.onopen) setTimeout(config.onopen, 1000);
return {
send: function (message) {
socketio.emit('message', {
sender: currentUserUUID,
channel: channel,
message: message
});
},
channel: channel
};
};
=
io.sockets.on('connection', function (socket) {
socket.on('message', function (data) {
socket.broadcast.emit('message', data);
});
});
Read more here.
=
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 |
=
Muaz Khan ([email protected]) - @muazkh / @WebRTCWeb
=
All WebRTC Experiments are released under MIT licence . Copyright (c) Muaz Khan.