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 🤟
git clone https://github.com/topheman/webrtc-experiments.git cd webrtc-experiments yarn
npm run test:unit:babel: any
src/**/*.(spec|test).jsfile 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.jsfile 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.
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 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.