Realtime/Working WebRTC Experiments

1. It is a repository of uniquely experimented WebRTC demos; written by Muaz Khan!
2. No special requirement! Just Chrome (for desktop and android) or Firefox!
3. These demos/experiments are entirely client-side; i.e. no server installation needed!

=

Libraries

Library Name	Short Description	Documentation	Demos
RTCMultiConnection.js	An ultimate wrapper library for RTCWeb APIs	Documentation	Demos
DataChannel.js	An ultimate wrapper library for RTCDataChannel APIs	Documentation	Demos
MediaStreamRecorder.js	MediaStreamRecorder	Documentation	Demos
RecordRTC.js	A library for audio/video recording	Documentation	Demos
AudioVideoRecorder.js	Audio+video recording using MediaRecorder API	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

=

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
Audio-only Calls	Realtime, plugin-free, voice-only calls	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
text chat / multi-user (group) text chat	Demo / Source	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	----	Source

=

Experiments to share tab/screen

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

=

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

=

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

=

DataChannel.js / A library for RTCDataChannel APIs

<script src="https://www.webrtc-experiment.com/DataChannel.js"> </script>

<input type="text" id="chat-input" disabled style="font-size: 2em; width: 98%;"><br />
<div id="chat-output"></div>

<script>
    var chatOutput = document.getElementById('chat-output');
    var chatInput = document.getElementById('chat-input');
    chatInput.onkeypress = function(e) {
        if (e.keyCode != 13) return;
        channel.send(this.value);
        chatOutput.innerHTML = 'Me: ' + this.value + '<hr />' + chatOutput.innerHTML;
        this.value = '';
    };
</script>

<script>
    var channel = new DataChannel('Session Unique Identifier');

    channel.onopen = function(userid) {
        chatInput.disabled = false;
        chatInput.value = 'Hi, ' + userid;
        chatInput.focus();
    };

    channel.onmessage = function(message, userid) {
        chatOutput.innerHTML = userid + ': ' + message + '<hr />' + chatOutput.innerHTML;
    };

    channel.onleave = function(userid) {
        chatOutput.innerHTML = userid + ' Left.<hr />' + chatOutput.innerHTML;
    };
</script>

=

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,
        video: true
    };

    connection.onstream = function(e) {
        document.body.appendChild(e.mediaElement);
    };

    connection.onstreamended = function(e) {
        if (e.mediaElement.parentNode) e.mediaElement.parentNode.removeChild(e.mediaElement);
    };

    var session_unique_idetifier = 'Session Unique Identifier';

    connection.connect(session_unique_idetifier);

    document.getElementById('init').onclick = function() {
        this.disabled = true;
        connection.open(session_unique_idetifier);
    };
</script>

=

MediaStreamRecorder.js / Cross-Browser Library to record MediaStream

<script src="https://www.webrtc-experiment.com/MediaStreamRecorder.js"> </script>

var mediaConstraints = {
    audio: true
};

navigator.mozGetUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {
    var mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.mimeType = 'audio/ogg';
    mediaRecorder.ondataavailable = function (blob) {
        // POST/PUT "Blob" using FormData/XHR2

        // or read as DataURL
        var reader = new FileReader();
        reader.onload = function (e) {
            var dataURL = e.target.result;
            window.open(dataURL);
        };
        reader.readAsDataURL(blob);
    };
    mediaRecorder.start(3000);
}

function onMediaError(e) {
    console.error('media error', e);
}

=

SdpSerializer.js / An easiest way to modify SDP

<script src="https://www.webrtc-experiment.com/SdpSerializer.js"></script>

var serializer = new SdpSerializer(sdp);

// remove entire audio m-line
serializer.audio.remove();

// change order of a payload type in video m-line
serializer.video.payload(117).order(0);

// inject new-line after a specific payload type; under video m-line
serializer.video.payload(117).newLine('a=ptime:10');

// remove a specific payload type; under video m-line
serializer.video.payload(100).remove();

// want to add/replace a crypto line?
serializer.video.crypto().newLine('a=crypto:0 AES_CM_128_HMAC_SHA1_80 inline:AAAAA');

// want to remove a crypto line?
serializer.video.crypto(80).remove();

// want to set direction?
serializer.video.direction.set('sendonly');

// want to get direction?
serializer.video.direction.get();

// want to remove entire audio or video track?
// usually, in video m-line:
// 0-track is always "video" stream
// 1-track will be screen sharing stream (if attached)
serializer.video.track(0).remove()

// get serialized sdp
sdp = serializer.deserialize();

=

How to record video using RecordRTC?

<script src="https://www.webrtc-experiment.com/RecordRTC.js"></script>

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

RecordRTC Documentation

=

How to record audio using AudioVideoRecorder?

AudioVideoRecorder({

    // MediaStream object
    stream: MediaStream,

    // mime-type of the output blob
    mimeType: 'audio/ogg',

    // set time-interval to get the blob
    interval: 5000,

    // get access to the recorded blob
    onRecordedMedia: function (blob) {
        // POST/PUT blob using FormData/XMLHttpRequest

        // or readAsDataURL
        var reader = new FileReader();
        reader.onload = function (e) {
            hyperlink.href = e.target.result;
        };
        reader.readAsDataURL(blob);
    }

});

=

AudioVideoRecorder Documentation

=

Browser Support

WebRTC Experiments works fine on following web-browsers:

Browser	Support
Firefox	Stable / Aurora / Nightly
Google Chrome	Stable / Canary / Beta / Dev
Android	Chrome Beta

=

Signaling.md
Socket.io over Node.js / Demo
WebSocket over Node.js / Demo

=

License

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