Mosaic products documentation: Concepts, API Reference, Technical articles, How-to, Downloads and tools

React Native Video Player

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.

  1. Widevine & Playready

    drm= {{
        type: '<DRM_Type>',
        licenseServer:'<License_server_url>',
        headers: {
            'X-AxDRM-Message':'<token>',
            'Content-Type': 'application/octet-stream'
        }
    }}
  2. 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.