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!
=
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 |
=
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 |
=
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 |
=
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 |
Tab sharing / using tabCapture APIs |
Demo / Source | tabCapture |
=
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.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 |
Admin/Guest audio/video calling | Demo | Source |
=
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 |
How to switch streams? |
How to echo cancellation? / Noise management? |
STUN or TURN? Which one to prefer; and why? |
WebRTC RTP Usage |
webrtcpedia! |
=
How to record audio using RecordRTC?
<script src="https://www.webrtc-experiment.com/RecordRTC.js"></script>
var recordRTC = RecordRTC(mediaStream);
recordRTC.startRecording();
recordRTC.stopRecording(function(audioURL) {
window.open(audioURL);
});
// get blob
formData.append( 'blob', recordRTC.getBlob() );
// get DataURL
window.open( recordRTC.getDataURL() );
=
RTCMultiConnection.js / A library for all WebRTC APIs
<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, // attach audio stream too!
video: true, // attach video stream too!
data: true, // open data connection too!
screen: true, // attach screen sharing stream too!
oneway: true // all streams must flow in one-way direction!
};
connection.onstream = function(e) {
document.body.appendChild(e.mediaElement);
};
connection.onstreamended = function(e) {
if (e.mediaElement.parentNode) e.mediaElement.parentNode.removeChild(e.mediaElement);
};
connection.connect(); // search for existing connections
document.getElementById('new-connection').onclick = function() {
connection.open(); // open new connection
};
</script>
RTCMultiConnection Documentation
=
DataChannel.js / A library for RTCDataChannel APIs
<script src="https://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>
=
WebRTC Experiments works fine on following web-browsers:
Browser | Support |
---|---|
Firefox | Stable / Aurora / Nightly |
Google Chrome | Stable / Canary / Beta / Dev |
Android | Chrome Beta |
=
=
- Email: [email protected]
- Twitter: @muazkh / @WebRTCWeb
- Google+: https://plus.google.com/100325991024054712503
- Github: https://github.com/muaz-khan
=
WebRTC Experiments are released under MIT licence . Copyright (c) 2013 Muaz Khan.