zhigang1992 / react-native-video-cache

Caching your video without headache

react-native-video-cache

• Fixed its android conflict with react native v0.67 (gradle > 0.7)

Boost performance on online video loading and caching

Use following libraries to do the heavy lifting.

• iOS: https://github.com/ChangbaDevs/KTVHTTPCache
• Android: https://github.com/danikula/AndroidVideoCache

Getting started

$ yarn add react-native-video-cache

Mostly automatic installation

$ react-native link react-native-video-cache

Usage

import convertToProxyURL from 'react-native-video-cache';
...
<Video source={{uri: convertToProxyURL(originalURL)}} />

Install on android

Edit your android/build.gradle file and add the following lines:

        maven {
            url "$rootDir/../node_modules/react-native-video-cache/android/libs"
        }

to your allprojects/repositories

react-native-video-cache's Issues

too many requests to the backend server for the first time request.

Thanks for your great project, it works well for my project, but just one issue that I find when the first time to request video resource from backend server side, the backend server side will receive too many requests(more than 10+ requests), is it expected? or is there any way to avoid to request too many requests for the first time? Thanks!

RN 0.65 Android Build fails due to jcenter deprecation

Since RN 0.65, Jcenter is no longer used by react native and mavenCentral is used instead. This causes the android build to fail because com.danikula:videocache is not available in mavenCentral

Could not find com.danikula:videocache:2.7.1.
Searched in the following locations:
- https://repo.maven.apache.org/maven2/com/danikula/videocache/2.7.1/videocache-2.7.1.pom
- file:/Users/yonom/.m2/repository/com/danikula/videocache/2.7.1/videocache-2.7.1.pom
- file:/Users/yonom/GitHub/read-o/app/node_modules/react-native/android/com/danikula/videocache/2.7.1/videocache-2.7.1.pom
- file:/Users/yonom/GitHub/read-o/app/node_modules/jsc-android/dist/com/danikula/videocache/2.7.1/videocache-2.7.1.pom
- https://dl.google.com/dl/android/maven2/com/danikula/videocache/2.7.1/videocache-2.7.1.pom
- https://www.jitpack.io/com/danikula/videocache/2.7.1/videocache-2.7.1.pom
- file:/Users/yonom/GitHub/read-o/app/node_modules/expo-camera/android/maven/com/danikula/videocache/2.7.1/videocache-2.7.1.pom
Required by:
project :app > project :react-native-video-cache

Could not find com.danikula:videocache:2.7.1.

Getting error while running project. Could not find com.danikula:videocache:2.7.1.

Could not determine the dependencies of task ':app:processDebugResources'.

Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
Could not find com.danikula:videocache:2.7.1.
Searched in the following locations:
- https://oss.sonatype.org/content/repositories/snapshots/com/danikula/videocache/2.7.1/videocache-2.7.1.pom
- https://repo.maven.apache.org/maven2/com/danikula/videocache/2.7.1/videocache-2.7.1.pom
- file:/Users/avnishsharma/Downloads/RoadRunners-Native/node_modules/jsc-android/dist/com/danikula/videocache/2.7.1/videocache-2.7.1.pom
- https://dl.google.com/dl/android/maven2/com/danikula/videocache/2.7.1/videocache-2.7.1.pom
- https://www.jitpack.io/com/danikula/videocache/2.7.1/videocache-2.7.1.pom
Required by:
project :app > project :react-native-video-cache

Possible solution:

• Declare repository providing the artifact, see the documentation at https://docs.gradle.org/current/userguide/declaring_repositories.html

This is my android/build.gradle
buildscript {
ext {
buildToolsVersion = "34.0.0"
minSdkVersion = 21
compileSdkVersion = 34
targetSdkVersion = 34
ndkVersion = "25.1.8937393"
kotlinVersion = "1.8.0"

    if (System.properties['os.arch'] == "aarch64") {
        // For M1 Users we need to use the NDK 24 which added support for aarch64
        ndkVersion = "24.0.8215888"
    } else {
        // Otherwise we default to the side-by-side NDK version from AGP.
        ndkVersion = "21.4.7075529"
    }
}
repositories {
    google()
    mavenCentral()
    maven {url "$rootDir/../node_modules/react-native-video-cache/android/libs"}
}
dependencies {
    classpath("com.android.tools.build:gradle")
    classpath("com.facebook.react:react-native-gradle-plugin")
    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
    
}

}

Using RN - 0.73.1, react - 18.2.0 , react-native-video- 5.2.1, react-native-video-cache-2.7.4

Not Working With react native vlc

This caching working fine with react-native-video. But not working with react-native-vlc

Cache not working on Chromecast/AndroidTV

