Why we cache data?
Cache means storing data inside the memory. We access data from a server by making network calls. If we trying to access the same data again and again then making a network call each time does not make any scene. That is where cache comes to help. We store data inside memory, access them from memory, which saves the user's internet data.
Coming back to the topic of this blog, If we want to play videos inside a react-native project there is an amazing library called react-native-video. This library can be used to play videos inside Android and IOS. But there is a catch, react-native-video provides caching for IOS only, not for Android. So how can we cache videos using react-native-video inside Android?
There are two ways you can cache videos
1. react-native-video-cache
Basically react-native-video-cache creates a local proxy server to play videos using the AndroidVideoCache library and when it completes caching its serves videos through cache directory. Which is perfect, that is what we want but when I test it on BrowserStack, Videos was not playing, I was getting 502 error. Which is weird because videos were playing into an actual android device. May be browser stack does not allow us to create a local proxy server. I’m not sure if anyone has any idea please comment down below.
2. react-native-fs and react-native-fetch-blob
Both libraries use file systems to download and store data. But consider this case, You have multiple videos in a list to play but we have to wait until they get download, which is frustrating also not correct to make a user wait. It's not caching while we stream them.
So How can we cache videos while streaming?
Solution
react-native-video-android-cache
The library react-native-video provides us, two players to use Android’s default player and Android ExpoPlayer. ExoPlayer does support caching videos, So why not I make the change inside ExoPlayer which react-native-video uses.
So I looked on google for caching inside ExoPlayer and found the solution on StackOverflow. So I forked react-native-video library, created a custom class that uses CacheDataSource from ExoPlayer to cache videos. Also, I had to make a change inside ReactExoplayerView class from react-native-video, where instead of returning default mediaDataSourceFactory I had to return custom class which we have created.
I have named the forked library as react-native-video-android-cache, You can use this library to cache your videos using react-native-video in Android. You can provide maximum cache size and maximum file size.
Step 1 -
npm install --save git+https://git@github.com/paddy57/react-native-video-android-cache.git
Step2
You may need to link react-native-video to your project. Follow this link (https://github.com/react-native-community/react-native-video#android-installation)
That's it. Just observe app cache size increasing while you stream videos. I hope this library will be useful to you.
If you want to read more Do visit my website. Cheers.
Top comments (12)
Hello. Thank you for sharing this.
I was looking for a library to cache my videos.
I have a question.
Do we still need to use react-native-video along side react-native-video-android-cache
Yes, I have forked the React-native-video and made the changes so we can cache videos, when videos streams in exo player, we cache the byte by byte via video player. So yes we need to use ract-native-video
Thank you sir for getting back.
Do we just use npm install --save git+git@github.com/paddy57/react-nativ... or do we use both
npm install --save git+git@github.com/paddy57/react-nativ... and npm install react-native-video
Use this to install
1.npm install --save git+git@github.com/paddy57/react-nativ...
then follow react-native-video README to
2.link lib with your project
I have done that.
I really want to use this library, it will help a lot in my project.
I am facing a compile error:
The error seems to be brought by this::
----folder/node_modules/react-native-video/android-exoplayer/src/main/java/com/brentvatne/exoplayer/AndroidCacheDataSourceFactory.java:33: error: cannot find symbol
String userAgent = Util.getUserAgent(context, context.getString(R.string.app_name));
^
symbol: variable app_name
location: class string
it seems that R.string.app_name can't be located.
I am not familiar with how android java projects get linked with react native but I do have a bit of java android mobile development knowledge.
I would like to ask, is the R.string.app_name referenced on my react native project or should it be declared in the library?
replace
String userAgent = Util.getUserAgent(context, context.getString(R.string.app_name));
with
String userAgent = Util.getUserAgent(context, YOUR_APP_NAME);
Thank you Sir, For your help. It worked
The library has helped my videos avoid so much buffering.
It loads the video fast ahead of time.
I am facing one issue though. When I seek the video back to 0.00 time after watching the video once.
Another api call is made to the server to request the video.
I was expecting the cached video to be served instead and no api call to be made.
Does the library support this functionality?
Thank you. You can leave a star to GitHub repo ;) . I'm not sure, I will test your query and will work on fork to introduce the functionality if it's not present already.
OK.
After Install npm install --save git+git@github.com/paddy57/react-nativ...
I am getting the Error: Unable to resolve module ./DRMType from \node_modules\react-native-video\Video.js:
Please help me out in this
thank you
Hello
Thank you for your post.
I am beginner in React Native. I am developing new App, but I am using Yarn.
How can I use your package in my project, I can install it into my app.
I hope your help.
Regards.