It is a repository uniquely experimented WebRTC demos; written by Muaz Khan; helped by you and the community!
No special requirement! Just Chrome or Firefox!
These demos/experiments are entirely client-side; i.e. no server installation needed!
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 |
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 |
- 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
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 |
Majority of WebRTC Experiments are using libraries like:
Getting started with DataChannel.js
<script src="https://webrtc-experiment.appspot.com/DataChannel.js"></script>
<script>
var channel = new DataChannel('channel-name');
channel.send(file || data || 'text');
channel.onleave = function(userid) { };
channel.eject(userid); // throw a user out of your room!
</script>
Getting started with RTCMultiConnection.js - v1.1
<script src="https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.2.js"></script>
var connection = new RTCMultiConnection();
// to create/open a new session
connection.open('session-id');
// if someone already created a session; to join it: use "connect" method
connection.connect('session-id');
connection.eject(userid); // throw a user out of your room!
Use your own socket.io implementation!
connection.openSignalingChannel = function(config) {
var URL = '/';
var channel = config.channel || this.channel || 'default-channel';
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.