Skip to content
An example of how you could use WebRTC on the web, based on the PeerJS library
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
src
.editorconfig
.gitignore
.prettierignore
.prettierrc
.travis.yml
NOTES.md
README.md
babel.config.js
jest.babel.config.js
jest.esm.config.js
karma.config.js
package.json
yarn.lock

README.md

webrtc-experiments

Build Status Demo

The goal of this project is to expose an example of WebRTC, using the PeerJS library, that goes beyond the usual exercises but still keeping it clear.

Go to the demo, snap the QR code, you'll update the counter in real-time (thanks to WebRTC).

This was developed without any bundler/transpiler (no Webpack/Babel), nor Framework (based on web component and a light implementation of redux), there are still unit tests - VanillaJS FTW 🤟

Install

git clone https://github.com/topheman/webrtc-experiments.git
cd webrtc-experiments
yarn

Run

npm start

Test

npm test

Will launch:

  • npm run test:unit:babel: any src/**/*.(spec|test).js file run with babel-jest (can't make esm work with jest, so I'm transpiling for the tests)
  • npm run test:wc: any src/**/*.spec.browser.js file with karma/jasmine (to test WebComponents, we need a real browser - not just jsdom which isn't there yet with the reimplementation of the WebComponents spec)

All unit tests could be refactored into only using karma and dropping jest in the future.

https

WebRTC only works on secure origins (localhost is considered secure). The app will work in development if you test it on the same laptop, on multiple tabs.

However, if you try to access the app from your local ip (like 192.168.1.1) from your laptop and your mobile, it won't work, since the domain will be recognized as unsecure.

So to test on multiple devices, you'll need to tunnel the app with a utility like localtunnel.me.

I made an npm task that launches both the development server AND a localtunnel:

npm run dev

The public https temporary address will be outputted on your terminal (keep in mind you won't access your website through your local network but through the internet, which can take longer - use that only to test WebRTC on mobile devices).

PeerJS

PeerJS is a wrapper around the WebRTC browser's APIs. It provides a signaling server for free (which means you don't have to setup any backend server).

Thanks to PeerJS, you don't have to bother directly about:

  • the signaling server - you already have one for free which relies on websocket
  • issue and exchange offers and answers (SDP session description)
  • exchange ICE candidates through the signaling server

ICE stands for Interactive Connectivity Establishment , its a techniques used in NAT( network address translator ) for establishing communication for VOIP, peer-peer, instant-messaging, and other kind of interactive media. Typically ice candidate provides the information about the ipaddress and port from where the data is going to be exchanged.

Notes

Resources

You can’t perform that action at this time.