Skip to main content

Intro

Requirements​

  • react-native-video >= 6.15.0
  • min iOS 15.0, Android 6.0
  • Valid license for Offline Video SDK

Getting Started​

Offline Video SDK is a comprehensive solution for downloading and playing video content offline, including DRM-protected content.

Video Stream Downloader​

  • @TheWidlarzGroup/react-native-video-stream-downloader
info

Video Stream Downloader is a unified plugin that combines stream downloading capabilities with offline DRM support. It allows you to download streams and videos from the internet, manage downloaded assets, and handle DRM-protected content for offline playback.

Features​

  • Stream Downloading: Download HLS, MPEG-DASH, and MP4 streams from the internet
  • Asset Management: Integrated asset manager to organize and manage downloaded content
  • Offline DRM Support: Download and cache Persistent DRM Keys for protected content
  • Offline Playback: Play downloaded content without internet connection
  • Cross-Platform: Support for iOS 15.0+ and Android 6.0+

Installation​

1. Configure npm for private package (one-time setup)​

Since this is a private package, you need to configure npm to access GitHub Packages. If you received a GitHub token from us, add the following to your ~/.npmrc file:

@TheWidlarzGroup:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<NPM_GITHUB_AUTH_TOKEN>

Replace <NPM_GITHUB_AUTH_TOKEN> with your actual GitHub token.

info

Note: The GitHub token for downloading packages is different from the token used for plugin authorization. This token is only needed for npm to access the private package repository.

warning

Project-level .npmrc: If you have a .npmrc file in your project root, you may also need to add the same configuration there, especially in CI/CD environments or when working in teams.

info

Other package managers: By default, most package managers will use the ~/.npmrc file. However, if you're using project-specific configuration files (like yarnrc.yml for Yarn), you may need to configure the registry differently in those files.

2. Install the package​

npm install @TheWidlarzGroup/react-native-video-stream-downloader

3. Android Configuration​

Add this line to your ./android/app/build.gradle file (not ./android/build.gradle) in the dependencies block:

implementation fileTree(dir: "../../node_modules/@TheWidlarzGroup/react-native-video-stream-downloader/native-libs", include: ["*.aar"])

Your dependencies block should look like this:

dependencies {
    implementation fileTree(dir: "../../node_modules/@TheWidlarzGroup/react-native-video-stream-downloader/native-libs", include: ["*.aar"])
    // ... other dependencies
}
info

Note for different project structures: If you're using a monorepo or have a different project structure than the default React Native setup, the path to the native libraries might be different. Adjust the path to match your project's node_modules location

4. iOS Configuration​

No additional configuration is required for iOS. The plugin will be automatically linked.

5. Plugin Authorization​

After installation, you need to authorize the plugin with an API key before using it. You can obtain an API key either through the SDK platform or by contacting TheWidlarzGroup directly at hi@thewidlarzgroup.com.

import { registerPlugin } from "@TheWidlarzGroup/react-native-video-stream-downloader";

const success = await registerPlugin("YOUR_API_KEY");

Supported Formats​

FormatiOSAndroid
HLS✅✅
MPEG-DASH❌✅
MP4✅✅