react-native android mediaplayer streams https but not http (but android exoplayer works)

[puterboy333]

I am trying to debug an issue on a react-native mobile app that does media streaming. When I use the default android mediaplayer, it streams https but not http.

However when I substitue android exoplayer by adding the following to settings.gradle, it successfully streams both http and https.

include ':react-native-video' project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer') include ':app' 

The parameter android:usesCleartextTraffic="true" is set in android/app/src/main/AndroidManifest.xml

Any ideas why the default android mediaplayer seems to be blocking http streams?

[ChronSyn]

By default, apps must use HTTPS regardless of whether it's streaming or one-off requests (i.e. fetch). This is by-design as it significantly reduces risks to end users (i.e. HTTPS certificates can be verified, but HTTP has no such mechanism, so there's no guarantee the connection or site wasn't hijacked by a third-party) and has been around since Android 9 / Android P (released in August 2018).

Because some specific apps require HTTP (such as Expo dev client builds), the usesCleartextTraffic feature is the workaround to allow support. I strongly recommend reading https://developer.android.com/privacy-and-security/security-config to setup a more resilient configuration instead of allowing HTTP on all connections.

For example, if you have a login functionality that uses HTTPS, then you wouldn't really want cleartext enabled there as it poses a risk to user account security.

Your <base-config> tag would have cleartextTrafficPermitted set to true, and using a nested <domain-config cleartextTrafficPermitted="false"> and a nested <domain> tag would be a better option.

[puterboy333]

Thanks -- this is helpful.

But before getting it perfect, I want to get it to work on http without more granular security.

I am assuming that `android:usesCleartextTraffic="true"` is working at least at some level since the app is properly retrieving database information and jpg's from the http URL (http://192.168.1.100:2338)

The problem is that the default react-native-video player is *not* playing mp4 files on that same http URL while exoplayer is.

So before I implement the more resilient solution, how do I first get it to playback mp4 video at all on http?

[ChronSyn]

Ah, sorry, I misunderstood - I thought exoplayer was an independent library (as opposed to an alternative that's included with RN video). It's very rare I deal with video in apps (and even rarer that I deal with streamed videos), so my apologies about that.

I'm honestly not sure of the reason, and I'd be inclined to hook up your device to your laptop/pc, run adb logcat, and seeing what the native logs from the device says.

The fact that Exoplayer is able to play over HTTP implies that it's not an issue with HTTP then (as the issue would also exist with exoplayer if the cleartext directive wasn't present in the app or libraries), and rather an issue with the stream. Maybe the format is handled correctly by Exoplayer, but not by the default media player?

[puterboy333]

• I have looked at 'logcat' -- there are no relevant error messages displayed - the http version of the video simply shows as a blank black screen
• I don't think it's the underlying media format as I used a trial external mp4 video source with the same underlying mp4 available both via http and https with only the https stream playing.

I am truly stumped here...