The webrtc-experiment from imclab

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!

Libraries

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
`DetectRTC.js`	A library for detecting WebRTC features	Documentation	Demos

Important Experiments

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

Useful Experiments

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

One-to-Many style of WebRTC Experiments

Experiment Name	Previous Demos	New Demos
video-broadcasting	Demo / Source	Demo / Source Code
audio-broadcasting	Demo / Source	Demo / Source Code

One-to-One style of WebRTC Experiments

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

Single-Page / One-Page / Client Side

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

Experiments to share tab/screen/desktop

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	--

Experiments to share region/part of the screen

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	----

Experimental (Non-Functional)

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
Multi-Broadcasters and Many Viewers	Demo	Source

Documents for newcomers/newbies/beginners

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!
Are you want to learn WebRTC?

ffmpeg-asm.js Demos

Custom Signaling

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) {});

RTCMultiConnection.js

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>

DataChannel Documentation

Translator.js / Demo

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 onMessageCallbacks = {};
var socketio = io.connect('http://localhost:8888/');

socketio.on('message', function(data) {
    if(data.sender == connection.userid) return;
    
    if (onMessageCallbacks[data.channel]) {
        onMessageCallbacks[data.channel](data.message);
    };
});

connection.openSignalingChannel = function (config) {
    var channel = config.channel || this.channel;
    onMessageCallbacks[channel] = config.onmessage;

    if (config.onopen) setTimeout(config.onopen, 1000);
    return {
        send: function (message) {
            socketio.emit('message', {
                sender: connection.userid,
                channel: channel,
                message: message
            });
        },
        channel: channel
    };
};

Nodejs/Socketio Server-Side Code

io.sockets.on('connection', function (socket) {
    socket.on('message', function (data) {
        socket.broadcast.emit('message', data);
    });
});

Browser Support

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

License

All WebRTC Experiments are released under MIT licence . Copyright (c) Muaz Khan.

imclab / webrtc-experiment Goto Github PK

webrtc-experiment's Introduction