Skip to main content

React-native SDK

Latest version: 1.9.1

Documentation and example app

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

Currently, this sdk supports only the android platform. iOS is not supported.

Getting started

See the installation instructions in the official github repo.

Integrating video playback

Launch video in a fullscreen player

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

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

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 ยป.

Open player in fullscreen view

Let's create two functions to toggle hidden and shown state of all the components except for the VdoPlayerView. Also set the height of VdoPlayerView as 100% on entering the fullscreen mode and reset it back on exit from the fullscreen.

In case of player with Custom Controls check fullscreen sample here ยป

Here is the sample code to perform fullscreen mode

// JSX
<VdoPlayerView
style={isFullscreen ? styles.playerFullscreen : styles.player}
embedInfo={embedInfo}
showNativeControls={false}
/>
{ !isFullscreen &&
<Text>
The ui controls for the player are embedded inside the native view
</Text>
}

const styles = StyleSheet.create({
player: {
height: 200,
width: '100%',
},
playerFullscreen: {
height: '100%',
width: '100%',
},
});
// JS
_onEnterFullscreen = () => {
this.setState({isFullscreen: true});
}

_onExitFullscreen = () => {
this.setState({isFullscreen: false});
}

VdoPlayerView props

VdoPlayerView event based props

VdoPlayerView methods

Props

embedInfo

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.

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

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

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:

PropertyTypeDescription
errorDescriptionobjecterror details

errorDescription:

PropertyTypeDescription
errorCodenumberan integer identifying the error
errorMsgstringshort message description of the error
httpStatusCodenumberhttp 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:

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

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

Callback function invoked to provided playback time updates.

Payload:

PropertyTypeDescription
currentTimenumbercurrent playback time in milliseconds

onBufferUpdate

Callback function invoked to provide buffered time updates.

Payload:

PropertyTypeDescription
bufferTimenumbercurrent buffered time in milliseconds

onPlaybackSpeedChanged

Callback function invoked when playback speed changes.

Payload:

PropertyTypeDescription
playbackSpeednumbercurrent playback speed

onTracksChanged

Callback function invoked when available or selected track changes.

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

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:

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

Callback function invoked when the player enters fullscreen.

onExitFullscreen

Callback function invoked when the player exits fullscreen.

onPlaybackProperties

Callback function invoked when additional playback properties are requested using the getPlaybackProperties method.

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

enterFullscreen

enterFullscreen()

Enter fullscreen mode.

exitFullscreen

exitFullscreen()

Exit fullscreen mode.

getPlaybackProperties

getPlaybackProperties()

Request additional playback properties. The callback onPlaybackProperties is invoked with the results.