Git Product home page Git Product logo

erlanggatjhie / 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 5.75 MB

WebRTC video conferencing, screen sharing, file sharing, pre-recorded media streaming, part of screen sharing, group text chat, hangout, broadcasting, audio only calls, RTCDataChannel, SIP over WebSocket etc. All these WebRTC experiments are JavaScript only experiments. Nothing to install; no requirement. Just copy HTML/JavaScript code and use in any site; free of cost!

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

License: Other

webrtc-experiment's Introduction

It is a repository of uniquely experimented WebRTC demos; written by Muaz Khan; contributed by you and the community!

No special requirement! Just Chrome (for desktop and android) or Firefox!

These demos/experiments are entirely client-side; i.e. no server installation needed! (for basic webpages only!)


Libraries

  1. RTCMultiConnection.jsDemos
  2. DataChannel.jsDemos
  3. RecordRTC.jsDemo
  4. RTCall.jsDemo

  1. RecordRTC: A library for WebRTC audio/video recording / Demo
  2. Pre-recorded media streaming
  3. WebRTC one-way video broadcasting

  1. Plugin free screen sharing / Latest Demo
  2. Tab sharing / using tabCapture APIs

Many-to-Many style of WebRTC Experiments

  1. Group video sharing / video-conferencing / Latest Demo
  2. Group file sharing / Latest Demo
  3. Group text chat / Latest Demo

  1. Using RTCDataChannel
  2. Using Firebase
  3. A realtime chat using RTCDataChannel
  4. A realtime chat using Firebase

Demos using DataChannel.js

  1. DataChannel basic demo
  2. Auto Session Establishment and Users presence detection

  1. Multi-Session Establishment
  2. File Sharing + Text Chat
  3. All-in-One test
  4. Video Conferencing
  5. Video Broadcasting
  6. Audio Conferencing
  7. Join with/without camera
  8. Screen Sharing
  9. One-to-One file sharing
  10. Manual session establishment + extra data transmission
  11. Manual session establishment + extra data transmission + video conferencing
  12. Users ejection and presence detection
  13. Customizing Bandwidth
  14. RTCMultiConnection-v1.3 testing demo

One-to-Many style of WebRTC Experiments

  1. Video broadcasting / Latest Demo
  2. Audio broadcasting / Latest Demo

One-to-One style of WebRTC Experiments

  1. One-to-one WebRTC video chat using WebSocket
  2. One-to-one WebRTC video chat using socket.io

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

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://webrtc-experiment.appspot.com/DataChannel.js"></script>
var channel = new DataChannel('channel-name');

channel.onopen = function(e) {};
channel.onmessage = function(e) {};

// share with all participants
channel.send(file || data || 'text');

// Direct messages using user-ids
channel.userid = 'muazkh';
channel.channels['muazkh'].send(file || data || 'text');

RTCMultiConnection.js / A library for all WebRTC APIs

<script src="https://webrtc-experiment.appspot.com/RTCMultiConnection-v1.4.js"></script>
var connection = new RTCMultiConnection();

// session is included in v1.3 and higher releases
connection.session = {
    audio: true,
    video: true
};

// bandwidth is included in v1.3 and higher releases
connection.bandwidth = {
    audio: 50,
    video: 256,
    data: 1638400
};

// framerate is included in v1.4 and higher releases
connection.framerate = {
    minptime: 10,
    maxptime: 60
};

connection.onstream = function (e) {
    if (e.type === 'local') mainVideo.src = e.blobURL; // or URL.createObjectURL(e.stream)
    if (e.type === 'remote') document.body.appendChild(e.mediaElement);
}

// searching/connecting pre-created session
connection.connect('session-id');

// to create/open a new session
connection.open('session-id');

// runtime/dynamic streams insertion i.e. renegotiation
connection.users['user-id'].addStream({
    audio: true,
    video: true
});

RTCall.js / A library for audio-only calling

<script src="https://webrtc-experiment.appspot.com/RTCall.js"></script>
var call = new RTCall();
call.onincomingcall = function(caller) {
   call.receive(caller.receiverid);
};
call.oncustomer = function(customer) {
   call.call(customer.callerid);
};

signaling using socket.io over node.js

Your server-side node.js code looks like this:

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

And to override openSignalingChannel on the client side:

connection.openSignalingChannel = function(callback) {
    return io.connect().on('message', callback);
};

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 GIF using RecordRTC?

<script src="https://webrtc-experiment.appspot.com/gif-recorder.js"></script>
var recorder = RecordRTC({
	video: HTMLVideoElement
});

/* start recording gif */
recorder.recordGIF();

/* stop recording gif and save recorded file to disk */
recorder.stopGIF(function(gifURL) {
   window.open(gifURL);
});
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);
});

RecordRTC 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

License

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

webrtc-experiment's People

Contributors

muaz-khan avatar mvayngrib avatar

Watchers

James Cloos avatar Erlangga Tjhie 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.