Overview

The Web Player SDK is a part of VXG Cloud and VXG Server. It consists of JS, CSS and HTML scripts to help integrating an HTML5 Player with VXG Cloud and VXG Server.

Quick Start

Add the following code to the < head > section of your web page.

<head>
<!-- begin includes and script start for CloudPlayerSDK -- >
<link rel="stylesheet" type="text/css" href="2.0.51/videojs-5.18.3.min.css">
<script type="text/javascript" src="2.0.51/videojs-5.18.3.min.js"></script>
<script type="text/javascript" src="2.0.51/videojs-contrib-hls.min.js"></script>
<script type="text/javascript" src="2.0.51/moment.min.js"></script>
<script type="text/javascript" src="2.0.51/moment-timezone-with-data-2012-2022.min.js"></script>
<link rel="stylesheet" type="text/css" href="2.0.51/CloudSDK.min.css">
<script type="text/javascript" src="2.0.51/CloudSDK.min.js"></script>
<script type="text/javascript" src="2.0.51/webrtc-adapter-latest.js"></script>
<script type="text/javascript">
    CloudSDK.flashswf = "2.0.51/swf/video-js-by-vxg-buff200.swf";
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    window.player = window.player || new CloudPlayerSDK('player1', {
        // options
    });

    // Please replace the access token below with an access token that your received either
    // 1) Using Admin UI (i.e https://dashboard.videoexpertsgroup.com/?streaming=) or
    // 2) Using Admin API function POST /v3/channels/
    var access_token = 'eyJ0b2t....In0=';
    player.setSource(access_token);
    player.play();
});
</script>
<!-- end includes and script start for CloudPlayerSDK -- >
</head>

Add the following element to the < body > section of your web page

<body>
    <div id="player1"></div>
</body>

Class CloudPlayerSDK

IMPORTANT: An access token should be used in the API below that was obtained either using the Admin UI or the Admin API.

Cloud Player SDK features:

CloudPlayerSDK(elid, options)

Description
Constructs a player object.

Parameters:

Note: if option 'useOnlyPlayerFormat' is used then preferredPlayerFormat will be ignored

Return values
Returns a new player object

Usage:

HTML + Inline script:

<div id="player1"></div>
<div id="timeline1"></div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        window.player = new CloudPlayerSDK('player1', {
            timeline: 'timeline1',
        });
    })
</script>

setSource(access_token)

Description
Sets an access token of a channel that the player will be working with.

Parameters
access_token - access token of a channel

Return values
No return value

Usage:

player = new CloudPlayerSDK("player");
var access_token = "eyJ0b2tlbiI6InNoYXJlLmV5SnphU0k2SURFNE0zMC41YTQwYzQ2NXQxMmNmZjc4MC5rNlIxWHdjX2ptUjRZSFU5QV9xSVFHc2liX2MiLCJjYW1pZCI6MTMxMDY0LCJhY2Nlc3MiOiJ3YXRjaCJ9";
player.setSource(access_token);

getSource()

Description
Returns the current access token of a channels that the player was previously configured to work with.

Parameters
No parameters

Return values
access_token - access token of a channel

Usage:

String access_token = player.getSource();

play()

Description
Resume playback if the player was in a pause state.

Parameters
No input parameters

Return values
No return values

Usage:

mPlayer.play();

stop()

Description
Stop playback and change the state to pause.

Parameters
No input parameters

Return values
No return values

Usage:

player.stop();

destroy()

Description
Close player and free all resources (before was 'close')

Parameters
No input parameters

Return values
No return values

Usage:

player.destroy();

setRange(startPos, endPos)

Description
Sets the range of the timeline (if enabled)

Parameters
startPos - integer, the left border of timeline (time in ms, UTC) endPos - integer, the right border of timeline (time in ms, UTC)

Return values
No return value

Usage:

