Convert Figma logo to code with AI

muaz-khan logoWebRTC-Experiment

WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!

11,714
3,951
11,714
535

Top Related Projects

13,895

WebRTC Web demos and samples

12,311

Simple peer-to-peer with WebRTC.

📡 Simple WebRTC video, voice, and data channels

Jitsi Meet - Secure, Simple and Scalable Video Conferences that you use as a standalone app or embed in your web application.

node-webrtc is a Node.js Native Addon that provides bindings to WebRTC M87

Quick Overview

WebRTC-Experiment is a comprehensive collection of WebRTC demos, experiments, and libraries. It provides a wide range of WebRTC-related tools and examples, including video conferencing, screen sharing, file sharing, and more. The project aims to simplify WebRTC implementation and showcase its capabilities.

Pros

  • Extensive collection of WebRTC demos and experiments
  • Well-documented with clear examples and explanations
  • Regularly updated and maintained
  • Supports various use cases and scenarios for WebRTC applications

Cons

  • Some components may be outdated or not optimized for the latest WebRTC standards
  • Large repository size may be overwhelming for beginners
  • Lack of a unified API across all components
  • Some examples may require additional setup or dependencies

Code Examples

  1. Creating a simple peer connection:
const pc = new RTCPeerConnection();
pc.onicecandidate = event => {
  if (event.candidate) {
    // Send the candidate to the remote peer
  }
};

pc.ontrack = event => {
  const remoteVideo = document.getElementById('remoteVideo');
  remoteVideo.srcObject = event.streams[0];
};
  1. Adding a local stream to the peer connection:
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    stream.getTracks().forEach(track => pc.addTrack(track, stream));
    const localVideo = document.getElementById('localVideo');
    localVideo.srcObject = stream;
  });
  1. Creating and sending an offer:
pc.createOffer()
  .then(offer => pc.setLocalDescription(offer))
  .then(() => {
    // Send the offer to the remote peer
    sendSignalingMessage({ type: 'offer', sdp: pc.localDescription });
  });

Getting Started

To get started with WebRTC-Experiment, follow these steps:

  1. Clone the repository:

    git clone https://github.com/muaz-khan/WebRTC-Experiment.git
    
  2. Navigate to the desired demo or experiment folder.

  3. Open the HTML file in a web browser that supports WebRTC (e.g., Chrome, Firefox).

  4. For more complex demos, refer to the specific README file in the demo folder for additional setup instructions.

  5. To use the libraries in your own project, include the desired JavaScript files and follow the documentation provided in each component's folder.

Competitor Comparisons

13,895

WebRTC Web demos and samples

Pros of WebRTC Samples

  • Official repository maintained by the WebRTC project, ensuring up-to-date and standard-compliant examples
  • Comprehensive collection of samples covering various WebRTC features and use cases
  • Well-documented code with clear explanations and comments

Cons of WebRTC Samples

  • Focuses primarily on individual features, lacking full-fledged application examples
  • May be more complex for beginners compared to WebRTC-Experiment's simplified approach
  • Less emphasis on cross-browser compatibility and polyfills

Code Comparison

WebRTC Samples:

const peerConnection = new RTCPeerConnection(configuration);
peerConnection.addEventListener('icecandidate', event => {
  if (event.candidate) {
    signalingChannel.send({'candidate': event.candidate});
  }
});

WebRTC-Experiment:

connection.openOrJoin('room-id');
connection.onstream = function(event) {
    document.body.appendChild(event.mediaElement);
};

WebRTC Samples provides more granular control over the WebRTC setup, while WebRTC-Experiment offers a higher-level abstraction for quicker implementation. The WebRTC Samples code demonstrates low-level event handling, whereas WebRTC-Experiment simplifies the process with a more user-friendly API.

12,311

Simple peer-to-peer with WebRTC.

Pros of PeerJS

  • Simpler API and easier to use for beginners
  • Better documentation and examples
  • More active development and community support

Cons of PeerJS

  • Less flexible and customizable than WebRTC-Experiment
  • Requires a server for signaling, which may introduce latency
  • Limited support for advanced WebRTC features

Code Comparison

WebRTC-Experiment:

connection = new RTCMultiConnection();
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
connection.session = {
    audio: true,
    video: true
};
connection.openOrJoin('room-id');

