Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react-native-video takes too long to start playback

In upgrading my app to react-native 0.59, I also upgraded react-native-video to it's latest version 4.4.1. What is currently happening is when trying to play videos with this library, it takes a while for the video to be available for playback. The size of the videos doesn't seem to matter. The videos are stored on S3, in my test environment the videos are linked by Cloudfront, in my local environment the videos are linked by the S3 location, but the behavior exhibited is the same for both environments.

This only happens for Android, iOS playback availability is ready in under 1s for the same videos.

I have tried rolling back react-native-video to a previous compatible version, the problem persists.

Different devices have different wait times for playback availability.

I wasn't able to used SDK 27 due to using a version of Firebase requiring SDK 28.

There is an IOException being raised when the component has been initialized to get the S3 resource, but the library does eventually get the video.

I don't know the exact cause of the problem, whether or not the library is downloading the video before playing, or if there needs to be a header included in the request.

Here is the debug output when trying to play a video:

I/MediaPlayer: constructor
W/MediaPlayer: setScreenOnWhilePlaying(true) is ineffective without a SurfaceHolder
V/MediaPlayer: resetDrmState:  mDrmInfo=null mDrmProvisioningThread=null mPrepareDrmInProgress=false mActiveDrmScheme=false
    cleanDrmObj: mDrmObj=null mDrmSessionId=null
V/MediaPlayer: resetDrmState:  mDrmInfo=null mDrmProvisioningThread=null mPrepareDrmInProgress=false mActiveDrmScheme=false
    cleanDrmObj: mDrmObj=null mDrmSessionId=null
I/MediaPlayer: setDataSource:<S3-url>/video.mp4
W/MediaPlayer: Couldn't open <S3-url>/video.mp4: java.io.FileNotFoundException: No content provider: <S3-url>/video.mp4
I/MediaPlayer: setDataSource:<S3-url>/video.mp4
V/MediaHTTPService: MediaHTTPService(android.media.MediaHTTPService@cefd526): Cookies: null
V/MediaHTTPService: makeHTTPConnection: CookieManager created: java.net.CookieManager@6738567
    makeHTTPConnection(android.media.MediaHTTPService@cefd526): cookieHandler: java.net.CookieManager@6738567 Cookies: null
I/DpmTcmClient: RegisterTcmMonitor from: com.android.okhttp.TcmIdleTimerMonitor
V/MediaPlayer: resetDrmState:  mDrmInfo=null mDrmProvisioningThread=null mPrepareDrmInProgress=false mActiveDrmScheme=false
    cleanDrmObj: mDrmObj=null mDrmSessionId=null
V/MediaPlayer: resetDrmState:  mDrmInfo=null mDrmProvisioningThread=null mPrepareDrmInProgress=false mActiveDrmScheme=false
    cleanDrmObj: mDrmObj=null mDrmSessionId=null
I/MediaPlayer: setDataSource:<S3-url>/video.mp4
W/MediaPlayer: Couldn't open <S3-url>/video.mp4: java.io.FileNotFoundException: No content provider: <S3-url>/video.mp4
I/MediaPlayer: setDataSource:<S3-url>/video.mp4
V/MediaHTTPService: MediaHTTPService(android.media.MediaHTTPService@f3e96c4): Cookies: null
V/MediaHTTPService: makeHTTPConnection: CookieHandler (java.net.CookieManager@6738567) exists.
    makeHTTPConnection(android.media.MediaHTTPService@f3e96c4): cookieHandler: java.net.CookieManager@6738567 Cookies: null
