adapter
READ ONLY FORK: Shim to insulate apps from spec changes and prefix differences. Latest adapter.js release:
Top Related Projects
A low-level JS video API that allows adding a completely custom video experience to web apps.
WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
📡 Simple WebRTC video, voice, and data channels
Simple peer-to-peer with WebRTC.
node-webrtc is a Node.js Native Addon that provides bindings to WebRTC M87
Cutting Edge WebRTC Video Conferencing
Quick Overview
WebRTC adapter is a shim to insulate WebRTC apps from spec changes and prefix differences between browsers. It provides a consistent interface for WebRTC across different browsers, making it easier for developers to create cross-browser WebRTC applications.
Pros
- Simplifies WebRTC development by providing a unified API
- Improves cross-browser compatibility
- Keeps up with WebRTC spec changes, reducing maintenance for developers
- Actively maintained and widely used in the WebRTC community
Cons
- Adds an extra layer of abstraction, which may impact performance slightly
- May not cover all edge cases or browser-specific features
- Requires regular updates to keep up with browser changes
- Some developers may prefer working directly with native APIs for more control
Code Examples
- Getting user media:
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(stream => {
console.log('Got media stream:', stream);
})
.catch(error => {
console.error('Error accessing media devices:', error);
});
- Creating a peer connection:
const configuration = { iceServers: [{ urls: 'stun:stun.example.com' }] };
const pc = new RTCPeerConnection(configuration);
pc.onicecandidate = event => {
if (event.candidate) {
console.log('New ICE candidate:', event.candidate);
}
};
- Adding a track to a peer connection:
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(stream => {
stream.getTracks().forEach(track => {
pc.addTrack(track, stream);
});
});
Getting Started
- Install the adapter via npm:
npm install webrtc-adapter
- Import the adapter in your JavaScript file:
import adapter from 'webrtc-adapter';
- Use WebRTC APIs as usual, and the adapter will handle browser differences:
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(stream => {
const videoElement = document.querySelector('video');
videoElement.srcObject = stream;
})
.catch(error => {
console.error('Error accessing media devices:', error);
});
Competitor Comparisons
A low-level JS video API that allows adding a completely custom video experience to web apps.
Pros of lib-jitsi-meet
- More comprehensive solution for building video conferencing applications
- Includes additional features like room management and participant handling
- Integrates well with the broader Jitsi ecosystem
Cons of lib-jitsi-meet
- Larger and more complex codebase, potentially harder to integrate
- More opinionated architecture, which may not suit all project needs
- Less focused on pure WebRTC compatibility across browsers
Code Comparison
adapter:
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
// Use the stream
})
.catch(function(error) {
console.log('getUserMedia error: ', error);
});
}
lib-jitsi-meet:
JitsiMeetJS.init(options);
const connection = new JitsiMeetJS.JitsiConnection(null, null, options);
connection.addEventListener(
JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED,
onConnectionSuccess);
connection.connect();
The adapter focuses on providing a consistent interface for WebRTC across browsers, while lib-jitsi-meet offers a higher-level API for building complete video conferencing solutions. Adapter is more suitable for projects that need fine-grained control over WebRTC implementations, whereas lib-jitsi-meet is better for rapidly developing feature-rich video conferencing applications within the Jitsi ecosystem.
WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
Pros of WebRTC-Experiment
- Offers a wider range of WebRTC-related features and demos
- Provides more comprehensive documentation and examples
- Includes additional tools and utilities for WebRTC development
Cons of WebRTC-Experiment
- Less focused on cross-browser compatibility
- May have a steeper learning curve for beginners
- Not as actively maintained as adapter
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('Joined existing room');
}
});
adapter:
var pc = new RTCPeerConnection(configuration);
navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(function(stream) {
pc.addStream(stream);
})
.catch(function(error) {
console.error('Error accessing media devices.', error);
});
The WebRTC-Experiment code snippet demonstrates a higher-level abstraction for creating or joining a room, while the adapter code shows a more low-level approach to creating a peer connection and adding media streams.
📡 Simple WebRTC video, voice, and data channels
Pros of simple-peer
- Higher-level abstraction, simplifying WebRTC implementation
- Built-in signaling and peer connection management
- Easier to use for beginners and rapid prototyping
Cons of simple-peer
- Less flexibility for advanced use cases
- Potentially larger bundle size due to additional abstractions
- May not support all WebRTC features or edge cases
Code Comparison
adapter:
var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
var pc = new RTCPeerConnection(configuration);
simple-peer:
var Peer = require('simple-peer')
var peer = new Peer({ initiator: true, trickle: false })
Key Differences
- adapter focuses on providing a consistent API across browsers
- simple-peer abstracts away much of the WebRTC complexity
- adapter requires more manual setup and management of connections
- simple-peer handles many WebRTC details automatically
Use Cases
- adapter: Ideal for projects requiring fine-grained control over WebRTC
- simple-peer: Better for quick implementations and simpler use cases
Community and Maintenance
- adapter: Backed by the official WebRTC project, frequent updates
- simple-peer: Maintained by a respected open-source developer, active community
Simple peer-to-peer with WebRTC.
Pros of PeerJS
- Provides a higher-level abstraction for WebRTC, simplifying peer-to-peer connections
- Offers a cloud-hosted signaling server option, reducing setup complexity
- Includes built-in data channel support for easy peer-to-peer data transfer
Cons of PeerJS
- Less flexibility for fine-tuning WebRTC configurations compared to adapter
- May have slightly higher overhead due to the abstraction layer
- Limited support for advanced WebRTC features like screen sharing
Code Comparison
PeerJS:
const peer = new Peer();
peer.on('open', (id) => {
const conn = peer.connect('remote-peer-id');
conn.on('open', () => {
conn.send('Hello!');
});
});
adapter:
const pc = new RTCPeerConnection();
pc.createDataChannel('myChannel');
pc.createOffer()
.then(offer => pc.setLocalDescription(offer))
.then(() => {
// Send offer to remote peer
});
The PeerJS example demonstrates its simplified API for creating connections, while the adapter example shows the more detailed, low-level approach to WebRTC implementation.
node-webrtc is a Node.js Native Addon that provides bindings to WebRTC M87
Pros of node-webrtc
- Enables WebRTC functionality in Node.js environments
- Provides native bindings for better performance
- Allows server-side WebRTC applications
Cons of node-webrtc
- Limited browser compatibility compared to adapter
- Requires more setup and configuration
- Steeper learning curve for developers new to Node.js
Code Comparison
adapter:
import adapter from 'webrtc-adapter';
const pc = new RTCPeerConnection();
const dc = pc.createDataChannel('test');
node-webrtc:
const wrtc = require('wrtc');
const pc = new wrtc.RTCPeerConnection();
const dc = pc.createDataChannel('test');
Key Differences
- adapter focuses on browser compatibility and standardization
- node-webrtc brings WebRTC capabilities to Node.js environments
- adapter is primarily client-side, while node-webrtc enables server-side WebRTC
- node-webrtc requires additional setup and dependencies
- adapter is more suitable for cross-browser web applications
Use Cases
adapter:
- Web-based video conferencing
- Browser-to-browser file sharing
- Real-time communication in web applications
node-webrtc:
- WebRTC-enabled backend services
- Server-side media processing
- Building custom WebRTC signaling servers
Community and Support
adapter:
- Larger community and more widespread adoption
- Regular updates and maintenance
- Extensive documentation and examples
node-webrtc:
- Smaller but growing community
- Active development and issue resolution
- Specialized support for Node.js developers
Cutting Edge WebRTC Video Conferencing
Pros of mediasoup
- Designed for server-side WebRTC, offering more control over media routing and scalability
- Supports Selective Forwarding Unit (SFU) architecture for efficient multi-party conferencing
- Provides a powerful API for advanced WebRTC features like simulcast and SVC
Cons of mediasoup
- Steeper learning curve due to its more complex architecture
- Requires more server-side setup and management compared to adapter
- May be overkill for simple peer-to-peer WebRTC applications
Code Comparison
mediasoup (server-side):
const mediasoup = require('mediasoup');
const worker = await mediasoup.createWorker();
const router = await worker.createRouter({ mediaCodecs });
const transport = await router.createWebRtcTransport(transportOptions);
adapter (client-side):
import adapter from 'webrtc-adapter';
const pc = new RTCPeerConnection();
pc.addTrack(track, stream);
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
Summary
mediasoup is a powerful server-side WebRTC solution for building scalable, multi-party applications with advanced features. adapter, on the other hand, is a client-side library that provides a consistent API across different browsers for basic WebRTC functionality. Choose mediasoup for complex, server-controlled WebRTC applications, and adapter for simpler peer-to-peer scenarios or when browser compatibility is the primary concern.
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 adapter
adapter.js is a shim to insulate apps from spec changes and prefix differences in WebRTC. The prefix differences are mostly gone these days but differences in behaviour between browsers remain.
This repository used to be part of the WebRTC organisation on github but moved. We aim to keep the old repository updated with new releases.
Install
NPM
npm install webrtc-adapter
Bower
bower install webrtc-adapter
Usage
Javascript
Just import adapter:
import adapter from 'webrtc-adapter';
No further action is required. You might want to use adapters browser detection which detects which webrtc quirks are required. You can look at
adapter.browserDetails.browser
for webrtc engine detection (which will for example detect Opera or the Chromium based Edge as 'chrome') and
adapter.browserDetails.version
for the version according to the user-agent string.
NPM
Copy to desired location in your src tree or use a minify/vulcanize tool (node_modules is usually not published with the code). See webrtc/samples repo as an example on how you can do this.
Prebuilt releases
Web
In the gh-pages branch prebuilt ready to use files can be downloaded/linked directly. Latest version can be found at https://webrtc.github.io/adapter/adapter-latest.js. Specific versions can be found at https://webrtc.github.io/adapter/adapter-N.N.N.js, e.g. https://webrtc.github.io/adapter/adapter-1.0.2.js.
Bower
You will find adapter.js
in bower_components/webrtc-adapter/
.
NPM
In node_modules/webrtc-adapter/out/ folder you will find 4 files:
adapter.js
- includes all the shims and is visible in the browser under the globaladapter
object (window.adapter).adapter_no_global.js
- same asadapter.js
but is not exposed/visible in the browser (you cannot call/interact with the shims in the browser).
Include the file that suits your need in your project.
Development
Head over to test/README.md and get started developing.
Publish a new version
- Go to the adapter repository root directory
- Make sure your repository is clean, i.e. no untracked files etc. Also check that you are on the master branch and have pulled the latest changes.
- Depending on the impact of the release, either use
patch
,minor
ormajor
in place of<version>
. Runnpm version <version> -m 'bump to %s'
and type in your password lots of times (setting up credential caching is probably a good idea). - Create and merge the PR if green in the GitHub web ui
- Go to the releases tab in the GitHub web ui and edit the tag.
- Add a summary of the recent commits in the tag summary and a link to the diff between the previous and current version in the description, example.
- Go back to your checkout and run
git pull
- Run
npm publish
(you need access to the webrtc-adapter npmjs package). For big changes, consider using a tag version such asnext
and then change the dist-tag after testing. - Done! There should now be a new release published to NPM and the gh-pages branch.
Note: Currently only tested on Linux, not sure about Mac but will definitely not work on Windows.
Publish a hotfix patch versions
In some cases it may be necessary to do a patch version while there are significant changes changes on the master branch. To make a patch release,
- checkout the latest git tag using
git checkout tags/vMajor.minor.patch
. - checkout a new branch, using a name such as patchrelease-major-minor-patch.
- cherry-pick the fixes using
git cherry-pick some-commit-hash
. - run
npm version patch
. This will create a new patch version and publish it on github. - check out
origin/bumpVersion
branch and publish the new version usingnpm publish
. - the branch can now safely be deleted. It is not necessary to merge it into the main branch since it only contains cherry-picked commits.
Top Related Projects
A low-level JS video API that allows adding a completely custom video experience to web apps.
WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
📡 Simple WebRTC video, voice, and data channels
Simple peer-to-peer with WebRTC.
node-webrtc is a Node.js Native Addon that provides bindings to WebRTC M87
Cutting Edge WebRTC Video Conferencing
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