Plug & play type of WebRTC Experiments. Nothing to install. No requirements. Just copy HTML/JavaScript code in your site and that's all you need to do!
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? |
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.leave(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>
<script>
var connection = new RTCMultiConnection('session-id');
// to create/open a new session - argument is optional
connection.open({
// "extra" object allows you pass extra data like username, number of participants etc.
extra: { },
// it is the broadcasting interval � default value is 3 seconds
interval: 3000
});
// get access to local or remote streams
connection.onstream = function (stream) {
if (stream.type === 'local') {
mainVideo.src = stream.blobURL;
}
if (stream.type === 'remote') {
var video = stream.mediaElement;
video.id = stream.userid; // useful to remove user video when he leaves your room
document.body.appendChild();
}
}
// Use "onUserLeft" to be get alerted if a user leaves the room
connection.onUserLeft = function(userid, extra) {
// remove user's video using his user-id
};
// Eject a user or close your own entire session
connection.leave(userid); // throw a user out of your room!
connection.leave(); // close your own entire session
// Use "onNewSession" method to show each new session in a list
// so end users can manually join any session they prefer:
connection.onNewSession = function(session) {
// use "session.extra" to access "extra" data
};
// To manually join a preferred session any time;
// use "join" method instead of "connect" method
connection.join(session, extra);
// e.g. passing string
connection.join(session, 'username');
// e.g. passing object
connection.join(session, {
username: 'mine user name'
});
</script>If you want to install/use your own socket.io 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.