W/MediaPlayer: setScreenOnWhilePlaying(true) is ineffective for Surface
W/System: A resource failed to call release. 
I/MediaPlayer: start
W/MapperHal: buffer descriptor with invalid usage bits 0x2000
W/MapperHal: buffer descriptor with invalid usage bits 0x2000
W/MapperHal: buffer descriptor with invalid usage bits 0x2000
E/Config:Grabber:GameModeImComponents: Exception:Value fcf76744443e3b9b807f2f2b24316f7e4814f6f6829b3a1403f7fe6b6f1f4111242d998547a4f387fdb6f411c5587e4ee1e5f80ac775bd0fb89f0f20f5dd10ee9a42ac5080a02377888eb7f9961acfad8ddf68ea67cab1f15a2ce58bfda46223bae1c9201ae662baf445368dc8d30680ee7f1e58d782c3d588f14c91f5bd80d84e9d60d298153d0b781a842d5c05aae5bcf2fc423b6419cadfdaad20044d200e3a850fb950b2b10851a69032db63196767da7a27e23c0835b1180f5dae394433ae57895815b8d3479fbf8e451efd426933b11ba2ceb78057fbe638daaaf9100084541b079a4c5bb3cd705ebc9e2eb46ee8086f03c5c3dc9a5b8b9331b4f01923ac25e0c214f2876d38dc31f3bc6d93681511c7ccd1a672bcc05e62d4a1b8fe27086bd1bfc7fffeff51d16f0c9f6d0004d249bc57667be3bd3109d08d28b8bf96435d4ce310f80d78ba6cfbf4dd1ab65dd37645c5bd9a91fd416ca58992c8ada57a67fd0238460f83b004c9f95aef00da9ad00b96a383a35f8edfb4db21c4c98165063124d79988fdc6b104f9f41bef115cb4fbdb56a5a72097883d68ffdb0c9e1b7c71e30bd4cb589883e71b41ebb174720c5dc357ace7009588aa6f2ef13934aca4bbd330f17506b3713cb5fd4dff3bff8777fada23dc38584edbe34e0ad6d8929e970ce04275424ac06ee070ec76eefba6ac7681693f1f36276127a5f8be92ed65e269fde35c09cac535925a0d4eab290353f1b578949fe8ff8cde7c6c72457a9c1fb4492bed2e93064d5009bbfb0c040bf631e628b61349193471abc17c71c3367f764633c3d989bb33b949f8136de844c0aa5d41d246bf02ac824077a76312c62bbe297ce08b20312a2c0b2a3f8e4a878c1453d793a9cc1a38a8767368efc857b729a207ff9f860dc57c4d7fbe9422d388e95ff0be79f776b7f4307e98fe10ab607e7cbe933306b5be42b95ff490b7dd4cbec76b6590acd621a266178d0b8ea1594d6f33de986cdb62b21168145d86dba8fed10d59c87a5bde995a3aa7251b98b7ed1b15d01e4232624efebf5efae840e733abca5ab8c9e274b78b7c62cfadf341d6a01e2e5a9e7852bc15def79f0443c54ebeaa94ecb949f80ae13339ed301e4b947993f0491e271a1ab44e054fa1d1060014470e2b05fbaf7f95888474c254f9689d04c5dabc5aa28358094d37e8461b0b5711d5c327fc0286dd650ca26e79c5b094d237c63c1cd6a595484700a9dc8f63eed39283a6ee8a52ff93fb12b3fa387ef8113547a11bb501273735806a28e7430106785a33f4dc97f4f17d7e78a662b7d00f6838e57368c74bc4826bff82de4552cd7a7e109919a6cf7ad5e7e7b7a66299bf1d89ba342b13d69fb08e1292b6de85a0097aba02d12f17ab39bf09f3f56a589301313b8971fc97e594847130e504758c5b7721fec3a09bf599e22f63d29dc8772464a4dc91e802f9e4a5cae29bdd42b3d854ca04d3cb44bff6d4ce3c3354a7b00dcb393c70a45c55633a80ab0db8c09ae1b9e15a21057e6916bc1386a9d1afd96bba1f2a464b5684aa52f336f4f633d0de2fce2703408056a68c36195539efd1e21dab31ff37a4f6cfc6c0caa5942b39dbec0b9b0faf87a5d7576987d47c48d5b95ea964ab3863bfe6d4d0470d07bd362d2deb72f50896a1af6f64875ca5ea097eddfb6ac478e87875f506a9683c98f3fc1ecd15aac0400004bc621c9e263fdc0d0ab30c2804c50de4c3c946b58c0ac8b34d9011dfa6c41f7d6d84afffa8a64f87689ee80ae12e203cda of type java.lang.String cannot be converted to JSONArray
E/Config:Grabber:GameModeImComponents: Exception:Value fcf76744443e3b9b807f2f2b24316f7e4814f6f6829b3a1403f7fe6b6f1f4111242d998547a4f387fdb6f411c5587e4ee1e5f80ac775bd0fb89f0f20f5dd10ee9a42ac5080a02377888eb7f9961acfad8ddf68ea67cab1f15a2ce58bfda46223bae1c9201ae662baf445368dc8d30680ee7f1e58d782c3d588f14c91f5bd80d84e9d60d298153d0b781a842d5c05aae5bcf2fc423b6419cadfdaad20044d200e3a850fb950b2b10851a69032db63196767da7a27e23c0835b1180f5dae394433ae57895815b8d3479fbf8e451efd426933b11ba2ceb78057fbe638daaaf9100084541b079a4c5bb3cd705ebc9e2eb46ee8086f03c5c3dc9a5b8b9331b4f01923ac25e0c214f2876d38dc31f3bc6d93681511c7ccd1a672bcc05e62d4a1b8fe27086bd1bfc7fffeff51d16f0c9f6d0004d249bc57667be3bd3109d08d28b8bf96435d4ce310f80d78ba6cfbf4dd1ab65dd37645c5bd9a91fd416ca58992c8ada57a67fd0238460f83b004c9f95aef00da9ad00b96a383a35f8edfb4db21c4c98165063124d79988fdc6b104f9f41bef115cb4fbdb56a5a72097883d68ffdb0c9e1b7c71e30bd4cb589883e71b41ebb174720c5dc357ace7009588aa6f2ef13934aca4bbd330f17506b3713cb5fd4dff3bff8777fada23dc38584edbe34e0ad6d8929e970ce04275424ac06ee070ec76eefba6ac7681693f1f36276127a5f8be92ed65e269fde35c09cac535925a0d4eab290353f1b578949fe8ff8cde7c6c72457a9c1fb4492bed2e93064d5009bbfb0c040bf631e628b61349193471abc17c71c3367f764633c3d989bb33b949f8136de844c0aa5d41d246bf02ac824077a76312c62bbe297ce08b20312a2c0b2a3f8e4a878c1453d793a9cc1a38a8767368efc857b729a207ff9f860dc57c4d7fbe9422d388e95ff0be79f776b7f4307e98fe10ab607e7cbe933306b5be42b95ff490b7dd4cbec76b6590acd621a266178d0b8ea1594d6f33de986cdb62b21168145d86dba8fed10d59c87a5bde995a3aa7251b98b7ed1b15d01e4232624efebf5efae840e733abca5ab8c9e274b78b7c62cfadf341d6a01e2e5a9e7852bc15def79f0443c54ebeaa94ecb949f80ae13339ed301e4b947993f0491e271a1ab44e054fa1d1060014470e2b05fbaf7f95888474c254f9689d04c5dabc5aa28358094d37e8461b0b5711d5c327fc0286dd650ca26e79c5b094d237c63c1cd6a595484700a9dc8f63eed39283a6ee8a52ff93fb12b3fa387ef8113547a11bb501273735806a28e7430106785a33f4dc97f4f17d7e78a662b7d00f6838e57368c74bc4826bff82de4552cd7a7e109919a6cf7ad5e7e7b7a66299bf1d89ba342b13d69fb08e1292b6de85a0097aba02d12f17ab39bf09f3f56a589301313b8971fc97e594847130e504758c5b7721fec3a09bf599e22f63d29dc8772464a4dc91e802f9e4a5cae29bdd42b3d854ca04d3cb44bff6d4ce3c3354a7b00dcb393c70a45c55633a80ab0db8c09ae1b9e15a21057e6916bc1386a9d1afd96bba1f2a464b5684aa52f336f4f633d0de2fce2703408056a68c36195539efd1e21dab31ff37a4f6cfc6c0caa5942b39dbec0b9b0faf87a5d7576987d47c48d5b95ea964ab3863bfe6d4d0470d07bd362d2deb72f50896a1af6f64875ca5ea097eddfb6ac478e87875f506a9683c98f3fc1ecd15aac0400004bc621c9e263fdc0d0ab30c2804c50de4c3c946b58c0ac8b34d9011dfa6c41f7d6d84afffa8a64f87689ee80ae12e203cda of type java.lang.String cannot be converted to JSONArray
W/MapperHal: buffer descriptor with invalid usage bits 0x2000
W/MapperHal: buffer descriptor with invalid usage bits 0x2000
W/MediaPlayerNative: info/warning (3, 0)
W/MapperHal: buffer descriptor with invalid usage bits 0x2000
W/OpenGLRenderer: Unsupported Gamut: 147062784
W/MapperHal: buffer descriptor with invalid usage bits 0x2000
W/MediaPlayerNative: info/warning (703, 62540)
W/MediaPlayerNative: info/warning (701, 0)
W/MediaPlayerNative: info/warning (703, 69051)
W/MediaPlayerNative: info/warning (702, 0)
W/MediaPlayerNative: info/warning (3, 0)
W/MediaPlayerNative: info/warning (703, 10821)
W/MediaPlayerNative: info/warning (701, 0)
W/MediaPlayerNative: info/warning (703, 13947)
W/MediaPlayerNative: info/warning (702, 0)
W/MediaPlayerNative: info/warning (3, 0)
I/MediaPlayer: seek to:0 mode:0
W/MediaPlayerNative: info/warning (703, 67808)
    info/warning (701, 0)
W/MediaPlayerNative: info/warning (703, 9582)
    info/warning (702, 0)
React-Native: 0.59
Target SDK: 28
Android OS: Pie
Testing Device: OnePlus 5
Other devices with older OS version (at least Marshmellow) are also affected
like image 966
jrods Avatar asked Jun 14 '19 10:06

jrods


1 Answers

By enabling the react-native-video to use the ExoPlayer on Android reduced the load time to only couple of seconds from around earlier 20sec. So now similar playback time on iOS and Android. The file played was 8.8mb .MOV file via Google Cloud storage.

Add inside the whole projects root a react-native.config.js file with following lines:

module.exports = {
    dependencies: {
        "react-native-video": {
            platforms: {
                android: {
                    sourceDir: "../node_modules/react-native-video/android-exoplayer",
                },
            },
        },
    },
}

Used: "react-native-video": "^5.2.0", release mode, on device.

like image 58
Patrik Rikama-Hinnenberg Avatar answered Oct 20 '22 12:10

Patrik Rikama-Hinnenberg