...
.

VXG Cloud Player (2.1.0)


* To improve streaming please install Adobe Flash Player or enable it in your browser.
.

Documentation

Modules

Requirements

  • jquery-3.1.0.min.js

Conflicts

  • videojs

Copy files from your personal package to your server

  • swf/video-js-by-vxg-buff200.swf
  • swf/video-js-custom-vxg.swf
  • js/vxgcloudplayer-2.1.0-min.js
  • js/vxgcloudplayer-2.1.0-min.css

HTML

Include css + js and configure swf

<head>
...
    <script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="vxgcloudplayer-2.1.0.js"></script>
    <link href="vxgcloudplayer--2.1.0.css" rel="stylesheet"/> 
    <script>
        // configure swf
        vxgcloudplayer.swf_minimal_latency = "swf/video-js-by-vxg-buff200.swf";
        vxgcloudplayer.swf_smoothless = "swf/video-js-custom-vxg.swf";
        vxgcloudplayer.swf = vxgcloudplayer.swf_minimal_latency;

        // after loaded page

        $(document).ready(function() {
            $('#play_url').unbind().bind('click',function(e){
                e.preventDefault();
                vxgcloudplayer('player1').play(e);
            });

            // it's need for customization different play buttons
            vxgcloudplayer.beforePlay = function(player, event){
                player.src('rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov', 'user1', 'password1', event);
                return false;
            }
        });
    </script>
...
</head>

Div element for player

<div class="vxgcloudplayer green black"
    style="width: 640px !important; height: 480px !important;"
    id="player1" 
    width="640"
    height="480"
    url="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov"
    autohide="2"
    volume="0.7"></div>

