Skip to main content

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 Android

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 { *; }
  1. 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

VdoPlayerView event based props

VdoPlayerView methods

Props

embedInfo Android iOS

PropertyTypeDescription
otpstringgenerated otp for a video playback.
playbackInfostringplaybackInfo for a video playback.
forceLowestBitratebooleanwhether to force lowest bitrate, default: false.
forceHighestSupportedBitratebooleanwhether to force highest supported bitrate, default: false.
maxVideoBitrateKbpsnumbermaximum allowed video bitrate (in kbps).
bufferingGoalMsnumberbuffering goal in milliseconds, NOT recommended to change this value for most use cases; cannot be set to a value less than 15000
enableAutoResumebooleanwhether to auto resume the video from last watched position or play from the beginning, default: false.
preferredCaptionsLanguagestringlanguage code for the preferred captions language
resumeTimeMsnumberto specify the time from where the resume should occur
customPlayerIdstringplayer configuration id from dashboard to be used for player

showNativeControls Android iOS

Controls whether natively embedded player controls are shown.

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

playWhenReady Android iOS

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 Android iOS

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 Android

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 Android iOS

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 Android iOS

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:

PropertyTypeDescription
errorDescriptionobjecterror details

errorDescription:

PropertyTypeDescription
errorCodenumberan integer identifying the error
errorMsgstringshort message description of the error
httpStatusCodenumberhttp status code if relevant, -1 otherwise

onLoading Android iOS

Callback function invoked when a new video starts loading.

onLoaded Android iOS

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

onLoadError Android iOS

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

The error details are provided in the payload under errorDescription.

Payload:

PropertyTypeDescription
errorDescriptionobjecterror details
embedInfoobjectembedInfo for which the error occurred

errorDescription:

PropertyTypeDescription
errorCodenumberan integer identifying the error
errorMsgstringshort message description of the error
httpStatusCodenumberhttp status code if relevant, -1 otherwise

onPlayerStateChanged Android iOS

Callback function invoked when player state changes.

Payload:

PropertyTypeDescription
playerStatestringone of 'idle', 'buffering', 'ready' or 'ended'
playWhenReadybooleanwhether playback will progress if playerState is 'ready'

onProgress Android iOS

Callback function invoked to provided playback time updates.

Payload:

PropertyTypeDescription
currentTimenumbercurrent playback time in milliseconds

onBufferUpdate Android

Callback function invoked to provide buffered time updates.

Payload:

PropertyTypeDescription
bufferTimenumbercurrent buffered time in milliseconds

onPlaybackSpeedChanged Android iOS

Callback function invoked when playback speed changes.

Payload:

PropertyTypeDescription
playbackSpeednumbercurrent playback speed

onTracksChanged Android iOS

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

Payload:

PropertyTypeDescription
availableTracksobject[]array of available track objects
selectedTracksobject[]array of currently selected track objects

track:

PropertyTypeDescription
idnumberan integer identifying the track
typestringone of 'audio', 'video', 'captions', 'combined' or 'unknown'
languagestringoptional: language of track if relevant
bitratenumberoptional: bitrate in bps if relevant
widthnumberoptional: width resolution if relevant
heightnumberoptional: height resolution if relevant otherwise
labelstringoptional: Display name if relevant

onMediaEnded Android iOS

Callback function invoked when a video reached end of playback.

onError Android iOS

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

The error details are provided in the payload under errorDescription.

Payload:

PropertyTypeDescription
errorDescriptionobjecterror details
embedInfoobjectembedInfo for which the error occurred

errorDescription:

PropertyTypeDescription
errorCodenumberan integer identifying the error
errorMsgstringshort message description of the error
httpStatusCodenumberhttp status code if relevant, -1 otherwise

onEnterFullscreen Android iOS

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

onExitFullscreen Android iOS

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

onPictureInPictureModeChanged Android

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

Payload:

PropertyTypeDescription
isInPictureInPictureModebooleanis 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 Android iOS

seek(seekTargetMs)

Set the seek target in milli seconds

enterFullscreenV2 Android iOS

enterFullscreenV2()

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

exitFullscreenV2 Android iOS

exitFullscreenV2()

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

isAdaptive Android iOS

isAdaptive()

Check whether the video is in adaptive mode or not

getVideoQualities Android iOS

getVideoQualities()

Get available video tracks

Payload:

PropertyTypeDescription
videoQualitiesobject[]array of available track objects

track:

PropertyTypeDescription
idnumberan integer identifying the track
bitratenumberoptional: bitrate in bps if relevant
widthnumberoptional: width resolution if relevant
heightnumberoptional: height resolution if relevant otherwise

getSelectedVideoQuality Android iOS

getSelectedVideoQuality()

Get selected video track

Payload:

PropertyTypeDescription
selectedVideoQualityobjectselected track object

track:

PropertyTypeDescription
idnumberan integer identifying the track
bitratenumberoptional: bitrate in bps if relevant
widthnumberoptional: width resolution if relevant
heightnumberoptional: height resolution if relevant otherwise

setVideoQuality Android iOS

setVideoQuality(videoQuality)

Set specified video track

videoQuality:

PropertyTypeDescription
idnumberan integer identifying the track
bitratenumberoptional: bitrate in bps if relevant
widthnumberoptional: width resolution if relevant
heightnumberoptional: height resolution if relevant otherwise

enableAdaptiveVideo Android iOS

enableAdaptiveVideo()

Run video in adaptive mode

getSelectedAudioQuality Android

getSelectedAudioQuality()

Get selected audio track

Payload:

PropertyTypeDescription
selectedAudioQualityobjectselected track object

track:

PropertyTypeDescription
idnumberan integer identifying the track
bitratenumberoptional: bitrate in bps if relevant
widthnumberoptional: width resolution if relevant
heightnumberoptional: height resolution if relevant otherwise

getCaptionLanguages Android iOS

getCaptionLanguages()

Get available caption tracks

Payload:

PropertyTypeDescription
captionLanguagesobject[]array of available track objects

track:

PropertyTypeDescription
idnumberan integer identifying the track
languagestringoptional: language of track if relevant
labelstringoptional: Display name if relevant

getSelectedCaptionLanguage Android iOS

getSelectedCaptionLanguage()

Get selected caption track

Payload:

PropertyTypeDescription
selectedCaptionLanguageobjectselected track object

track:

PropertyTypeDescription
idnumberan integer identifying the track
languagestringoptional: language of track if relevant
labelstringoptional: Display name if relevant

setCaptionLanguage Android iOS

setCaptionLanguage(captionLanguage)

Set specified caption track

captionLanguage:

PropertyTypeDescription
idnumberan integer identifying the track
languagestringoptional: language of track if relevant
labelstringoptional: Display name if relevant

disableCaptions Android iOS

disableCaptions()

Disable captions

getDuration Android iOS

getDuration()

Get video duration

Payload:

PropertyTypeDescription
durationnumberduration of the video in milliseconds

setAspectRatio Android

setAspectRatio(aspectRatio)

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

getPlaybackPropertiesV2 Android iOS

getPlaybackPropertiesV2()

Request additional playback properties

Payload:

PropertyTypeDescription
playbackPropertiesobjectPlaybackProperty object

PlaybackProperty:

PropertyTypeDescription
totalPlayednumbertotal played duration in seconds
totalCoverednumbertotal covered duration in seconds