I tested multiple devices for caching, android phones emulator and even firestick. they work for offline use because of the cache but not chromecast and android TV.

error: incompatible types: unexpected return value

We have error in version 2.0.1, here detail error.

react-native-video-cache\android\src\main\java\com\reactnative\videocache\VideoCacheModule.java:29: error: incompatible types: unexpected return value
        return this.proxy.getProxyUrl(url);
                                     ^

Video is not caching

I was console the convertToProxyURL(uri). Before and After caching, url was same.
React Native - 0.71.10
Using latest version react-native-video-cache.

[iOS] fatal error on app start

When the App starts I get the following error on iOS:

2020-07-21 10:43:06.535 [error][tid:com.facebook.react.JavaScript] TypeError: null is not an object (evaluating 'VideoCache.convert')
2020-07-21 10:43:06.539 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: TypeError: null is not an object (evaluating 'VideoCache.convert')

Build failed when used with SDK 33

FAILURE: Build failed with an exception.

• Where:
  Build file '/Users/administrator/Desktop/repos/gridrival-client-app/node_modules/react-native-video-cache/android/build.gradle' line: 112

Build failing with React Native >= 0.72 and Gradle 8.0 | Could not set unknown property 'classifier'

Build failing with React Native >= 0.72 and Gradle 8.0

Error:
What went wrong: A problem occurred configuring project ':react-native-video-cache'.

Could not set unknown property 'classifier' for task ':react-native-video-cache:androidJavadocJar' of type org.gradle.api.tasks.bundling.Jar.

After some search, maybe this issue can help to fix it:
lottie-react-native/lottie-react-native#1022

TypeError: Cannot read property 'convert' of null

My code

<View
style={{
width: '100%',
backgroundColor: 'gray',
}}>
<Video source={{uri: convertToProxyURL(item.item.medium)}} />

      Please help me?

Can't start it on iOS

Hi, I can't make this work on iOS.
I added it with yarn, I linked it. But it didn't add anything in pods file. Then I manually added pod 'KTVHTTPCache', '~> 2.0.0' and pod install. Rebuilded, but still I get:

TypeError: Cannot read property 'convert' of undefined

Anything else that I need to do to make it work in iOS?

iOS linking on RN-59.9

Got "KTVHTTPCache.h" not found.

Added KTVHTTPCache.xcodeproj manually to libraries and added .framework to "Link Binary With Libraries". Runs fine when built and launched from xcode. When I close the app and relaunch it, it crashes on the launch screen. react-native run-ios also crashes on the first launch.

RN - 59.9

what is the maxmimum cache size and the expiration time for the cache?

Does the resulting file from "convertToProxyURL" expire and what is the maximum size of the cache?

Thanks

[REQUEST] does this support auth header?

Hey, I was wondering whether we can attach the header to the URI, for example an authentication header. This is quite common when accessing media resources in mobile applicaitons.

expo supports?

It's a feature request.

cannot start proxy server on IOS

when i try to cache video using the convertToProxyUrl i get error saying the
cannot start the proxy server,
I have added the KTVHTTPCache to the projects podfile

why is that ?

Is it working with gradle 7?

Can you please update https://github.com/zhigang1992/react-native-video-cache/blob/master/android/build.gradle for gradle 7. It is giving following error currently:

Build file '/Users/ayazalavi/Projects/ReadTalkApp/node_modules/react-native-video-cache/android/build.gradle' line: 117

A problem occurred configuring project ':react-native-video-cache'.

Configuration with name 'compile' not found.

cannot start proxy server on ios

