Rev JavaScript SDK

This is Vbrick's JavaScript SDK library that enables you to embed Vbrick Rev webcasts and videos (also known as Video on Demand or VOD) on your website, portal, or any web-based application using JavaScript code. The SDK supports interaction with the webcast, video and playlist embedded players.

Demo Page

- Demo Page

Auto-Generated Documentation

- API Reference

Accessing the SDK

The JavaScript SDK can be accessed via


~~~

#### Install using npm

If you use npm, then you can run
~~~
npm install @vbrick/rev-sdk
~~~

#### Building The SDK Locally

~~~
npm install
npm run build
~~~

Embedding a Webcast

On your web page, you can insert an embedded webcast using an empty div tag. You will have to reference the div id when you interact with the SDK.

#### Invoking Webcast
Embedding a webcast requires you to pass the following parameters to the embedWebast function

* Either a CSS selector string or HTML div element where the embed content will be rendered
* Rev Webcast Id
* Webcast Config which consists of the following individual parameters
* token (type=object, Required): Token for the user who is watching the webcast, which can be unique for each embed
* type (type=string, Required): Set to 'JWT' for JSON Web Token, 'AccessToken' for an OAuth or API token, or 'GuestRegistration' for a token generated using the Guest Registration APIs.
* value (type=string, Required): Value of the token
* issuer (type=string): Issuer of the token.
* baseUrl (type=string, Required): Your Rev URL
* className (type=string, Optional): CSS classes if you want to include to the embed iFrame
* width (type=string, Optional): iframe width if you want to overwrite the default responsive behavior
* height (type=string, Optional): iframe height if you want to overwrite the default responsive behavior
* showVideo (type=boolean, Optional, Default:true): to control display of video player or not. It's more useful for future release once we add Webcast Q&A, Polls, Chat features to the SDK.
* log (type=boolean, Optional, Default:false): If set to true, you can get additional browser console log. You may need additional logging during your development and troubleshooting

~~~
const webcastId = '<>';
const jwtToken = {
type: 'JWT',
issuer: '<>',
value: '<>'
};
const webcast = revSdk.embedWebcast('#embed', webcastId, {
baseUrl: 'https://<>',
token: jwtToken,
log: true
});
~~~

#### Listening to Webcast Events
You can listen for events in the webcast by adding a callback using .on(). See example below

~~~
webcast.on('broadcastStarted', function() {
// handle this event
});
~~~

#### Supported Webcast Events

* broadcastStarted
* broadcastStopped
* webcastStarted
* webcastEnded
* error

##### Stop Listening to Events

You can stop listening for the events using .off(). See example below

~~~
webcast.off('broadcastStarted', handlerFunction);
~~~

##### Get Webcast Status
You can get the status of the webcast using status variable. See example below

const webcastStatus = webcast.webcastStatus;

#### Webcast Status Values
* Broadcasting
* Completed
* Error
* InProgress
* Loading
* Scheduled

##### Removing Webcast
You can remove the webcast from the DOM by calling destroy method.

webcast.destroy();

Embedding a Video

You can embed a video just like a webcast using an empty div tag.

Use the embedVideo method to display the video on your web page:

``
const videoId = '01234567-89AB-CDEF-0123-456789ABCDEF';
const token = {
type: 'AccessToken',
issuer: 'vbrick',
value: '<>'
};

const vbrickEmbed = revSdk.embedVideo('#embed', videoId, {
log: true,
token,
baseUrl: 'https://<>',
});
`

Use the .on method to watch for events about the video:

`
const onVideoLoaded = data => console.log(Video loaded: ${JSON.stringify(data)});

vbrickEmbed.on('videoLoaded', onVideoLoaded);
`

Use the .off method to stop listening for events:

`
vbrickEmbed.off('videoLoaded', onVideoLoaded);
`

##### Control the player using external commands:

`
vbrickEmbed.play();
vbrickEmbed.pause();
vbrickEmbed.setVolume(0.5);
`

##### Supported Video Events

* videoLoaded
* playerStatusChanged
* Buffering
* Ended
* Initializing
* Paused
* Playing
* Seeking
* volumeChanged
* seeked
* error

##### Video Config Example

`
{
"accentColor": "ff0000",
"autoplay" : true,
"forcedCaptions": false,
"hideCaptions": false,
"hideChapters" : false,
"hideFullscreen": false,
"playInLoop": true,
"hideOverlayControls": false,
"hidePlayControls": false,
"hideSettings": false,
"popOut": false,
"startAt": "00m10s"
}
`

##### Get Video Status
You can get the status of the video using status variable, this reflects the latest playerStatusChanged event. See example below

vbrickEmbed.playerStatus;

##### Removing Webcast
You can remove the webcast from the DOM by calling destroy method.

##### Removing Video
You can remove the video from the DOM by calling destroy method.

vbrickEmbed.destroy();`