Expo SDK App: BridgeServer is running but cachedVideoUrl fails

[enfipy]

Describe the bug

Added as documented in docs CacheManagerProvider:

const lfuPolicyRef = useRef(new LFUPolicy(5))

<CacheManagerProvider cachePolicy={lfuPolicyRef.current}>
...

And verified that BridgeServer inside CacheManagerProvider starts listening to the port.

After that, I added the following to the Video component:

const { setVideoPlayUrlBy, cachedVideoUrl } = useAsyncCache()
console.log(`cachedVideoUrl: ${cachedVideoUrl}`)

That actually gives a valid-looking url:

 LOG  cachedVideoUrl: http://127.0.0.1:55144/dev/getFile/o2ek4rbht3h26818s3zf74ug/video.m3u8?__hls_origin_url=http%3A%2F%2F192.168.0.142%3A8787%2Fdev%2FgetFile%2Fo2ek4rbht3h26818s3zf74ug%2Fvideo.m3u8

But the Video component produces this error with function onError:

{"error":{"localizedRecoverySuggestion":"","domain":"NSURLErrorDomain","localizedFailureReason":"","localizedDescription":"Could not connect to the server.","code":-1004},"target":353}

Expected behavior

Work as expected, as it works without caching.

Smartphone (please complete the following information):

• Device: iPhone12
• OS: iOS16.6.1
• Expo SDK Version [e.g. 22]

Additional context

I haven't tested on an example without Expo SDK yet.

Question

Any ideas why this could appear?

[nguyenvanphituoc]

It seems bridge server working. You can try some CDN url

• The reason maybe on your local running server:
  • Because it in private, could you check your device have the same network with you local server, by enter your m3u8 url on your safari phone.
  • If it working, can you check NSAppTransportSecurity in info.plist, does it allow connect to http without ssl
• If this issues still having, can you give me your demo server that I can debug

[enfipy]

@nguyenvanphituoc thanks for the fast reply!

So basically I tried to replace my local server URL with your example CDN URL and it didn't help.

I mean, the Video from CDN URL is working but when I try to pass it through setVideoPlayUrlBy and get cachedVideoUrl - it fails with this TypeError: Network request failed if use fetch, and this if place in Video component: {"error":{"localizedRecoverySuggestion":"","domain":"NSURLErrorDomain","localizedFailureReason":"","localizedDescription":"Could not connect to the server.","code":-1004},"target":353}.

Here are some screenshots I made. The first one - is when I just place CDN URL in the Video component, second - is from my local running server, third and fourth - are in Safari (CDN URL also opens).

I think this might be some problem with GCDWebServer or that it runs with Expo Development Client. But it looks like that bridge server just doesn't accept requests.

Here's the full project with server and app (that can be installed and served by: pnpm i & pnpm dev - but still need to install the build on simulator or phone): link. But if you prefer some Minimal Reproducible Example - I can make it too. Just let me know!

[enfipy]

If it working, can you check NSAppTransportSecurity in info.plist, does it allow connect to http without ssl

Also, regarding this question - I created a new build with NSAppTransportSecurity and NSAllowsLocalNetworking set to true as in Apple Docs here. But still the same error. The "Network request failed" for url http://127.0.0.1:53902/x36xhzz/x36xhzz.m3u8?__hls_origin_url=https%3A%2F%2Ftest-streams.mux.dev%2Fx36xhzz%2Fx36xhzz.m3u8.

[enfipy]

I can confirm that it's working correctly when used with https (http videos still don't work but I just fall back on direct load when local). The problem was that CacheManagerProvider was inside the react-navigation component, when I moved it to the _layout.tsx outside of the <Tabs> component - it worked.

Closing issue as resolved.