Skip to content

lucastonon/react-native-video-android-cache

 
 

Repository files navigation

react-native-video-android-cache

react-native-video-android-cache lib provide you video component from react-native-video with feature to cache your videos while streaming.

Reason to create react-native-video-android-cache

  1. React-native-video does not have video cache while it streams video for Android, it does support cache for IOS.

  2. React-native-video’s repeat prop is used to repeat video once it's finished like in loop but it was making a lot of network calls which is bad for user’s data usage.

There was two choices to cache videos

Basically react-native-video-cache creates a local proxy server to play videos using AndroidVideoCache and when it's complete caching its serve videos through cache directory.Which is perfect but when I test it on BrowserStack, Videos was not playing, was getting 502 error.

Both library uses file systems to download and store data. But if you have multiple number videos to download at a time or just say when you wait for a video to download and then play video which is frustrating also not correct to make user wait.

Solution

Why not we use android’s exo-player from react-native-video and create a custom class where we can cache videos while they are streaming using exo-players’s CacheDataSource.

That's what react-native-video-android-cache does. react-native-video-android-cache/android-exoplayer/src/main/java/com/brentvatne/exoplayer/AndroidCacheDataSourceFactory.java is a custom class to cache videos.

And inside ReactExoplayerView.java instead of returning default mediaDataSourceFactory return the AndroidCacheDataSourceFactory with three parameter Context, maxCacheSize(default 324mb),maxFileSize(default 10mb). I came up with this solution through a stackOverFlow solution.

Installation and Usage

Step 1

npm install --save git+https://[email protected]/paddy57/react-native-video-android-cache.git

Step 2

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


MIT Licensed

About

A <Video /> component for react-native with support for caching videos for android

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 53.0%
  • Objective-C 25.9%
  • C# 12.6%
  • JavaScript 8.2%
  • Ruby 0.3%