From 3544e3ec3848188b7fb1c40ca80c3d4d7ad92ecf Mon Sep 17 00:00:00 2001 From: BlankSourceCode Date: Wed, 7 Feb 2024 13:36:01 -0800 Subject: [PATCH 1/3] Add new host bind parameters --- src/server.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/server.js b/src/server.js index 8773d16..450d7c8 100644 --- a/src/server.js +++ b/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,20 @@ program throw new InvalidArgumentError("Not a number."); } return parsedValue; + }) + .option("-wh, --wssHost ", "specify ip address to bind the websocket server to", (value) => { + return value; + }) + .option("-hh, --httpHost ", "specify ip address to bind the http server to", (value) => { + return value; }); // Parse command line program.parse(process.argv); const opts = program.opts(); const port = opts.port || 8888; +const wssHost = opts.wssHost || "localhost"; +const httpHost = opts.httpHost || "localhost"; // Function to stream the canvas image out to obs const mjpegStreams = []; @@ -40,8 +49,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: wssHost, port: (port + 1) }); wss.on("connection", function (ws) { wsList.push(ws); @@ -101,7 +109,7 @@ app.get("/img", (req, res) => { }); app.use(express.static(__dirname + "/public")); -app.listen(port, () => { +app.listen(port, httpHost, () => { console.log(``); console.log(`---------------------------`); console.log(`Welcome to WebRTC-Telestrator`); @@ -109,8 +117,8 @@ app.listen(port, () => { 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(`1. Add a BrowserSource to http://${httpHost}:${port}/obs.html`); + console.log(`2. Open a local browser to http://${httpHost}:${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(``); -}); \ No newline at end of file +}); From 4fe818d88f41743ed3cc7608e065fbf9ea489e6b Mon Sep 17 00:00:00 2001 From: BlankSourceCode Date: Wed, 7 Feb 2024 16:06:48 -0800 Subject: [PATCH 2/3] Add back deleted line --- src/server.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/server.js b/src/server.js index 450d7c8..e39fa2f 100644 --- a/src/server.js +++ b/src/server.js @@ -49,6 +49,7 @@ function sendMJpeg(msg) { // Create the websocket signaling server const wsList = []; +const wsMessages = []; const wss = new WebSocketServer({ host: wssHost, port: (port + 1) }); wss.on("connection", function (ws) { wsList.push(ws); From 27245b4231449d1fc8ce2d74a936940762bae738 Mon Sep 17 00:00:00 2001 From: BlankSourceCode Date: Wed, 7 Feb 2024 21:24:17 -0800 Subject: [PATCH 3/3] Replace with --bind option --- readme.md | 24 +++++++++++++++++++++--- src/server.js | 36 +++++++++++++++++++++++------------- 2 files changed, 44 insertions(+), 16 deletions(-) diff --git a/readme.md b/readme.md index c5d8e6e..21fb577 100644 --- a/readme.md +++ b/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,9 +29,17 @@ 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 ` 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://:` + 1. Click the `Restart` browser button to apply the change -![Usage Demo](WebRTC-Telestrator.gif) ## Development Setup * Clone this repo @@ -35,4 +47,10 @@ A remote telestrator app using WebRTC. Use a remote device (such as a phone or t * Open '/webrtc-telestrator' in `VS Code` * Press `F5` to start debugging -To anyone brave enough to use this - Good Luck! \ No newline at end of file +To anyone brave enough to use this - Good Luck! + +## + +Want to support me staying awake long enough to add some more features? + +Buy Me A Coffee diff --git a/src/server.js b/src/server.js index e39fa2f..4055502 100644 --- a/src/server.js +++ b/src/server.js @@ -19,10 +19,7 @@ program } return parsedValue; }) - .option("-wh, --wssHost ", "specify ip address to bind the websocket server to", (value) => { - return value; - }) - .option("-hh, --httpHost ", "specify ip address to bind the http server to", (value) => { + .option("-b, --bind ", "specify the ip address on which to bind the server (default: 0.0.0.0)", (value) => { return value; }); @@ -30,8 +27,7 @@ program program.parse(process.argv); const opts = program.opts(); const port = opts.port || 8888; -const wssHost = opts.wssHost || "localhost"; -const httpHost = opts.httpHost || "localhost"; +const bind = opts.bind || undefined; // Function to stream the canvas image out to obs const mjpegStreams = []; @@ -50,7 +46,7 @@ function sendMJpeg(msg) { // Create the websocket signaling server const wsList = []; const wsMessages = []; -const wss = new WebSocketServer({ host: wssHost, port: (port + 1) }); +const wss = new WebSocketServer({ host: bind, port: (port + 1) }); wss.on("connection", function (ws) { wsList.push(ws); @@ -110,16 +106,30 @@ app.get("/img", (req, res) => { }); app.use(express.static(__dirname + "/public")); -app.listen(port, httpHost, () => { +// 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://${httpHost}:${port}/obs.html`); - console.log(`2. Open a local browser to http://${httpHost}:${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(``); + } });