player = new CloudPlayerSDK("player");
var access_token = "eyJ0b2tlbiI6InNoYXJlLmV5SnphU0k2SURFNE0zMC41YTQwYzQ2NXQxMmNmZjc4MC5rNlIxWHdjX2ptUjRZSFU5QV9xSVFHc2liX2MiLCJjYW1pZCI6MTMxMDY0LCJhY2Nlc3MiOiJ3YXRjaCJ9";
player.setSource(access_token);
player.setRange(
    CloudHelpers.getCurrentTimeUTC() - 20*60*1000, // current time - 20 minutes
    CloudHelpers.getCurrentTimeUTC() + 20*60*1000, // current time + 20 minutes
)

resetRange(startPos, endPos)

Description
Resets current time range

bool isPlaying()

Description
Return current status

Parameters
No input parameters

Return values
Returns true if the status is play, and false if the status is pause.

Usage:

bool status = player.isPlaying();
if (status == true)
 // Player plays video

setPosition(position)

Description
Sets position in a storage and switches between live and recorded video playback. The player should be in 'pause' state (stop() shoudl be called first).

Parameters
position - position in Unix time. There is a predefined value for switching to live: CloudPlayer.POSITION_LIVE

Return values
No return value

Usage:

Usage 1:

// Go to to live  
player.stop();
player.setPosition(CloudPlayer.POSITION_LIVE);
player.play();

Usage 2:

// Playback video from the position equal to 1505001599476
player.stop();
player.setPosition(1505001599476);
player.play();

Usage 3:

// Playback video from a specified date and time 2017-09-09T23:59:59
player.stop();
var time = CloudHelpers.parseUTCTime("2017-09-09T23:59:59")
player.setPosition(time);
player.play();

long getPostion()

Description
Returns current playback position for video from the storage or current UTC time for live video.

Parameters
There are no input parameters

Return values
Position in storage or UTC time in Unix time.

Usage:

Usage 1:

if (mPlayer.isLive() == false )
{
var position = player.getPosition(CloudPlayer.POSITION_LIVE);
// Handle playback position
}

void showTimeline (bool)

Description
Show or hide the timeline.

Parameters
True - show the timeline, false - hide the timeline.

Return values
No return value

Usage:

// Show timeline  
player.showTimeline(true);
// Hide timeline  
player.showTimeline(false);

getChannelName()

Description
Returns the channel name

Backward Audio

CloudStreamerSDK

public boolean enableBackwardAudio( ICloudStreamerBackwardAudioCallback callback);  //on
public void disableBackwardAudio();  //off
public boolean isSupportBackwardAudio(); //if BackwardAudio is supported or not

public interface ICloudStreamerBackwardAudioCallback {
    public void onBackwardAudioStarted( String rtmp_url); //Cloud is ready to receive data
    public void onBackwardAudioStopped( ); //Cloud stopped receiving data
}

CloudPlayerSDK

public String getBackwardAudioUrl(); //get backward audio URL

Enum CloudReturnCodes

Return codes and error codes.

player.onError(function(err){
    console.error("Error Name: " + err.name);
    console.error("Error Code: " + err.code);
    console.error("Error Text: " + err.text);
});
Name Code Description
OK 0 Success
OK_COMPLETIONPENDING 1 Operation is pending
ERROR_NOT_IMPLEMENTED -1 Function or method not implemented
ERROR_NOT_CONFIGURED -2 Object not configured
ERROR_NO_MEMORY -12 Out of memory
ERROR_ACCESS_DENIED -13 Access denied
ERROR_BADARGUMENT -22 Invalid argument
ERROR_STREAM_UNREACHABLE -5049 The stream is not reachable. Please double check the URL address and restart the stream
ERROR_EXPECTED_FILTER -5050 Expected filter
ERROR_NO_CLOUD_CONNECTION -5051 No cloud connection (there is no connection object or token is invalid)
ERROR_WRONG_RESPONSE -5052 Response from cloud is expected in json, but we got something else
ERROR_SOURCE_NOT_CONFIGURED -5053 Source not configured
ERROR_INVALID_SOURCE -5054 Invalid source
ERROR_RECORDS_NOT_FOUND -5055 Records not found
ERROR_NOT_AUTHORIZED -5401 Failed authorization on cloud (wrong credentials)
ERROR_NOT_FOUND -5404 Object not found

Or you can print all errors use browser console for developmant:

console.log(CloudReturnCode)