PeerJS:

const peer = new Peer();
const conn = peer.connect('peer-id');
conn.on('open', () => {
    conn.send('Hello!');
});

Summary

PeerJS offers a more user-friendly approach to WebRTC, making it easier for beginners to implement peer-to-peer connections. However, WebRTC-Experiment provides more flexibility and advanced features for developers who need fine-grained control over their WebRTC implementations. The choice between the two depends on the specific requirements of your project and your level of expertise with WebRTC technologies.

📡 Simple WebRTC video, voice, and data channels

Pros of simple-peer

  • Simpler API and easier to use for basic WebRTC connections
  • Better documentation and examples for quick implementation
  • Actively maintained with more recent updates

Cons of simple-peer

  • Less comprehensive feature set compared to WebRTC-Experiment
  • Fewer advanced options for customizing WebRTC behavior
  • Limited support for more complex use cases like multi-party connections

Code Comparison

simple-peer:

const peer = new SimplePeer({ initiator: true })
peer.on('signal', data => {
  // send signal data to peer
})
peer.on('connect', () => {
  peer.send('hello')
})

WebRTC-Experiment:

var connection = new RTCMultiConnection();
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
connection.session = {
    audio: true,
    video: true
};
connection.openOrJoin('room-id');

Summary

simple-peer offers a more straightforward approach for basic WebRTC connections, making it ideal for simpler projects. WebRTC-Experiment provides a more comprehensive set of features and options, suitable for complex applications requiring advanced WebRTC functionality. Choose based on your project's specific requirements and complexity.

Jitsi Meet - Secure, Simple and Scalable Video Conferences that you use as a standalone app or embed in your web application.

Pros of Jitsi Meet

  • More comprehensive and feature-rich video conferencing solution
  • Active development with frequent updates and community support
  • Scalable for large-scale deployments and enterprise use

Cons of Jitsi Meet

  • Steeper learning curve due to its complexity
  • Requires more server resources for deployment
  • May be overkill for simple WebRTC implementations

Code Comparison

WebRTC-Experiment:

connection.openOrJoin('room-id', function(isRoomCreated, roomid, error) {
    if(error) {
        console.error(error);
    }
    else if(isRoomCreated) {
        console.log('Room created');
    }
    else {
        console.log('Room joined');
    }
});

Jitsi Meet:

const domain = 'meet.jit.si';
const options = {
    roomName: 'MyMeetingRoom',
    width: 700,
    height: 700,
    parentNode: document.querySelector('#meet')
};
const api = new JitsiMeetExternalAPI(domain, options);

WebRTC-Experiment focuses on simplicity and ease of use for basic WebRTC functionality, while Jitsi Meet provides a more robust and feature-complete video conferencing solution. WebRTC-Experiment is better suited for developers looking to quickly implement basic WebRTC features, whereas Jitsi Meet is ideal for those needing a full-fledged, scalable video conferencing platform.

node-webrtc is a Node.js Native Addon that provides bindings to WebRTC M87

Pros of node-webrtc

  • Native C++ implementation, offering better performance for server-side WebRTC applications
  • Provides low-level access to WebRTC APIs, allowing for more fine-grained control
  • Supports Node.js, enabling integration with existing Node.js applications and ecosystems

Cons of node-webrtc

  • Steeper learning curve due to its low-level nature and C++ integration
  • Less extensive documentation and examples compared to WebRTC-Experiment
  • Requires compilation of native modules, which can be challenging for some developers

Code Comparison

WebRTC-Experiment (JavaScript):

var connection = new RTCMultiConnection();
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
connection.session = {
    audio: true,
    video: true
};
connection.openOrJoin('room-id');

node-webrtc (C++/JavaScript):

const wrtc = require('node-webrtc');
const pc = new wrtc.RTCPeerConnection();
const dc = pc.createDataChannel('test');
pc.createOffer().then(offer => pc.setLocalDescription(offer));

WebRTC-Experiment focuses on high-level abstractions and ease of use, while node-webrtc provides low-level access to WebRTC functionality, requiring more setup but offering greater flexibility and control.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

WebRTC Demos, Experiments, Libraries, Examples


RecordRTC | WebRTC Audio+Video+Screen Recording

WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.

Live Demo: https://www.webrtc-experiment.com/RecordRTC/

