Add new --bind option

readme.md

@@ -2,6 +2,10 @@
 
 A remote telestrator app using WebRTC. Use a remote device (such as a phone or tablet) to draw on your screen while recording/streaming via OBS. Rather than just having a blank 'greenscreen' to draw on, this app streams a specified display so that you can see exactly where you are drawing on your device.
 
+## Example
+
+![Usage Demo](WebRTC-Telestrator.gif)
+
 ## Usage
 1. Launch webrtc-telestrator
     * This will start a small http/websocket server on port 8888 (by default).
@@ -25,14 +29,28 @@ A remote telestrator app using WebRTC. Use a remote device (such as a phone or t
     * Drawing on the canvas will send the data to the server and display it on the OBS browser source which will then be recorded/streamed as normal.
     * Happy drawing!
 
-## Example
+## Notes
+* By default the http server will bind to all available network interfaces (via 0.0.0.0). 
+* You can override this by specifying the `--bind <ip address>` option, but doing so will cause display sharing to stop working (due to a browser security feature preventing sharing over http unless its localhost).
+* As a workaround, you can use the `--unsafely-treat-insecure-origin-as-secure` flag in chromium based browsers to re-enable sharing:
+    1. Open Chrome/Edge
+    1. Navigate to `chrome://flags` or `edge://flags`
+    1. Search for `unsafely-treat-insecure-origin-as-secure`
+    1. Enable the flag via the dropdown
+    1. In the textbox enter the full url for webrtc-telestrator `http://<ip address>:<port>`
+    1. Click the `Restart` browser button to apply the change
 
-![Usage Demo](WebRTC-Telestrator.gif)
 
 ## Development Setup
 * Clone this repo
 * Run `npm install` in '/webrtc-telestrator'
 * Open '/webrtc-telestrator' in `VS Code`
 * Press `F5` to start debugging
 
-To anyone brave enough to use this - Good Luck!
+To anyone brave enough to use this - Good Luck!
+
+##
+
+Want to support me staying awake long enough to add some more features?
+
+<a href="https://www.buymeacoffee.com/blanksourcecode" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

src/server.js

@@ -1,5 +1,6 @@
 const os = require("os");
 const express = require("express");
+const http = require("http");
 const WebSocketServer = require("ws").Server;
 const { program, InvalidArgumentError } = require("commander");
 const { dataUriToBuffer } = require("data-uri-to-buffer");
@@ -17,12 +18,16 @@ program
             throw new InvalidArgumentError("Not a number.");
         }
         return parsedValue;
+    })
+    .option("-b, --bind <ip address>", "specify the ip address on which to bind the server (default: 0.0.0.0)", (value) => {
+        return value;
     });
 
 // Parse command line
 program.parse(process.argv);
 const opts = program.opts();
 const port = opts.port || 8888;
+const bind = opts.bind || undefined;
 
 // Function to stream the canvas image out to obs
 const mjpegStreams = [];
@@ -41,7 +46,7 @@ function sendMJpeg(msg) {
 // Create the websocket signaling server
 const wsList = [];
 const wsMessages = [];
-const wss = new WebSocketServer({ port: (port + 1) });
+const wss = new WebSocketServer({ host: bind, port: (port + 1) });
 wss.on("connection", function (ws) {
     wsList.push(ws);
 
@@ -101,16 +106,30 @@ app.get("/img", (req, res) => {
 });
 app.use(express.static(__dirname + "/public"));
 
-app.listen(port, () => {
+// Get the addresses needed by the user
+let localAddress = "localhost";
+let remoteAddress = os.hostname();
+
+if (bind && bind !== "0.0.0.0") {
+    localAddress = remoteAddress = bind;
+}
+
+app.listen(port, bind, () => {
     console.log(``);
-    console.log(`---------------------------`);
+    console.log(`-----------------------------`);
     console.log(`Welcome to WebRTC-Telestrator`);
-    console.log(`---------------------------`);
+    console.log(`-----------------------------`);
     console.log(`Http server is running on port ${port}`);
     console.log(`WebSocket server is running on port ${parseInt(port) + 1}`);
     console.log(``);
-    console.log(`1. Add a BrowserSource to http://localhost:${port}/obs.html`);
-    console.log(`2. Open a local browser to http://localhost:${port} and click "Host" to select a sharing window`);
-    console.log(`3. Open a remote browser to http://${os.hostname()}:${port} and click "Join" to begin telestrating`);
+    console.log(`1. Add a BrowserSource to http://${localAddress}:${port}/obs.html`);
+    console.log(`2. Open a local browser to http://${localAddress}:${port} and click "Host" to select a sharing window`);
+    console.log(`3. Open a remote browser to http://${remoteAddress}:${port} and click "Join" to begin telestrating`);
     console.log(``);
-});
+    if (localAddress !== "localhost" && localAddress !== "127.0.0.1" && localAddress !== "0.0.0.0") {
+        console.log(`Custom host binding set to ${localAddress}`);
+        console.log(`To enable display sharing over http on the local browser: `);
+        console.log(`Use --unsafely-treat-insecure-origin-as-secure="http://${localAddress}:${port}" (see github readme)`);
+        console.log(``);
+    }
+});