```Error: failed to start proxy server
RenderVideo.js:41
code:"init.error"
domain:"NSPOSIXErrorDomain"
framesToPop:1
message:"failed to start proxy server"
nativeStackIOS:Array(17) ["0   shojoProducer                       0x00000001…", "1   shojoProducer                       0x00000001…", "2   shojoProducer                       0x00000001…", …]
length:17
__proto__:Array(0) [, …]
0:"0   shojoProducer                       0x000000010f790eb7 RCTJSErrorFromCodeMessageAndNSError + 135"
1:"1   shojoProducer                       0x000000010f7024c3 __41-[RCTModuleMethod processMethodSignature]_block_invoke_2.218 + 179"
2:"2   shojoProducer                       0x000000010fab2008 -[VideoCache convert:resolver:rejecter:] + 264"
3:"3   CoreFoundation                      0x00000001152eb03c __invoking___ + 140"
4:"4   CoreFoundation                      0x00000001152e84d5 -[NSInvocation invoke] + 325"
5:"5   CoreFoundation                      0x00000001152e8926 -[NSInvocation invokeWithTarget:] + 54"
6:"6   shojoProducer                       0x000000010f70452a -[RCTModuleMethod invokeWithBridge:module:arguments:] + 2810"
7:"7   shojoProducer                       0x000000010f708c76 _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 790"
8:"8   shojoProducer                       0x000000010f70878f _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 127"
9:"9   shojoProducer                       0x000000010f708709 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 25"
10:"10  libdispatch.dylib                   0x000000011793a4e1 _dispatch_call_block_and_release + 12"
11:"11  libdispatch.dylib                   0x000000011793b54b _dispatch_client_callout + 8"
12:"12  libdispatch.dylib                   0x000000011794201c _dispatch_lane_serial_drain + 720"
13:"13  libdispatch.dylib                   0x0000000117942b5f _dispatch_lane_invoke + 401"
14:"14  libdispatch.dylib                   0x000000011794b9a8 _dispatch_workloop_worker_thread + 645"
15:"15  libsystem_pthread.dylib             0x0000000117cd3fd2 _pthread_wqthread + 980"
16:"16  libsystem_pthread.dylib             0x0000000117cd3be9 start_wqthread + 13"
stack:"Error: failed to start proxy server
    at fn (/srs/new/shojoProducer/.vscode/.react/index.bundle:2181:36)
    at _callee$ (/srs/new/shojoProducer/.vscode/.react/index.bundle:178622:86)
    at tryCatch (/srs/new/shojoProducer/.vscode/.react/index.bundle:29306:19)
    at Generator.invoke [as _invoke] (/srs/new/shojoProducer/.vscode/.react/index.bundle:29481:24)
    at Generator.prototype.(anonymous function) [as next] (/srs/new/shojoProducer/.vscode/.react/index.bundle:29349:23)
    at tryCatch (/srs/new/shojoProducer/.vscode/.react/index.bundle:29306:19)
    at invoke (/srs/new/shojoProducer/.vscode/.react/index.bundle:29382:22)
    at /srs/new/shojoProducer/.vscode/.react/index.bundle:29412:13
    at tryCallTwo (/srs/new/shojoProducer/.vscode/.react/index.bundle:3269:7)
    at doResolve (/srs/new/shojoProducer/.vscode/.react/index.bundle:3433:15)"
userInfo:Object {NSLocalizedFailureReason: "Error in bind() function", NSLocalizedDescription: "Permission denied"}
NSLocalizedDescription:"Permission denied"
NSLocalizedFailureReason:"Error in bind() function"

Please let me know what else I should do
pod 'KTVHTTPCache', '~> 2.0.0'
ios>pod install

Clean cache

I was using this library until i noticed that my app was about 0.9GB in storage, how long does the cache last?, Is there a way to manually clean cache?

Android: How to verify

Hi, how do I verify that the package is working in Android?

In debug variant I observe that the original url is being used instead of a locally cached one. On release when I tested on device, turning off the internet after the video has loaded once - the same video doesn't seem to be loading from cache subsequently.

It does not work on real device Pixel 2

It works well on the emulator Pixel xl but it doesn't work on real device Pixel 2, whatever debug or release mode, can anyone help me?

The Video URL doesn't change on Android Release mode #14

Please help me with this issue. I have use react-native 0.69.5

android:usesCleartextTraffic="true" not work for me

Cannot read property 'convert' of undefined

Hi,

Thank you for open sourcing this library. I was looking for a good video cache solution for RN.

I have successfully linked this library, but as soon app starts, it throws an error saying, 'Cannot read property 'convert' of undefined' in Index.js:5

React native: 0.59.10
Device: one plus 3
Android: 9

Does it support HLS?

Please let me know if it supports HLS?

Chrome debugging fails due to synchronous native method call

Debugging in Chrome fails with "Calling synchronous methods on native module is not supported in Chrome"

It's likely related to the api change in this commit. Is there any way to use this current version with the Chrome debugger? If not, offering an async api as well might be helpful.

get the cached videos path

how can i get the path of the cached video so i can make use of it?

[iOS] Linker command failed with exit code 1

It does not work well with iOS but work well with Android.

What i done:

1. yarn add react-native-video-cache
2. pod install

info:
"react-native": "0.69.12"

Link issue in IOS

getting RNVideoCache is undefined.
i see no RNVideoCache.xcodeproj , seems the libray cannot be linked

danikula/AndroidVideoCache is not available

react-native-video-cache needs the following package to work on android:
Android: https://github.com/danikula/AndroidVideoCache

As it is not available, this package is also not working.

On npx react-native run-android I get this error:

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
Warning: unexpected element (uri:"", local:"base-extension"). Expected elements are <{}codename>,<{}layoutlib>,<{}api-level>

FAILURE: Build failed with an exception.

* What went wrong:
Could not determine the dependencies of task ':app:mergeDebugAssets'.
> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
   > Could not find com.danikula:videocache:2.7.1.
     [............]
     Required by:
         project :app > project :react-native-video-cache

Require Functionality Explanation

I have implemented your plugin for online videos which are loaded in a player (react-native-video). Function "convertToProxyURL()" is returning a URL starting with http://127.0.0.1:57688/... sounds like its working. But i don't see any significant difference in loading time or any performance increase in overall app. Can you please explain how things are working at backend and how can i get most of it?

In release APK android this caching not working

I created release apk and in that app get crash. Video is not get cache in release mode. in debug mode everything is working fine

App crashes when video I use the cache library

Need help on this. Works fine in debug mode but crashes in Release mode

Cant add react-native-video-cache to project.

#Issue Encountered while Adding React-Native-Video-Cache to Project on IOS

I encountered a challenge when attempting to integrate the "react-native-video-cache" package into my IOS project. Following the instructions outlined in the README.md file, I executed the command mentioned below to install the required dependencies:

$ npm install react-native-video react-native-reanimated react-native-gesture-handler react-native-video-cache-control
# --- or ---
$ yarn add react-native-video react-native-reanimated react-native-gesture-handler react-native-video-cache-control

However, I noticed that although the other packages were successfully added to the project dependencies, "react-native-video-cache-control" was missing. Consequently, when I proceeded to build the project, the Metro bundler displayed the following error:

I kindly request assistance in professionally addressing this issue without altering any symbols or information provided.

Thank you for your support.

When app close or re-open will video cache removed?

Is the cache cleared when back the screen or restarting the application?

linking reactnative fails

info Fetching system and libraries information...
System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 22.60 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    Android SDK:
      API Levels: 23, 25, 26, 27, 28, 29
      Build Tools: 23.0.1, 25.0.0, 25.0.2, 26.0.2, 26.0.3, 27.0.3, 28.0.0, 28.0.2, 28.0.3
      System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 10.1/10B61 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native: 0.61.5

when I do

> react-native link react-native-video-cache --verbose
debug Available platforms: iOS, Android
debug Package to link: react-native-video-cache
info Linking "react-native-video-cache" iOS dependency
error Linking "react-native-video-cache" failed.

Regression on iOS "avfoundationerrordomain"

When used in conjunction with react-native-video I get an error on iOS on the latest version of react-native-video-cache, previous versions seem to be fine. I believe commit this commit might be the culprit a2e6fcb

Too many open files

I started using this with react-native-video. My video component receives the source as a prop, after a video is done playing the source is refreshed a playback starts again (loop play).

The files do get cached as the app is able to work offline an no more requests are made to the server. But after some time the app will crash with such an error

2021-10-13 22:22:21.938 12357-12357/com.zzz.player E/art: ashmem_create_region failed for 'indirect ref table': Too many open files
2021-10-13 22:22:21.938 12357-12357/com.zzz.player W/art: Throwing OutOfMemoryError "Could not allocate JNI Env"
2021-10-13 22:22:21.938 12357-12357/com.zzz.player D/AndroidRuntime: Shutting down VM
2021-10-13 22:22:21.939 12357-12357/com.zzz.player E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.zzz.player, PID: 12357
    java.lang.OutOfMemoryError: Could not allocate JNI Env
        at java.lang.Thread.nativeCreate(Native Method)
        at java.lang.Thread.start(Thread.java:730)
        at com.google.android.exoplayer2.ExoPlayerImplInternal.<init>(ExoPlayerImplInternal.java:265)
        at com.google.android.exoplayer2.ExoPlayerImpl.<init>(ExoPlayerImpl.java:188)
        at com.google.android.exoplayer2.SimpleExoPlayer.<init>(SimpleExoPlayer.java:685)
        at com.google.android.exoplayer2.SimpleExoPlayer$Builder.build(SimpleExoPlayer.java:558)
        at com.brentvatne.exoplayer.ReactExoplayerView$6.run(ReactExoplayerView.java:417)
        at android.os.Handler.handleCallback(Handler.java:755)
        at android.os.Handler.dispatchMessage(Handler.java:95)
        at android.os.Looper.loop(Looper.java:154)
        at android.app.ActivityThread.main(ActivityThread.java:6141)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:912)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:802)
2021-10-13 22:22:21.942 413-2352/system_process W/ActivityManager:   Force finishing activity com.zzz.player/.MainActivity

This will not happen if I just stream each video. With streaming I can run the app for days without issues but with caching after a few hours ( or minutes, random time) the app will crash.

The Video URL doesn't change on Android Release mode

Please help me with this issue. I have use react-native 0.63