Runtime Error on Local Network

[Dogway]

I tested over LAN from Laptop to my Desktop, and also checked with WAN from Laptop to the SmartPhone. Both had the same error.

• In OBS I set the server as http://localhost:8080/api/whip
• Stream Key as StreamTest and start streaming
• In a browser on the network's guest PC I access broadcast box through the IP given by "npm start", like: http://192.168.60.114:3000 (using http://localhost:3000 works fine to watch myself on the same PC/laptop)

It actually shows broadcast box panel but when I input the key and click Watch, this is the error I get in both cases (LAN and WAN)

[Sean-Der]

@Dogway Can you open the network tab in your browser? What URL is failing to fetch exactly?

thanks!

[Dogway]

Yes, I can open the broadcast box page (blue background) over the local network, when I type the stream key and click "enter" the above error appears.

I hope I'm doing fine in my steps. Will try again tomorrow with your latest eslint changes.

[Sean-Der]

Can you share the URL that is attempted? If you open the network tab in your browser you should see the failed request.

I think your browser is failing to connect with the WHIP/WHEP server?

[Dogway]

I installed the latest version of broadcast-box today. Upon npm install I get these errors, in case they matter. I didn't run npm audit just in case.

PS D:\Portable Apps\broadcast-box\web> npm install
npm WARN deprecated @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm WARN deprecated @babel/plugin-proposal-private-methods@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated @babel/plugin-proposal-private-property-in-object@7.21.11: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.
npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm WARN deprecated domexception@2.0.1: Use your platform's native DOMException instead
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated workbox-cacheable-response@6.6.0: workbox-background-sync@6.6.0
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

added 1483 packages, and audited 1484 packages in 2m

243 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

On OBS I set the server as http://localhost:8080/api/whip with a random stream key and start streaming (after run go. and npm start)

Over the guest PC I open Chrome and go to http://192.168.1.42:3000 and I get the aforementioned error.
Here are the HAR files for the 2 whep errors on the network tab.
HAR_files.zip

I'm using Chrome 109 on my tests because that's the last version supported on Win7. For the classroom all will be Windows10.

[ChaseCares]

Hello! Thanks for letting us know about the npm errors, they should be unrelated to your issue.

Will you try to run the production build (steps here), then try to access broadcast box from http://192.168.1.42:8080/ and let me know if you have the same error?

[Dogway]

I followed the steps and didn't show anything. In this case no error, just the video with the loading icon on loop.

Upon npm run build it won't show to what address it is communicating but I guess it's the same as above? (192.168.1.42), then tried on port 8080.

On OBS I tried with two servers, http://localhost:8080/api/whip and http://192.168.1.42:8080/api/whip without success.

[ChaseCares]

@Dogway I'm sorry you are still having issues, I haven't forgotten about you though! I a set up a windows vm and installed Broadcast Box, and did some testing, I wasn't able to reproduce your issue, although I didn't try it with windows 7. I did notice upon first run of Go, it asks to open some ports on the firewall, did you get this prompt?

I helped out another person that had a similar issue, and we were able to resolve it by starting from scratch and building the production build. I'm a little confused in this case because in some of the screenshots you provided you are able to access the frontend from some machines, but it the logs it references localhost.

If you don't mind starting from scratch, using the following instructions. You don't have to delete any of the changes you made while testing, just make sure to back them up.

From the command line, on the machine you want to host broadcast box run:

git clone git@github.com:Glimesh/broadcast-box.git
cd broadcast-box/web
npm install
npm run build
cd ../
APP_ENV=production go run .

I'm not exactly sure that this will set the variable correctly, you may need to use setx APP_ENV "production", if you have any doubt you could wait until #78 lands or rename .env.production to .env.development.

It's important we used the correct file. You should see: Loading .env.productionin the logs after runinggo run .OrLoading .env.development if you chose to rename the file.

Now in OBS use http://<HOST_PC_IP>:8080/api/whip, then navigate tohttp://<HOST_PC_IP>:8080/<YOUR_STREAM_KEY>

Utilizing these URLs we won't use localhost, always use the machines IP, and we won't use port 3000 always 8080.

If this still doesn't work, maybe you could join the Discord so we can do some troubleshooting in real time or I'm happy to continue helping you here. Let me know how it goes!

[Dogway]

Ok, I will test this weekend.
In the class all the PCs are Win10 and still showed the same issue that happens at home with Win7, the error from the screenshot above.

Hopefully I'll make it work as TeamViewer is a pain, it requires the student to have a TeamV account plus a Google account.

[Sean-Der]

@Dogway i would love to help you set it up live if you get stuck. Join the discord and we can hop on video!