Attributes:

  • id - unique id of player
  • class must be 'vxgcloudplayer' - for automatically init all players after load body
  • width - width of player, integer
  • height - height of player, integer
  • url - link to rtsp:// or to rtmp:// or to hls:// video
  • autohide - auto hide player controls, in seconds
  • volume - (not implemented) volume, float, Possible values: 0..1
  • latency - (not implemented) latency, integer
  • avsync - (not implemented) if attribute exists then avsync is true. If attribute does not exist then avsync is false
  • controls - (not implemented) panel with player controls. If attribute exists then show controls. If attribute does not exist then hide controls
  • debug - (not implemented) debug mode. If attribute exists then you will see a lot of messages in js console. If attribute does not exist, it will be silent
  • mute - (not implemented) mute audio. If attribute exists then mute. If attribute does not exist then no mute
  • aspect-ratio - (not implemented) if attributes aspect-ratio or aspect-ratio-mode exist then aspectRatio is true
  • aspect-ratio-mode - (not implemented) 1:Fit-to-Screen(default); 2:Crop; 0:Off. If attribute exists then aspectRatio is true
  • auto-reconnect - (not implemented) if attribute auto-reconnect exists then the player will be auto reconnected if any error appears
  • connection-timeout - (not implemented) set connection timeout value, in milliseconds
  • connection-udp - (not implemented) allow UDP connection (by default is off), 0:Off, 1:On
  • custom-digital-zoom - (not implemented) if this option exists then control of digital zoom is disabled and it is allowed to call "setCustomDigitalZoom" method
  • wait-streaming - if this option exists then player will wait for incoming video stream from mobile (you will need to convert current page's link to qr code)
  • backward-audio - enable backward audio channel (disabled by default)

JavaScript Examples

Dynamically create players with options

Put element to your page:

// not implemented yet

Init player and/or find player

var player = vxgcloudplayer('player1');
// where 'player1' - unique id element in document

Play / isPlaying

vxgcloudplayer('player1').play(); // play
vxgcloudplayer('player1').isPlaying() // get play true of false
// or 
var player = vxgcloudplayer('player1');
player.play()
player.isPlaying() // get play true of false

Pause

// Not implemented

Stop

vxgcloudplayer('player1').stop();
// or
var player = vxgcloudplayer('player1');
player.stop()

Autohide

vxgcloudplayer('player1').autohide(2); // set 2 seconds
vxgcloudplayer('player1').autohide(); // get autohide value
// or
var player = vxgcloudplayer('player1');
player.autohide(2); // set 2 seconds
player.autohide(); // get autohide value

Aspect Ratio

// Not implemented

Auto reconnect

// Not implemented

Volume

Syntax volume setter
vxgcloudplayer('player1').volume(val);

Where

  • val - Float, required, value from 0 to 1 (allowed values are 0, 0.1 , 0.2 ... 0.9, 1);
Syntax volume getter
vxgcloudplayer('player1').volume();
Example of set/get volume
// possible value of volume: from 0 to 1
// example
vxgcloudplayer('player1').volume(0.8); // set volume
var vol = vxgcloudplayer('player1').volume(); // get volume
// or
var player = vxgcloudplayer('player1');
player.volume(0.8); // set volume
var vol = player.volume(); // get volume

Size

Syntax size setter
vxgcloudplayer('player1').size(width,height);

Where

  • width - Integer, required, width of player in pixels
  • height - Integer, required, height of player in pixels
Syntax size getter
vxgcloudplayer('player1').size();

Return struct like {width: 0, height 0} - both parameters are integer and in pixels

Example of set new size/get size
vxgcloudplayer('player1').size(1280, 720); // set size
var size = vxgcloudplayer('player1').size(); // get size
console.log('Player width: ' + size.width);
console.log('Player height: ' + size.height);
// or
var player = vxgcloudplayer('player1');
player.size(1280, 720); // set size
var size2 = player.size(); // get size
console.log('Player width: ' + size2.width);
console.log('Player height: ' + size2.height);

Latency

// Not implemented

Source / URL

Syntax source setter
vxgcloudplayer('player1').src({
    type: 'url',
    url: 'rtsp:// or rtmp:// or hls:// link',
    login: '',
    password: '',
    event: event
});

Where

  • type: "url" - String, required, type of source cloud for player, must be "url"
  • url: "rtsp://some-your-link-to-camera/..." - String, required, URI link to video source (rtsp:// or rtmp:// or hls://)
  • login: "" - String, optional, login to video source
  • password: "" - String, optional, password to video source
  • event: event - Event, optional, parameter important for mobiles browsers. In desktop browser it is not important
Syntax source getter
vxgcloudplayer('player1').src();
Examples set/get source
// set src
vxgcloudplayer('player1').src({
    'type': 'url',
    'url': 'rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov',
    'event': event
});

var src = vxgcloudplayer('player1').src(); // get src
// or
var player = vxgcloudplayer('player1');
player.src({
    'type': 'url',
    'url': 'rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov',
    'event': event
});
var src = player.src(); // get src

Error

This method returns last error code or -1 if there were no errors.

var err;
err = vxgplayer('player1').error(); // get error code
// or
var player = vxgcloudplayer('player1');
var err = player.error(); // get error code

// example of handling by code error
switch (err) {
    case vxgcloudplayer.errors.UNDEFINED_TYPE_OF_SOURCE:
        // incorrect type of source
        break
    case vxgcloudplayer.errors.1:
        // MEDIA_ERR_NETWORK
        break
    case vxgcloudplayer.errors.2:
        // MEDIA_ERR_SOURCE
        break
    default:
        // no error
}

// you can see the full list of errors in enum vxgcloudplayer.errors

Show/Hide Custom Error

vxgcloudplayer('player1').showerror('some error'); // show error overlay
vxgcloudplayer('player1').hideerror(); // hide error overlay
// or
var player = vxgcloudplayer('player1');
player.showerror('some error'); // show error overlay
player.hideerror(); // hide error overlay

Controls

// Not implemented

Debug

// Not implemented

Mute / isMute

Toggle method. And Getter

var mute;

vxgcloudplayer('player1').mute(); // toggle mute false -> true and true -> false
mute = vxgcloudplayer('player1').isMute(); // getter
// or
var player = vxgcloudplayer('player1');
player.mute();  // toggle mute false -> true and true -> false
mute = player.isMute(); // get state of mute

Ready State

// Not implemented

Start/Stop Backward Audio

  • In attributes there is the 'backward-audio' tag or Options have backwardAudio: true on create player
  • If camera supports backward - cloud detects this (for more information please contact us).
  • Flash player must be enabled on the page
Syntax start backward audio
vxgcloudplayer('player1').backward_start();
Syntax stop backward audio
vxgcloudplayer('player1').backward_stop();
Examples start backward audio
vxgcloudplayer('player1').backward_start();
// or
var player = vxgcloudplayer('player1');
player.backward_start();
Examples of start backward audio
vxgcloudplayer('player1').backward_stop();
// or
var player = vxgcloudplayer('player1');
player.backward_stop();

Variable camera life time

Each url is mapped to the camera object on the Cloud

Camera Life Time is static variable (Integer, in ms, Default value: 600000ms (~10 min) )
vxgcloudplayer.cameraLifeTime

If you want to use only a specific list of cameras. Please change this value to more than 10 minutes (This will increase the start time).

Example of change camera life time
vxgcloudplayer.cameraLifeTime = 60*60*1000; // 1 hour

Version

Version is static variable (String)
vxgcloudplayer.version
Example of version get
var version_of_player = vxgcloudplayer.version;

Wait start stream

WaitStartStream is global variable (integer, in second)
vxgcloudplayer.timeWaitStartStream
  • Default value of 60 sec

Player stops and throws error vxgcloudplayer.errors.STREAM_IS_NOT_REACHABLE, when there is no data from current stream.

Callback onReadyStateChange

This callback means that player is connected to cloud and ready for work. (It's mean that we have api token for the cloud)

Syntax ready state handler (for compatibility)
vxgcloudplayer.onReadyStateChange(callback)

Where callback - function with 0 in-params

Syntax ready state handler (same loggined)
vxgcloudplayer.bind('loggined', callback)

Where callback - function with 0 in-params:

Callback onStateChange

Syntax state change
vxgcloudplayer(playerId).onStateChange(callback)

Where callback - function with 2 in-params:

  1. player - Object, instance of vxgcloudplayer
  2. error - Integer, value one from list vxgcloudplayer.states
Examples set error handler (for compatibility)
vxgcloudplayer('player1').onStateChange(function(plr, error){
    console.log("Player state " + error);
});

Callback onError

Syntax error handler (for compatibility)
vxgcloudplayer(playerId).onError(callback)

Where callback - function with 2 in-params:

  1. player - Object, instance of vxgcloudplayer
  2. error - Integer, value one from list vxgcloudplayer.errors
Syntax error handler
vxgcloudplayer.bind('error', callback);

Where callback - function with 2 in-params:

  1. player - Object, instance of vxgcloudplayer
  2. error - Integer, value one from list vxgcloudplayer.errors
Examples set error handler (for compatibility)
vxgcloudplayer('player1').onError(function(plr, error){
    console.error("PlayerID: " + plr.id + ", ErrorCode " + error);
});
// or
var player = vxgcloudplayer('player1');
player.onError(function(plr, error){
    console.error("PlayerID: " + plr.id + ", ErrorCode " + error);
});
Examples set error handler
// or you can set global error handler (Please set once)
vxgcloudplayer.bind('error', function(plr, error){
    console.error("PlayerID: " + plr.id + ", ErrorCode " + error);
});

Callback onBandwidthError

// Not implemented

Enum player states

  • vxgcloudplayer.states.PLAYER_CONNECTING = 0;
  • vxgcloudplayer.states.PLAYER_PLAYING = 1;
  • vxgcloudplayer.states.PLAYER_STOPPING = 2;
  • vxgcloudplayer.states.PLAYER_STOPPED = 3;
.

FAQ

Localhost + MS Edge Browser

When vxg cloud player not work for localhost:
  • 1. open in new tab "about:flags"
  • 2. Allow localhost loopback for Adobe Flash Player
  • 3. Restart browser

The latency is much bigger

Please check in player settings that player used Flash, it it's not true than:
.

ChangeLog

v2.0.6 - 2017 Aug 7

  • Removed supporting code v1
  • Fixed player autostart for sharing urls

v2.0.5 - 2017 Jule 12

  • Forced show message for install/enable Adobe Flash Player if got code 4 from videojs
  • Fixed hls stopping on IE11
  • Fixed error icon size for IE11
  • Added backward audio support

v2.0.4 - 2017 Jule 11

  • Fixed fullscreen in IE 11
  • Fixed loadLiveUrls when camera ID is 0
  • On load will be force login (ignore token from localstorage)
  • Added wait-streaming parameter

v2.0.3 - 2017 Jule 7

  • Fixed bug for IE 11.1066

v2.0.2 - 2017 Jule 6

  • Implemented onReadyStateChage
  • Implemented onStateChage
  • Changed algorithm for check public ip
  • Added description "camera life time" to documentation
  • Fixed bug for Firefox

v2.0.1 - 2017 Jule 5

  • Added global variable vxgcloudplayer.timeWaitStartStream
  • Implemneted wait for stream start (default 60 sec)
  • Added new types errors: vxgcloudplayer.errors.STREAMISNOTREACHABLE, vxgcloudplayer.errors.STREAMISNOTREACHABLE_HLS
  • Fixed style for live-time-counter

v2.0.0 - 2017 Jule 3

  • Redesign qrcode content (code v2) for player source streaming and source playing
  • Fixed parsing urls

v1.2.6 - 2017 June 30

  • Started documentation
  • Redesign method 'src'
  • Added method for set callback onError
  • Added event handler vxgcloudplayer.bind('error', function(plr,error){});

v1.2.1 - 2017 May 25

  • Fixed 404 on request get server time (on load page)

v1.2.0 - 2017 Apr 25

  • created changelog