WebRTC-Experiment
WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
Top Related Projects
WebRTC Web demos and samples
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
- 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];
};
- 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;
});
- 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:
-
Clone the repository:
git clone https://github.com/muaz-khan/WebRTC-Experiment.git
-
Navigate to the desired demo or experiment folder.
-
Open the HTML file in a web browser that supports WebRTC (e.g., Chrome, Firefox).
-
For more complex demos, refer to the specific README file in the demo folder for additional setup instructions.
-
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
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.
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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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/
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/
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.)
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
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
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/
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
Youtube video presentation: https://www.youtube.com/watch?v=gv8xpdGdS4o
WebRTC Video Conferencing Demos
WebRTC File Sharing
- Advance file sharing demo: https://rtcmulticonnection.herokuapp.com/demos/file-sharing.html
WebRTC Screen Sharing
- P2P Screen Sharing: https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/
- Simple getDisplayMedia: https://www.webrtc-experiment.com/getDisplayMedia/
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.
Top Related Projects
WebRTC Web demos and samples
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
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot