WiFi streaming not working due to webserver not starting

sigmaxipi commented 2 years ago

I just got the app today and can record videos. However, the WiFi streaming isn't working.

Running WiFi streaming shows me the phone's IP and mDNS. I start streaming and I see "Started, Waiting for Connection". However, I can't access the phone's webserver from my desktop's browser nor my Android phone's browser. And nmap doesn't show any open ports on the iPhone. Using http://record3d.xyz/ fails with 10.0.0.54/getOffer:1 Failed to load resource: net::ERR_CONNECTION_TIMED_OUT SignalingClient.js:12 Error while requesting an offer.

Is there any way to verify that the app is starting the webserver or debug this further?

Record3D v1.8.1 iOS 16.0.2 iPhone 12 Pro Chrome 106.0.5249.119 on Windows 11

marek-simonik commented 2 years ago

I have just tried it and the demo hosted on http://record3d.xyz does work for me when I open the website in Safari instead of in Chrome. The reason why is does not work in Chrome by default is its CORS policy. There are several options how to run the demo:

Option 1: Use Safari

Instead of opening http://record3d.xyz in Chrome/Chromium/Brave or Firefox, open it in Safari (either on deskop or on your secondary iPhone/iPad). The demo should run straight away.

Option 2: Run the demo on an server in your local network

You can choose between 2 different ways how achieve this:

When you press the red toggle button in Record3D and see the "Started, Waiting for Connection" message, Record3D runs a web server on your iPhone. If you open your iPhone's IP address or mDNS address (<your-iphones-hostname>.local) in a web browser, you will see that the two Wi-Fi streaming demos (i.e. this repo and the other one) are hosted on your iPhone. If you access the demos hosted on your iPhone (instead of going to http://record3d.xyz), the demos should work as expected. Test the simple demo first.
You can clone this repo or the other one and host it locally on your computer by running a HTTP server on localhost (e.g. a quick way to do this would be to run Python's built-in web server: python3 -m http.server in the folder of the cloned demo). If you open the localhost-hosted demo instead of http://record3d.xyz, the demos should work.

Option 3: If you need to run the demo in Chrome

Since the time when Record3D introduced Wi-Fi streaming, Chrome did undergo several breaking changes related to CORS policy (the demo did originally work as well as it does in Safari now). The reason why it does not work by default in Chrome anymore is due to Chrome's strict CORS policy. You can make it work in Chrome/Chromium/Brave, but you will have to circumvent Chrome's security measures. Check this SO answer.

The following is what I did to make the http://record3d.xyz demo run in Brave on Ubuntu (should work with Chrome and Chromium too):

Run a new instance of Chrome/Chromium/Brave: brave --disable-site-isolation-trials --disable-web-security --user-data-dir="/tmp"
Open http://record3d.xyz
Enter the IP address of your iPhone into the input field and run the demo. Note that entering the mDNS address may not work on Linux, so using IP instead is a safe bet.

sigmaxipi commented 2 years ago

I got it working and it's amazing!

Thanks for the help debugging. It looks like the issue was on my network side. Something with my Comcast router is blocking port 80 and some WebRTC traffic locally. I never used port 80 for any other dev work so I hadn't seen it in the past. I'm not sure what the WebRTC block is but sharedrop.io was also failing on my network.

I switched my iPhone to use a WiFi hotspot from my desktop and then I got a CORS policy failure. Then using Option 3 worked as expected and I was able to stream.

Some suggestions and minor issues:

Can you allow port specification on the server or use 8080 as the default to reduce the risk of a misconfigured consumer router blocking port 80 locally?
Does the webserver you're using on the iPhone app allow you to set Access-Control-Allow-Origin so that Chrome would work without any issues?
If I go to the IP address of the iPhone in my browser as the app suggests, the autofilled IP address of your iPhone/iPad shows my mDNS address even though my hotspot doesn't have a working mDNS setup. Can you have this autofill the same IP as the nav bar?
The app's webserver says "NOTE: Recent browser privacy updates in Google Chrome...". Can you add this to the record3d.xyz website when Chrome is detected?
The app page at http://IP.ad.re.ss/3d-demo returns a bunch of 404s whenever it tries to load other resources. Does the 3d demo work locally?
The app page at http://IP.ad.re.ss/3d-demo doesn't autofill the IP address form. Nor does it work if the IP address has a http://... prefix.

marek-simonik commented 2 years ago

Thanks for confirming it was possible to get the demo running. I think the CORS-related changes in Chrome cannot be bypassed by setting a Access-Control-Allow-Origin header (see below). Let me answer your questions:

Can you allow port specification on the server or use 8080 as the default to reduce the risk of a misconfigured consumer router blocking port 80 locally?

I'll add this to my TODO list.

Does the webserver you're using on the iPhone app allow you to set Access-Control-Allow-Origin so that Chrome would work without any issues?

The webserver running on the iPhone does already set Access-Control-Allow-Origin: * and Allow-Control-Allow-Origin: *, yet Chrome still blocks the requests. You can check that the headers are there this by running the demo in Safari on Windows and opening the Network tab in Web Inspector.

If I go to the IP address of the iPhone in my browser as the app suggests, the autofilled IP address of your iPhone/iPad shows my mDNS address even though my hotspot doesn't have a working mDNS setup. Can you have this autofill the same IP as the nav bar?

The next update of Record3D will autofill the IP address.

The app's webserver says "NOTE: Recent browser privacy updates in Google Chrome...". Can you add this to the record3d.xyz website when Chrome is detected?

Thanks for the suggestion, that's a good idea.

The app page at http://IP.ad.re.ss/3d-demo returns a bunch of 404s whenever it tries to load other resources. Does the 3d demo work locally?

The 3d-demo did work for me when running it locally (i.e. when it is being hosted on the iPhone's HTTP server) as specified in the Option 3. Which resources did return error 404 when you tried to run the demo (the JS scripts and/or CSS)?

The app page at http://IP.ad.re.ss/3d-demo doesn't autofill the IP address form. Nor does it work if the IP address has a http://... prefix.

I'll add this to my TODO list too.

sigmaxipi commented 2 years ago

Does the webserver you're using on the iPhone app allow you to set Access-Control-Allow-Origin so that Chrome would work without any issues?

The webserver running on the iPhone does already set Access-Control-Allow-Origin: * and Allow-Control-Allow-Origin: *, yet Chrome still blocks the requests. You can check that the headers are there this by running the demo in Safari on Windows and opening the Network tab in Web Inspector.

Ah. I guess I'm hitting https://web.dev/cors-rfc1918-feedback/

The app page at http://IP.ad.re.ss/3d-demo returns a bunch of 404s whenever it tries to load other resources. Does the 3d demo work locally?

The 3d-demo did work for me when running it locally (i.e. when it is being hosted on the iPhone's HTTP server) as specified in the Option 3. Which resources did return error 404 when you tried to run the demo (the JS scripts and/or CSS)?

I'm not sure what I did wrong before. But the local version is working now in production Chrome without any issues.

Thanks for the app and the help debugging.

marek-simonik / record3d-simple-wifi-streaming-demo