React-native Video SDK

Latest version: 1.20.7

Example App

This SDK enables you to securely stream and download DRM-protected videos through your react-native app.

Minimum react-native version supported: "react-native": "0.60"

Getting started

$ npm install vdocipher-rn-bridge --save

Installation troubleshooting

If you encounter a build error for android project like 'Cannot find com.vdocipher.aegis:vdocipher-android:X.X.X', you may need to add the following maven repository to your android/build.gradle under allprojects -> repositories:

maven {
    url "https://github.com/VdoCipher/maven-repo/raw/master/repo"
}

Try the demo app

To run the example react-native app, follow steps below:

$ mkdir vdocipher-react-native && cd vdocipher-react-native

$ git clone https://github.com/VdoCipher/sample-react-native-app.git .

$ npm install

$ npx react-native run-android

Integrating video playback

Launch video in a fullscreen player

import {startVideoScreen} from 'vdocipher-rn-bridge';

startVideoScreen({
  embedInfo: {otp: 'some-otp', playbackInfo: 'some-playbackInfo'},
});

Picture in picture support for fullscreen player

To enable picture in picture support for fullscreen player pass true along with embedInfo as a second parameter in startVideoScreen method

import {startVideoScreen} from 'vdocipher-rn-bridge';

startVideoScreen(
  {embedInfo: {otp: 'some-otp', playbackInfo: 'some-playbackInfo'}},
  true,
);

Embed video in your react native layout

import {VdoPlayerView} from 'vdocipher-rn-bridge';

const embedInfo = {otp: 'some-otp', playbackInfo: 'some-playbackInfo'};

// in JSX

<VdoPlayerView style={{height: 200, width: '100%'}} embedInfo={embedInfo} />;

Custom control view can also be added for the player. To see how follow the documentation here ».

Using ProGuard

If you use ProGuard in your app, you might need to add the following rule to your ProGuard file.

To add Proguard rules, please follow these steps:

1. Create a file named "proguard-rules.pro" in the "android/app" directory.

Add the following line to your Proguard rules:

-keep class androidx.media3.common.MediaLibraryInfo { *; }

2. In your "android/app/build.gradle" file, enable Proguard for the app by adding the following configuration within the "buildTypes" section for the "release" build type:

buildTypes {
    release {
        ...
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        ...
    }
}

VdoPlayerView props

• embedInfo
• showNativeControls
• playWhenReady
• playbackSpeed
• style

VdoPlayerView event based props

• onInitializationSuccess
• onInitializationFailure
• onLoading
• onLoaded
• onLoadError
• onPlayerStateChanged
• onProgress
• onBufferUpdate
• onPlaybackSpeedChanged
• onTracksChanged
• onMediaEnded
• onError
• onEnterFullscreen
• onExitFullscreen
• onPictureInPictureModeChanged

VdoPlayerView methods

• seek
• enterFullscreenV2
• exitFullscreenV2
• isAdaptive
• getVideoQualities
• getSelectedVideoQuality
• setVideoQuality
• enableAdaptiveVideo
• getSelectedAudioQuality
• getCaptionLanguages
• getSelectedCaptionLanguage
• setCaptionLanguage
• disableCaptions
• getDuration
• setAspectRatio
• getPlaybackPropertiesV2

Props

embedInfo

Property	Type	Description
otp	string	generated otp for a video playback.
playbackInfo	string	playbackInfo for a video playback.
forceLowestBitrate	boolean	whether to force lowest bitrate, default: false.
forceHighestSupportedBitrate	boolean	whether to force highest supported bitrate, default: false.
maxVideoBitrateKbps	number	maximum allowed video bitrate (in kbps).
bufferingGoalMs	number	buffering goal in milliseconds, NOT recommended to change this value for most use cases; cannot be set to a value less than 15000
enableAutoResume	boolean	whether to auto resume the video from last watched position or play from the beginning, default: false.
preferredCaptionsLanguage	string	language code for the preferred captions language
resumeTimeMs	number	to specify the time from where the resume should occur
customPlayerId	string	player configuration id from dashboard to be used for player

