Realtime working WebRTC Experiments and Demos
It is a repository of uniquely experimented WebRTC demos; written by Muaz Khan; contributed by you and the community!
No special requirement! Just Chrome (for desktop and android) or Firefox!
These demos/experiments are entirely client-side; i.e. no server installation needed! (for basic webpages only!)
WebRTC Experiments works fine on following web-browsers:
| Browser | Support |
|---|---|
| Firefox | Stable / Aurora / Nightly |
| Google Chrome | Stable / Canary / Beta / Dev |
| Internet Explorer / IE | Chrome Frame |
| Android | Chrome Beta |
- DataChannel.js — A JavaScript library for data/file/text sharing!
- RTCMultiConnection.js — A JavaScript library for streams renegotiation and sharing; multi-session establishment and much more.
- RecordRTC.js — A library to record audio/video streams
- Pre-recorded media streaming — Most demanded and useful feature!
- Socket.io over Node.js — Copy/Paste/Deploy and you're done!
- RTCall.js — A library for Browser-to-Browser audio-only calling
- Using RTCDataChannel
- Using Firebase
- A realtime chat using RTCDataChannel
- A realtime chat using Firebase
RecordRTC: WebRTC audio/video recording / Demo
Demos using DataChannel.js
- Multi-Session Establishment
- File Sharing + Text Chat
- All-in-One test
- Video Conferencing
- Video Broadcasting
- Audio Conferencing
- Join with/without camera
- Screen Sharing
- One-to-One file sharing
- Manual session establishment + extra data transmission
- Manual session establishment + extra data transmission + video conferencing
- Users ejection and presence detection
- Customizing Bandwidth
| in-Page / One-Page / Client Side |
|---|
| Text chat using RTCDataChannel APIs |
| Simple video chat |
| Sharing video - using socket.io for signaling |
| Sharing video - using WebSockets for signaling |
| A few documents for newbies and beginners |
|---|
| RTCPeerConnection Documentation |
| RTCMultiConnection Documentation |
| DataChannel 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 write video-conferencing application using WebRTC? |
| How to broadcast files using RTCDataChannel APIs? |
| WebRTC Signaling Concepts |
<script src="https://webrtc-experiment.appspot.com/DataChannel.js"></script>var channel = new DataChannel('channel-name');
channel.onopen = function(e) {};
channel.onmessage = function(e) {};
channel.send(file || data || 'text');<script src="https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.3.js"></script>var connection = new RTCMultiConnection();
connection.onstream = function (e) {
if (e.type === 'local') mainVideo.src = e.blobURL;
if (e.type === 'remote') document.body.appendChild(e.mediaElement);
}
// searching/connecting pre-created session
connection.connect('session-id');
// to create/open a new session
// it should be called "only-once" by the session-initiator
[button-init-session].onclick = function() {
connection.open('session-id');
};<script src="https://webrtc-experiment.appspot.com/RTCall.js"></script>var call = new RTCall();
call.onincomingcall = function(caller) {
call.receive(caller.receiverid);
};
call.oncustomer = function(customer) {
call.call(customer.callerid);
};Use your own socket.io implementation!
// openSignalingChannel or openSocket!
openSignalingChannel: function(config) {
var URL = 'http://domain.com:8888/';
var channel = config.channel || this.channel || 'one-to-one-video-chat';
var sender = Math.round(Math.random() * 60535) + 5000;
io.connect(URL).emit('new-channel', {
channel: channel,
sender : sender
});
var socket = io.connect(URL + 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);
}For a ready-made socket.io over node.js implementation; visit this link.
Remember, You must link firebase.js file before using below code:
openSignalingChannel: function (config) {
var channel = config.channel || this.channel || 'WebRTC-Experiment';
var socket = new Firebase('https://chat.firebaseIO.com/' + channel);
socket.channel = channel;
socket.on('child_added', function (data) {
config.onmessage && config.onmessage(data.val());
});
socket.send = function (data) {
this.push(data);
};
config.onopen && setTimeout(config.onopen, 1);
socket.onDisconnect().remove();
return socket;
}How to use RecordRTC?
<script src="https://webrtc-experiment.appspot.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 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);
});WebRTC Experiments are released under MIT licence . Copyright (c) 2013 Muaz Khan.