Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/topheman/webrtc-experiments
An example of how you could use WebRTC on the web, based on the PeerJS library
https://github.com/topheman/webrtc-experiments
Last synced: 26 days ago
JSON representation
An example of how you could use WebRTC on the web, based on the PeerJS library
- Host: GitHub
- URL: https://github.com/topheman/webrtc-experiments
- Owner: topheman
- Created: 2019-07-13T16:54:57.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T06:10:46.000Z (almost 2 years ago)
- Last Synced: 2024-08-29T18:34:37.581Z (4 months ago)
- Language: JavaScript
- Homepage: https://topheman.github.io/webrtc-experiments/
- Size: 1.64 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# webrtc-experiments
[](https://travis-ci.org/topheman/webrtc-experiments)
[](https://topheman.github.io/webrtc-experiments/)
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
```shell
git clone https://github.com/topheman/webrtc-experiments.git
cd webrtc-experiments
yarn
```
## Run
```shell
npm start
```
## Test
```shell
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](NOTES.md), 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 [localhost.run](https://localhost.run/) that will open an ssh tunnel and forward traffic on https. Please run the following one time:
```shell
npm run forward
```
I made an npm task that launches both the development server AND exposes the app in on a public, temporary domain, on https:
```shell
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](https://peerjs.com/) 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
- [Read about Jest setup (problems encountered because not using any transpiler)](NOTES.md)
## Resources
- https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
- https://peerjs.com
- https://peerjs.com/docs.html
- https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/
- https://www.grafikart.fr/tutoriels/webrtc-864