showNativeControls

Controls whether natively embedded player controls are shown.

• true (default) - show native controls
• false - hide native controls

playWhenReady

Controls whether playback will progress if the player is in ready state.

• true (default) - play when ready
• false - pause playback

Note - In iOS, the player is paused after the video ends so need to set playWhenReady to true again to start playback.

playbackSpeed

Controls the playback speed; can only be used once the player is loaded.

• 1.0 (default) - play at normal speed of the video
• Other values - slow down or speed up playback

style

Sets the style for the player. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color. The style prop can be a plain old JavaScript object. As a component grows in complexity, it is often cleaner to use StyleSheet.create to define several styles in one place.

Resize mode property is also supported with style prop.

resizeMode Determines how to resize the video when the frame doesn't match the raw video dimensions.

"contain" - Scale the video uniformly (maintain the video's aspect ratio) so that both dimensions (width and height) of the video will be equal to or less than the corresponding dimension of the view. "cover" - Scale the video uniformly (maintain the video's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). "stretch" - Scale width and height independently, This may change the aspect ratio of the src.

Event props

onInitializationSuccess

Callback function invoked when a native VdoPlayer is created.

Typically, no handling is required when this is called. The internal player will automatically load the embedInfo provided in props.

onInitializationFailure

Callback function invoked when a VdoPlayer creation failed due to some reason. Playback will not happen.

The error details are provided in the payload under errorDescription.

Payload:

Property	Type	Description
errorDescription	object	error details

errorDescription:

Property	Type	Description
errorCode	number	an integer identifying the error
errorMsg	string	short message description of the error
httpStatusCode	number	http status code if relevant, -1 otherwise

onLoading

Callback function invoked when a new video starts loading.

onLoaded

Callback function invoked when a new video has successfully loaded. Playback can begin now.

onLoadError

Callback function invoked when a video failed to load due to some reason.

The error details are provided in the payload under errorDescription.

Payload:

Property	Type	Description
errorDescription	object	error details
embedInfo	object	embedInfo for which the error occurred

errorDescription:

Property	Type	Description
errorCode	number	an integer identifying the error
errorMsg	string	short message description of the error
httpStatusCode	number	http status code if relevant, -1 otherwise

onPlayerStateChanged

Callback function invoked when player state changes.

Payload:

Property	Type	Description
playerState	string	one of 'idle', 'buffering', 'ready' or 'ended'
playWhenReady	boolean	whether playback will progress if playerState is 'ready'

onProgress

Callback function invoked to provided playback time updates.

Payload:

Property	Type	Description
currentTime	number	current playback time in milliseconds

onBufferUpdate

Callback function invoked to provide buffered time updates.

Payload:

Property	Type	Description
bufferTime	number	current buffered time in milliseconds

onPlaybackSpeedChanged

Callback function invoked when playback speed changes.

Payload:

Property	Type	Description
playbackSpeed	number	current playback speed

onTracksChanged

Callback function invoked when available or selected track changes. In iOS only caption tracks are supported

Payload:

Property	Type	Description
availableTracks	object[]	array of available track objects
selectedTracks	object[]	array of currently selected track objects

track:

Property	Type	Description
id	number	an integer identifying the track
type	string	one of 'audio', 'video', 'captions', 'combined' or 'unknown'
language	string	optional: language of track if relevant
bitrate	number	optional: bitrate in bps if relevant
width	number	optional: width resolution if relevant
height	number	optional: height resolution if relevant otherwise
label	string	optional: Display name if relevant

onMediaEnded

Callback function invoked when a video reached end of playback.

onError

Callback function invoked when video playback is interrupted due to an error.

The error details are provided in the payload under errorDescription.

Payload:

Property	Type	Description
errorDescription	object	error details
embedInfo	object	embedInfo for which the error occurred

errorDescription:

Property	Type	Description
errorCode	number	an integer identifying the error
errorMsg	string	short message description of the error
httpStatusCode	number	http status code if relevant, -1 otherwise

