React Native Video Player

Table of Contents

Prerequisites
Setup
From the scratch
Using Simulator
Revision History

React-native-video is basically a package that allows a video component to be shown/used within React Native.

The react-native-video player is easily configurable with Axinom DRM.

This sample application demonstrates how to use Axinom DRM for playback using React Native Video Player. This project uses react-native-video npm package.

Prerequisites

In order to use this sample the following prerequisities should be met:

1 Set up Axinom DRM demo account.

Registration can be performed from the following link: https://www.axinom.com/products/drm.

2 Ability to generate Axinom DRM License Tokens.

Documentation on this can be found here: https://github.com/Axinom/drm-quick-start.

You can install react-native-video npm package using npm i react-native-video. For further information please refer to https://www.npmjs.com/package/react-native-video.

Setup

You can find the sample codes in our github repo.

This repo consists of a working react native video player. You can clone the sample code and build the code using Xcode or Android Studio. Then you can transfer the build file to your device and try out the playback.

From the scratch

You can install react-native-video npm package using npm i react-native-video. For further information please refer to https://www.npmjs.com/package/react-native-video.

To intgrate DRM, you need to specify the DRM details in the video element in the App.js file.

Widevine & Playready

drm= {{
    type: '<DRM_Type>',
    licenseServer:'<License_server_url>',
    headers: {
        'X-AxDRM-Message':'<token>',
        'Content-Type': 'application/octet-stream'
    }
}}

Fairplay

drm= {{
    type: 'fairplay',
    licenseServer:'https://drm-fairplay-licensing.axprod.net/AcquireLicense',
    certificateUrl: 'https://vtb.axinom.com/FPScert/fairplay.cer',
    headers: {
        'X-AxDRM-Message':'<token>',
        'Content-Type': 'application/octet-stream'
    }
}}

Note	The code needs to be edited according to the README.md file that can be found in https://github.com/Axinom/drm-quick-start-react-native/blob/main/README.md

Using Simulator

Important: Protected streams cannot be played back on Simulator.

Revision History

The table below outlines the document versions and any changes between them.

Version	Date	Description
1.0	December 14, 2021	Initial version.
2.0	February 27, 2023	Updated the codes and document.

Version

Date

Description

1.0

December 14, 2021

Initial version.

2.0

February 27, 2023

Updated the codes and document.