DEV Community

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

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

Pradnyanand Milind Pohare on February 27, 2020

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 acc...
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

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 • Edited

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

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

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

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
 
paddu1246 profile image
Padmanabham

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

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.