onEnterFullscreen

Callback function invoked when the player with native controls enters fullscreen.

onExitFullscreen

Callback function invoked when the player with native controls exits fullscreen.

onPictureInPictureModeChanged

Callback function invoked to handle UI when the player enters or exits pip mode

Payload:

Property	Type	Description
isInPictureInPictureMode	boolean	is player in pip mode

Methods

Methods operate on a ref to the VdoPlayerView element. You can create a ref like this:

<VdoPlayerView ref={player => this._player = player}

seek

seek(seekTargetMs)

Set the seek target in milli seconds

enterFullscreenV2

enterFullscreenV2()

Enter fullscreen mode. Works only with player with native controls. For player with custom controls, fullscreen needs to be handled manually.

exitFullscreenV2

exitFullscreenV2()

Exit fullscreen mode. Works only with player with native controls. For player with custom controls, fullscreen needs to be handled manually.

isAdaptive

isAdaptive()

Check whether the video is in adaptive mode or not

getVideoQualities

getVideoQualities()

Get available video tracks

Payload:

Property	Type	Description
videoQualities	object[]	array of available track objects

track:

Property	Type	Description
id	number	an integer identifying the track
bitrate	number	optional: bitrate in bps if relevant
width	number	optional: width resolution if relevant
height	number	optional: height resolution if relevant otherwise

getSelectedVideoQuality

getSelectedVideoQuality()

Get selected video track

Payload:

Property	Type	Description
selectedVideoQuality	object	selected track object

track:

Property	Type	Description
id	number	an integer identifying the track
bitrate	number	optional: bitrate in bps if relevant
width	number	optional: width resolution if relevant
height	number	optional: height resolution if relevant otherwise

setVideoQuality

setVideoQuality(videoQuality)

Set specified video track

videoQuality:

Property	Type	Description
id	number	an integer identifying the track
bitrate	number	optional: bitrate in bps if relevant
width	number	optional: width resolution if relevant
height	number	optional: height resolution if relevant otherwise

enableAdaptiveVideo

enableAdaptiveVideo()

Run video in adaptive mode

getSelectedAudioQuality

getSelectedAudioQuality()

Get selected audio track

Payload:

Property	Type	Description
selectedAudioQuality	object	selected track object

track:

Property	Type	Description
id	number	an integer identifying the track
bitrate	number	optional: bitrate in bps if relevant
width	number	optional: width resolution if relevant
height	number	optional: height resolution if relevant otherwise

getCaptionLanguages

getCaptionLanguages()

Get available caption tracks

Payload:

Property	Type	Description
captionLanguages	object[]	array of available track objects

track:

Property	Type	Description
id	number	an integer identifying the track
language	string	optional: language of track if relevant
label	string	optional: Display name if relevant

getSelectedCaptionLanguage

getSelectedCaptionLanguage()

Get selected caption track

Payload:

Property	Type	Description
selectedCaptionLanguage	object	selected track object

track:

Property	Type	Description
id	number	an integer identifying the track
language	string	optional: language of track if relevant
label	string	optional: Display name if relevant

setCaptionLanguage

setCaptionLanguage(captionLanguage)

Set specified caption track

captionLanguage:

Property	Type	Description
id	number	an integer identifying the track
language	string	optional: language of track if relevant
label	string	optional: Display name if relevant

disableCaptions

disableCaptions()

Disable captions

getDuration

getDuration()

Get video duration

Payload:

Property	Type	Description
duration	number	duration of the video in milliseconds

setAspectRatio

setAspectRatio(aspectRatio)

Set aspect ratio. The height should not be fixed for aspect ratio to work properly.

getPlaybackPropertiesV2

getPlaybackPropertiesV2()

Request additional playback properties

Payload:

Property	Type	Description
playbackProperties	object	PlaybackProperty object

PlaybackProperty:

Property	Type	Description
totalPlayed	number	total played duration in seconds
totalCovered	number	total covered duration in seconds