Giter Club home page Giter Club logo

web5design / webrtc-experiment Goto Github PK

View Code? Open in Web Editor NEW

This project forked from muaz-khan/webrtc-experiment

0.0 2.0 0.0 8.18 MB

WebRTC Demos & Experiments; Audio/Video Conferencing & Broadcasting; Recording & Screen-Sharing; File-Sharing, data sharing and text-chat; hangouts; signaling using WebSockets & Socketio; SIP & XMPP; RecordRTC.js; RTCMultiConnection.js; DataChannel.js; getMediaElement.js; File.js; Meeting.js; PeerConnection.js; RTCall.js; and many other WebRTC Libraries; all-in-one solution for WebRTC! http://www.rtcmulticonnection.org/ and https://www.webrtc-experiment.com/.

Home Page: https://www.webrtc-experiment.com/

License: Other

webrtc-experiment's Introduction

Realtime/Working WebRTC Experiments

  1. It is a repository of uniquely experimented WebRTC demos; written by Muaz Khan!
  2. No special requirement! Just WebRTC supported browser (e.g. chrome/firefox/opera on desktop/android)
  3. These demos/experiments are entirely client-side; i.e. no server installation needed!

=

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

=

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
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.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/v1.5
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
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

=

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?

=

How to record audio using RecordRTC?
<script src="https://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) {});
  1. RecordRTC to Node.js
  2. RecordRTC to PHP
  3. RecordRTC to ASP.NET MVC
  4. RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!
  5. MRecordRTC i.e. Multi-RecordRTC!
  6. RecordRTC on Ruby!
  7. RecordRTC over Socket.io

=

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="https://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 channels = {};
var currentUserUUID = Math.round(Math.random() * 60535) + 5000;
var socketio = io.connect('http://localhost:8888/');

socketio.on('message', function(data) {
    if(data.sender == currentUserUUID) return;
    
    if (channels[data.channel] && channels[data.channel].onmessage) {
        channels[data.channel].onmessage(data.message);
    };
});

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

    if (config.onopen) setTimeout(config.onopen, 1000);
    return {
        send: function (message) {
            socketio.emit('message', {
                sender: currentUserUUID,
                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);
    });
});

Read more here.

=

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.

webrtc-experiment's People

Contributors

morenoh149 avatar muaz-khan avatar mvayngrib avatar z4c avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.