npm downloads Build Status: Linux

Github (open sourced): https://github.com/muaz-khan/RecordRTC

RecordRTC extension is available in the Chrome Web Store.


MultiStreamsMixer

Pass multiple streams (e.g. screen+camera or multiple-cameras) and get single stream.

Live Demo: https://www.webrtc-experiment.com/MultiStreamsMixer/

Github: https://github.com/muaz-khan/MultiStreamsMixer


DetectRTC | Is WebRTC Supported In Your Browser?

A tiny JavaScript library that can be used to detect WebRTC features e.g. system having speakers, microphone or webcam, screen capturing is supported, number of audio/video devices etc.

Live Demo: https://www.webrtc-experiment.com/DetectRTC/

npm downloads Build Status: Linux

Github (open sourced): https://github.com/muaz-khan/DetectRTC


RTCMultiConnection

WebRTC JavaScript library for peer-to-peer applications (screen sharing, audio/video conferencing, file sharing, media streaming etc.)

npm downloads Build Status: Linux

Github: https://github.com/muaz-khan/RTCMultiConnection

Socket.io signaling server: https://github.com/muaz-khan/RTCMultiConnection-Server


WebRTC Scalable Broadcasting

This module simply initializes socket.io and configures it in a way that single broadcast can be relayed over unlimited users without any bandwidth/CPU usage issues. Everything happens peer-to-peer!

Live Demo: https://rtcmulticonnection.herokuapp.com/demos/Scalable-Broadcast.html

npm downloads

Github (open sourced): https://github.com/muaz-khan/WebRTC-Scalable-Broadcast


WebRTC Dashboard | Canvas2D Drawing Tool

Collaborative, extendable, JavaScript Canvas2D drawing tool, supports dozens of builtin tools, as well as generates JavaScript code for 2D animations.

Live Demo: https://www.webrtc-experiment.com/Canvas-Designer/

Github (open-sourced): https://github.com/muaz-khan/Canvas-Designer

npm downloads Build Status: Linux

You video presentation: https://www.youtube.com/watch?v=pvAj5l_v3cM


WebRTC Voice & Text Translator

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!

Live Demo: https://www.webrtc-experiment.com/Translator/

Github (open-sourced): https://github.com/muaz-khan/Translator


getStats | Get WebRTC Peer Connection Stats

A tiny JavaScript library using WebRTC getStats API to return peer connection stats i.e. bandwidth usage, packets lost, local/remote ip addresses and ports, type of connection etc.

Live Demo: https://www.webrtc-experiment.com/getStats/

npm downloads

Github (open-sourced): https://github.com/muaz-khan/getStats


FileBufferReader | File Sharing

FileBufferReader is a JavaScript library reads file and returns chunkified array-buffers. The resulting buffers can be shared using WebRTC data channels or socket.io.

Live Demo: https://www.webrtc-experiment.com/FileBufferReader/

Github (open-sourced): https://github.com/muaz-khan/FileBufferReader

npm downloads Build Status: Linux

Youtube video presentation: https://www.youtube.com/watch?v=gv8xpdGdS4o


WebRTC Video Conferencing Demos


WebRTC File Sharing


WebRTC Screen Sharing


Ffmpeg.js demos, both for browsers and node.js


XHR-Signaling

XHR/XMLHttpRequest based WebRTC signaling implementation.

Github (open-sourced): https://github.com/muaz-khan/XHR-Signaling


ASP.NET MVC based WebRTC Demo

A simple WebRTC one-to-one demo written in September, 2012! It supports public rooms as well as password-protected private rooms! MS-SQL database is used as signaling gateway!

Github (open-sourced): https://github.com/muaz-khan/WebRTC-ASPNET-MVC


WebSync-Signaling

WebSync is used as signaling gateway with/for WebRTC-Experiments e.g. RTCMultiConnection.js, DataChannel.js, Plugin-free screen sharing, and video conferencing.

Github (open-sourced): https://github.com/muaz-khan/WebSync-Signaling


Server Sent Events (SSE) over PHP

Server Sent Events (SSE) are used to setup WebRTC peer-to-peer connections.

Github (open-sourced): https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/SSEConnection


SignalR

SignalR project for RTCMultiConnection: https://github.com/muaz-khan/RTCMultiConnection-SignalR


License

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