search

TheWidlarzGroup / react-native-video

A <Video /> component for react-native
https://docs.thewidlarzgroup.com/react-native-video/
MIT License
7.23k stars 2.91k forks source link

[Android] Slow to load videos from S3 #1622

Closed jrods closed 5 years ago

jrods commented 5 years ago

Question

I'm currently having a problem with video playback availability on Android.

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 awhile 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 behaviour 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

I have also posted this question on stackoverflow: https://stackoverflow.com/questions/56596041/react-native-video-takes-too-long-to-start-playback

CHaNGeTe commented 5 years ago

Which kind of video are you trying to load? Progressive (f.e mp4) or Adaptative (f.e. hls, mpd, ism)

CHaNGeTe commented 5 years ago

If you are using mp4, it may help to include Content-Rage headers. returning 206 status code (Partial Content)

jrods commented 5 years ago

@CHaNGeTe I'm trying to play .mp4 videos recorded from react-native-camera. I will try and see what the OK status is from requesting the video link, is the Content-Range header set from S3 or Cloudfront? Would I being using the buffer config in react-native-video to make range request for me? I'm not familiar with range requests/responses.

CHaNGeTe commented 5 years ago

Do you know Postman?

I am not used to cloudfront, but you can test if it has range support with it.

Send this header to a mp4 video (I am using https://www.w3schools.com/html/mov_bbb.mp4)

Range: bytes=0-2

If you receive a Content-Range header in response, then the server (cloudfront) is configured for progressive download.

image

I am not sure if AVPlayer handles progressive files by default, but it is a good way to start.

Also check if you are getting the 206 status code (size and time are also hints) image

jrods commented 5 years ago

The response is the full video in the request when requesting it by postman. I can't tell how react-native-video is requesting without including a fork in my app.

After further testing, there is an inconsistency between OS versions, for example Android Pie loads the video much slower than other versions, Android Oreo less so and Android Nougat even less.

This behaviour also seems to exhibit on selected playback seeking, Android Pie suffering the most.

CHaNGeTe commented 5 years ago

The response is the full video in the request when requesting it by postman.

this is the first thing you have to solve. Search for setup Cloudfront for progressive mp4. You can try in StackOverflow also.

Gustash commented 4 years ago

I also have this issue from Cloudfront. I checked Postman and I do get a 206 with Content-Range. This is not using the ExoPlayer as that one crashes on me when the controls prop is true and it also doesn't load the video with a different error. (something to do with AVC codec)