From 74b88c2e7dd24f468fec94082e08f190d163a8c5 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Fri, 24 Feb 2023 16:53:13 +0100 Subject: [PATCH 1/7] fix dialog heights --- public/styles.css | 3 +++ public_included_ws_fallback/styles.css | 3 +++ 2 files changed, 6 insertions(+) diff --git a/public/styles.css b/public/styles.css index 0b089bf..aa08cbc 100644 --- a/public/styles.css +++ b/public/styles.css @@ -423,6 +423,9 @@ x-dialog x-paper { box-sizing: border-box; transition: transform 300ms; will-change: transform; +} + +#pairDeviceDialog x-paper { position: absolute; top: max(50%, 350px); height: 650px; diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css index c415cdd..ab61629 100644 --- a/public_included_ws_fallback/styles.css +++ b/public_included_ws_fallback/styles.css @@ -432,6 +432,9 @@ x-dialog x-paper { box-sizing: border-box; transition: transform 300ms; will-change: transform; +} + +#pairDeviceDialog x-paper { position: absolute; top: max(50%, 350px); height: 650px; From 66359da2cac78de868a17a90942f117dd8cdaac1 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Fri, 24 Feb 2023 18:08:48 +0100 Subject: [PATCH 2/7] get rtcConfig dynamically from the server --- docs/host-your-own.md | 86 ++++++++++++++++--- index.js | 25 ++++++ public/scripts/network.js | 26 ++---- .../scripts/network.js | 26 ++---- rtc_config_example.json | 16 ++++ 5 files changed, 130 insertions(+), 49 deletions(-) create mode 100644 rtc_config_example.json diff --git a/docs/host-your-own.md b/docs/host-your-own.md index e2cf6fe..2448a5a 100644 --- a/docs/host-your-own.md +++ b/docs/host-your-own.md @@ -14,7 +14,7 @@ docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 ls Set options by using the following flags in the `docker run` command: #### Port -``` +```bash -p 127.0.0.1:8080:3000 ``` > Specify the port used by the docker image @@ -27,7 +27,7 @@ Set options by using the following flags in the `docker run` command: > Limits clients to 100 requests per 5 min #### Websocket Fallback (for VPN) -``` +```bash -e WS_FALLBACK=true ``` > Provides PairDrop to clients with an included websocket fallback if the peer to peer WebRTC connection is not available to the client. @@ -39,6 +39,34 @@ Set options by using the following flags in the `docker run` command: > Beware that the traffic routed via this fallback is readable by the server. Only ever use this on instances you can trust. > Additionally, beware that all traffic using this fallback debits the servers data plan. +#### Specify STUN/TURN Servers +```bash +-e RTC_CONFIG="rtc_config.json" +``` + +> Specify the STUN/TURN servers PairDrop clients use by setting `RTC_CONFIG` to a JSON file including the configuration. +> You can use `pairdrop/rtc_config_example.json` as a starting point. +> +> Default configuration: +> ```json +> { +> "sdpSemantics": "unified-plan", +> "iceServers": [ +> { +> "urls": "stun:stun.l.google.com:19302" +> }, +> { +> "urls": "stun:openrelay.metered.ca:80" +> }, +> { +> "urls": "turn:openrelay.metered.ca:443", +> "username": "openrelayproject", +> "credential": "openrelayproject" +> } +> ] +> } +> ``` +
## Deployment with Docker with self-built image @@ -100,6 +128,38 @@ $env:PORT=3010; npm start ``` > Specify the port PairDrop is running on. (Default: 3000) +#### Specify STUN/TURN Server +On Unix based systems +```bash +RTC_CONFIG="rtc_config.json" npm start +``` +On Windows +```bash +$env:RTC_CONFIG="rtc_config.json"; npm start +``` +> Specify the STUN/TURN servers PairDrop clients use by setting `RTC_CONFIG` to a JSON file including the configuration. +> You can use `pairdrop/rtc_config_example.json` as a starting point. +> +> Default configuration: +> ```json +> { +> "sdpSemantics": "unified-plan", +> "iceServers": [ +> { +> "urls": "stun:stun.l.google.com:19302" +> }, +> { +> "urls": "stun:openrelay.metered.ca:80" +> }, +> { +> "urls": "turn:openrelay.metered.ca:443", +> "username": "openrelayproject", +> "credential": "openrelayproject" +> } +> ] +> } +> ``` + ### Options / Flags #### Local Run ```bash @@ -158,7 +218,7 @@ When running PairDrop, the `X-Forwarded-For` header has to be set by a proxy. Ot ### Using nginx #### Allow http and https requests -``` +```nginx configuration server { listen 80; @@ -191,7 +251,7 @@ server { ``` #### Automatic http to https redirect: -``` +```nginx configuration server { listen 80; @@ -221,13 +281,13 @@ server { ### Using Apache install modules `proxy`, `proxy_http`, `mod_proxy_wstunnel` -```shell +```bash a2enmod proxy ``` -```shell +```bash a2enmod proxy_http ``` -```shell +```bash a2enmod proxy_wstunnel ``` @@ -237,7 +297,7 @@ Create a new configuration file under `/etc/apache2/sites-available` (on debian) **pairdrop.conf** #### Allow http and https requests -``` +```apacheconf ProxyPass / http://127.0.0.1:3000/ RewriteEngine on @@ -254,7 +314,7 @@ Create a new configuration file under `/etc/apache2/sites-available` (on debian) ``` #### Automatic http to https redirect: -``` +```apacheconf Redirect permanent / https://127.0.0.1:3000/ @@ -267,10 +327,10 @@ Create a new configuration file under `/etc/apache2/sites-available` (on debian) ``` Activate the new virtual host and reload apache: -```shell +```bash a2ensite pairdrop ``` -```shell +```bash service apache2 reload ``` @@ -281,7 +341,7 @@ All files needed for developing are available on the branch `dev`. First, [Install docker with docker-compose.](https://docs.docker.com/compose/install/) Then, clone the repository and run docker-compose: -```shell +```bash git clone https://github.com/schlagmichdoch/PairDrop.git cd PairDrop @@ -306,7 +366,7 @@ The nginx container creates a CA certificate and a website certificate for you. If you want to test PWA features, you need to trust the CA of the certificate for your local deployment. For your convenience, you can download the crt file from `http://:8080/ca.crt`. Install that certificate to the trust store of your operating system. - On Windows, make sure to install it to the `Trusted Root Certification Authorities` store. -- On MacOS, double click the installed CA certificate in `Keychain Access`, expand `Trust`, and select `Always Trust` for SSL. +- On macOS, double-click the installed CA certificate in `Keychain Access`, expand `Trust`, and select `Always Trust` for SSL. - Firefox uses its own trust store. To install the CA, point Firefox at `http://:8080/ca.crt`. When prompted, select `Trust this CA to identify websites` and click OK. - When using Chrome, you need to restart Chrome so it reloads the trust store (`chrome://restart`). Additionally, after installing a new cert, you need to clear the Storage (DevTools -> Application -> Clear storage -> Clear site data). diff --git a/index.js b/index.js index 31fbca9..eb380ea 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,7 @@ const process = require('process') const crypto = require('crypto') const {spawn} = require('child_process') +const fs = require('fs'); // Handle SIGINT process.on('SIGINT', () => { @@ -49,6 +50,25 @@ if (process.argv.includes('--auto-restart')) { ); } +const rtcConfig = process.env.RTC_CONFIG + ? fs.readFileSync(process.env.RTC_CONFIG, 'utf8') + : { + "sdpSemantics": "unified-plan", + "iceServers": [ + { + "urls": "stun:stun.l.google.com:19302" + }, + { + "urls": "stun:openrelay.metered.ca:80" + }, + { + "urls": "turn:openrelay.metered.ca:443", + "username": "openrelayproject", + "credential": "openrelayproject" + } + ] + }; + const express = require('express'); const RateLimit = require('express-rate-limit'); const http = require('http'); @@ -110,6 +130,11 @@ class PairDropServer { } _onConnection(peer) { + this._send(peer, { + type: 'rtc-config', + config: rtcConfig + }); + this._joinRoom(peer); peer.socket.on('message', message => this._onMessage(peer, message)); peer.socket.onerror = e => console.error(e); diff --git a/public/scripts/network.js b/public/scripts/network.js index be1389f..a65e95c 100644 --- a/public/scripts/network.js +++ b/public/scripts/network.js @@ -58,10 +58,17 @@ class ServerConnection { this.send({ type: 'pair-device-join', roomKey: roomKey }) } + _setRtcConfig(config) { + window.rtcConfig = config; + } + _onMessage(msg) { msg = JSON.parse(msg); if (msg.type !== 'ping') console.log('WS:', msg); switch (msg.type) { + case 'rtc-config': + this._setRtcConfig(msg.config); + break; case 'peers': Events.fire('peers', msg); break; @@ -509,7 +516,7 @@ class RTCPeer extends Peer { _openConnection(peerId, isCaller) { this._isCaller = isCaller; this._peerId = peerId; - this._conn = new RTCPeerConnection(RTCPeer.config); + this._conn = new RTCPeerConnection(window.rtcConfig); this._conn.onicecandidate = e => this._onIceCandidate(e); this._conn.onconnectionstatechange = _ => this._onConnectionStateChange(); this._conn.oniceconnectionstatechange = e => this._onIceConnectionStateChange(e); @@ -852,20 +859,3 @@ class Events { return window.removeEventListener(type, callback, false); } } - -RTCPeer.config = { - 'sdpSemantics': 'unified-plan', - 'iceServers': [ - { - urls: 'stun:stun.l.google.com:19302' - }, - { - urls: 'stun:openrelay.metered.ca:80' - }, - { - urls: 'turn:openrelay.metered.ca:443', - username: 'openrelayproject', - credential: 'openrelayproject', - }, - ] -} diff --git a/public_included_ws_fallback/scripts/network.js b/public_included_ws_fallback/scripts/network.js index f739465..8c39017 100644 --- a/public_included_ws_fallback/scripts/network.js +++ b/public_included_ws_fallback/scripts/network.js @@ -56,10 +56,17 @@ class ServerConnection { this.send({ type: 'pair-device-join', roomKey: roomKey }) } + _setRtcConfig(config) { + window.rtcConfig = config; + } + _onMessage(msg) { msg = JSON.parse(msg); if (msg.type !== 'ping') console.log('WS:', msg); switch (msg.type) { + case 'rtc-config': + this._setRtcConfig(msg.config); + break; case 'peers': Events.fire('peers', msg); break; @@ -519,7 +526,7 @@ class RTCPeer extends Peer { _openConnection(peerId, isCaller) { this._isCaller = isCaller; this._peerId = peerId; - this._conn = new RTCPeerConnection(RTCPeer.config); + this._conn = new RTCPeerConnection(window.rtcConfig); this._conn.onicecandidate = e => this._onIceCandidate(e); this._conn.onconnectionstatechange = _ => this._onConnectionStateChange(); this._conn.oniceconnectionstatechange = e => this._onIceConnectionStateChange(e); @@ -919,20 +926,3 @@ class Events { return window.removeEventListener(type, callback, false); } } - -RTCPeer.config = { - 'sdpSemantics': 'unified-plan', - 'iceServers': [ - { - urls: 'stun:stun.l.google.com:19302' - }, - { - urls: 'stun:openrelay.metered.ca:80' - }, - { - urls: 'turn:openrelay.metered.ca:443', - username: 'openrelayproject', - credential: 'openrelayproject', - }, - ] -} diff --git a/rtc_config_example.json b/rtc_config_example.json new file mode 100644 index 0000000..f78905d --- /dev/null +++ b/rtc_config_example.json @@ -0,0 +1,16 @@ +{ + "sdpSemantics": "unified-plan", + "iceServers": [ + { + "urls": "stun:stun.l.google.com:19302" + }, + { + "urls": "stun:openrelay.metered.ca:80" + }, + { + "urls": "turn:openrelay.metered.ca:443", + "username": "openrelayproject", + "credential": "openrelayproject" + } + ] +} From 8bcaa3f60f0a3a3791bf89f219129f0b572d3c83 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Fri, 3 Mar 2023 18:28:49 +0100 Subject: [PATCH 3/7] Fix header hierarchy for dynamic stun/turn in docs --- docs/host-your-own.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/host-your-own.md b/docs/host-your-own.md index 31d3c5b..6209895 100644 --- a/docs/host-your-own.md +++ b/docs/host-your-own.md @@ -42,7 +42,7 @@ Set options by using the following flags in the `docker run` command: > Beware that the traffic routed via this fallback is readable by the server. Only ever use this on instances you can trust. > Additionally, beware that all traffic using this fallback debits the servers data plan. -#### Specify STUN/TURN Servers +##### Specify STUN/TURN Servers ```bash -e RTC_CONFIG="rtc_config.json" ``` From e7ab5e26cc3a1b5b5166243f9e53c4c4fa7c2f0d Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Fri, 3 Mar 2023 19:01:32 +0100 Subject: [PATCH 4/7] Add dynamic stun/turn config as new feature to README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9d2930f..111e4f0 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,7 @@ Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop) * Automatic restart on error (Thanks [@KaKi87](https://github.com/KaKi87)) * Lots of stability fixes (Thanks [@MWY001](https://github.com/MWY001) [@skiby7](https://github.com/skiby7) and [@willstott101](https://github.com/willstott101)) * To host PairDrop on your local network (e.g. on Raspberry Pi): [All peers connected with private IPs are discoverable by each other](https://github.com/RobinLinus/snapdrop/pull/558) +* When hosting PairDrop yourself you can [set your own STUN/TURN servers](/docs/host-your-own.md#specify-stunturn-servers) ## Screenshots
From 8b2eb67266dddb99e1a2673915de230f2c755138 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Fri, 3 Mar 2023 19:37:07 +0100 Subject: [PATCH 5/7] fix position of close btn on about page --- public/index.html | 14 +++++++------- public/styles.css | 7 +++++++ public_included_ws_fallback/styles.css | 7 +++++++ 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/public/index.html b/public/index.html index 4171562..3a4dff2 100644 --- a/public/index.html +++ b/public/index.html @@ -242,14 +242,14 @@
+
+ + + + + +
-
- - - - - -
diff --git a/public/styles.css b/public/styles.css index c88d9d5..f998e83 100644 --- a/public/styles.css +++ b/public/styles.css @@ -939,6 +939,13 @@ button::-moz-focus-inner { margin: 8px 8px -16px; } +#about section { + flex-grow: 1; +} + +#about header { + align-self: end; +} /* Loading Indicator */ diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css index 0026356..e9eda38 100644 --- a/public_included_ws_fallback/styles.css +++ b/public_included_ws_fallback/styles.css @@ -965,6 +965,13 @@ button::-moz-focus-inner { margin: 8px 8px -16px; } +#about section { + flex-grow: 1; +} + +#about header { + align-self: end; +} /* Loading Indicator */ From 67a1b04da2b7c677b8e193ccb37829a39d1536d5 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Fri, 3 Mar 2023 19:45:04 +0100 Subject: [PATCH 6/7] increase version to v1.3.0 --- package-lock.json | 4 ++-- package.json | 2 +- public/service-worker.js | 2 +- public_included_ws_fallback/service-worker.js | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index c5060cc..ff74f69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "pairdrop", - "version": "1.2.2", + "version": "1.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "pairdrop", - "version": "1.2.2", + "version": "1.3.0", "license": "ISC", "dependencies": { "express": "^4.18.2", diff --git a/package.json b/package.json index d2baecf..32b1307 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pairdrop", - "version": "1.2.2", + "version": "1.3.0", "description": "", "main": "index.js", "scripts": { diff --git a/public/service-worker.js b/public/service-worker.js index b76115f..dd35230 100644 --- a/public/service-worker.js +++ b/public/service-worker.js @@ -1,4 +1,4 @@ -const cacheVersion = 'v1.2.2'; +const cacheVersion = 'v1.3.0'; const cacheTitle = `pairdrop-cache-${cacheVersion}`; const urlsToCache = [ 'index.html', diff --git a/public_included_ws_fallback/service-worker.js b/public_included_ws_fallback/service-worker.js index c384efd..f45869c 100644 --- a/public_included_ws_fallback/service-worker.js +++ b/public_included_ws_fallback/service-worker.js @@ -1,4 +1,4 @@ -const cacheVersion = 'v1.2.2'; +const cacheVersion = 'v1.3.0'; const cacheTitle = `pairdrop-included-ws-fallback-cache-${cacheVersion}`; const urlsToCache = [ 'index.html', From 77b76a3b8dac42720ba11e0cc0d42bb3d50267b4 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Sat, 4 Mar 2023 15:46:26 +0100 Subject: [PATCH 7/7] reduce reconnect timers to 1s --- public/scripts/network.js | 4 ++-- public_included_ws_fallback/scripts/network.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/public/scripts/network.js b/public/scripts/network.js index 75fb9b0..2bf52c8 100644 --- a/public/scripts/network.js +++ b/public/scripts/network.js @@ -53,7 +53,7 @@ class ServerConnection { _onPairDeviceJoin(roomKey) { if (!this._isConnected()) { - setTimeout(_ => this._onPairDeviceJoin(roomKey), 5000); + setTimeout(_ => this._onPairDeviceJoin(roomKey), 1000); return; } this.send({ type: 'pair-device-join', roomKey: roomKey }) @@ -161,7 +161,7 @@ class ServerConnection { console.log('WS: server disconnected'); Events.fire('notify-user', 'Connecting..'); clearTimeout(this._reconnectTimer); - this._reconnectTimer = setTimeout(_ => this._connect(), 5000); + this._reconnectTimer = setTimeout(_ => this._connect(), 1000); Events.fire('ws-disconnected'); this._isReconnect = true; } diff --git a/public_included_ws_fallback/scripts/network.js b/public_included_ws_fallback/scripts/network.js index 392c53f..6f40723 100644 --- a/public_included_ws_fallback/scripts/network.js +++ b/public_included_ws_fallback/scripts/network.js @@ -51,7 +51,7 @@ class ServerConnection { _onPairDeviceJoin(roomKey) { if (!this._isConnected()) { - setTimeout(_ => this._onPairDeviceJoin(roomKey), 5000); + setTimeout(_ => this._onPairDeviceJoin(roomKey), 1000); return; } this.send({ type: 'pair-device-join', roomKey: roomKey }) @@ -171,7 +171,7 @@ class ServerConnection { console.log('WS: server disconnected'); Events.fire('notify-user', 'Connecting..'); clearTimeout(this._reconnectTimer); - this._reconnectTimer = setTimeout(_ => this._connect(), 5000); + this._reconnectTimer = setTimeout(_ => this._connect(), 1000); Events.fire('ws-disconnected'); this._isReconnect = true; }