DEV Community

Cover image for How to cache videos in a react-native project using Android's ExoPlayer cache
Pradnyanand Milind Pohare
Pradnyanand Milind Pohare

Posted on • Updated on

How to cache videos in a react-native project using Android's ExoPlayer cache

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.

Alt Text

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.

Discussion (11)

Collapse
georgemburu profile image
Georgemburu

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

Collapse
paddy57 profile image
Pradnyanand Milind Pohare Author

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

Collapse
georgemburu profile image
Georgemburu

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

Thread Thread
paddy57 profile image
Pradnyanand Milind Pohare Author • Edited on

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

Thread Thread
georgemburu profile image
Georgemburu • Edited on

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:

  • What went wrong: Execution failed for task ':react-native-video:compileDebugJavaWithJavac'.

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?

Thread Thread
paddy57 profile image
Pradnyanand Milind Pohare Author

replace
String userAgent = Util.getUserAgent(context, context.getString(R.string.app_name));
with
String userAgent = Util.getUserAgent(context, YOUR_APP_NAME);

Thread Thread
georgemburu profile image
Georgemburu

Thank you Sir, For your help. It worked

Thread Thread
georgemburu profile image
Georgemburu

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?

Thread Thread
paddy57 profile image
Pradnyanand Milind Pohare Author

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.

Thread Thread
georgemburu profile image
Georgemburu

OK.

Collapse
longman0512 profile image
Smart Developer

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.