Setup

You can include VKit on your page using several different ways, depending on your needs:

• Include it from video.io CDN server

• Download VKit files and load them from your server.

• Include VKit via npm module

If you load VKit asynchronously, you can use global function VKitAsyncInit, that will be called when VKit is loaded.

window.VKitAsyncInit = function() {
    // You can use VKit here
};

After that VKit will be available into global scope under VKit namespace or if you installed it as npm module, it will be scoped to the module. You also need to make sure that you loaded VKit CSS file in case if you installed VKit as npm module or loaded it from your server.

Authorization

To start using VKit you need to authorize it with your application ID and session token, we have Account service for these purposes. Also Account allows you control session on video.io during VKit usage. You can initialize VKit using Account.startSession method.

Account.startSession({
    appId: 'YOUR_APP_ID',
    authToken: 'YOUR_AUTH_TOKEN'
});

Or you can do that by passing of authorization parameters to the script source.

Auth token should be generated by your server using secret key of your application and video.io Session API. Alternatively, if you don't have your own server yet, but you want to try VKit, you can use your secret token for authorization in JavaScript VKit, by passing of secretToken parameter to script source or by passing it to Account.startSession method.

Account.startSession({
    appId: 'YOUR_APP_ID',
    secretToken: 'YOUR_SECRET_TOKEN'
});

You should use secret token in VKit only for testing or development purposes and should never used it in production.

For more details about Account properties, methods and event see its API reference.

VideoStore

VideoStore service is responsible for management of your application videos. Using this service you can fetch, create, update, delete or subscribe on new videos from the server API. For more details see API reference.

UI components

UI components are responsible for representation of video.io content.

To create UI components you could use component class:

new Player(document.getElementById('player'), {
    video: "b11987bd-0ca1-4b1e-af48-cbc9afe42c91",
    autoPlay: true
});

Or special HTML tags, e.g.:

<vkit-player data-video="b11987bd-0ca1-4b1e-af48-cbc9afe42c91" data-auto-play="true" />

These HTML tags will be initialized automatically when VKit and DOM is loaded. If you inserted UI component tag after page loading, then you need to call UI.init method to let VKit know that you inserted new tag, that should be initialized. Parameters of UI component for custom HTML tags should be passed as data attributes.

List of components

Name	Tag name	Description
Player	vkit-player	Player component allows you to play single video or video playlist
Upload	vkit-upload	Upload component allows you to upload new videos
QR code	vkit-qrcode	QR code component allows you to record new videos using mobile VKit

For more information about functionality, settings, methods and events of each UI component see API Reference.

Async methods

Most of the VKit components contain methods and some of them can be asynchronous. All such methods return promise object in accordance with Promises/A+ specification.

Example

VideoStore
    .getVideo('b11987bd-0ca1-4b1e-af48-cbc9afe42c91')
    .then(function(video) {
        // Handle video
    })
    .catch(function(error) {
        // Handle error
    });

If you prefer to use callback function, you can pass it as the last argument of async methods, and when execution completes, callback function will be called with response object. Response object has 2 properties:

• success Boolean Boolean flag, that indicate whether execution was successful or not

• data * Response data

Example

VideoStore.getVideo('b11987bd-0ca1-4b1e-af48-cbc9afe42c91', function(response) {
    if (response.success === true) {
        // Handle video from response.data
    } else {
        // Handle error from response.data
    }
});

Events

Services and UI components of VKit can trigger events for more convenient interaction with them. All services and instances of UI components have subscribe and unsubscribe methods, which take 2 arguments:

• eventName String - Name of event (can be: event, namespace of several events or * for all events from this component)

• callback Function - Callback function

Callback function will be called with 2 arguments:

• eventName String - Name of triggered event, can be useful for subscription on namespace or all events from component

• data * - Optional arguments with data of triggered event

Examples

Subscription on particular event:

Account.subscribe('statechange', function(eventName) {
    console.log('Account state changed');
});

Subscription on upload namespace of Upload component:

const upload = new Upload(document.getElementById('upload'), parameters);

player.subscribe('upload', function(eventName, data) {
    if (eventName === 'upload.start') {
        console.log('Uploading is started');
    } else if (eventName === 'upload.progress') {
        console.log(`Uploaded ${data}%`);
    }
});

Subscription on all events of Player component:

const player = new Player(document.getElementById('player'), parameters);

player.subscribe('*', function(eventName, data) {
    console.log(`New player event: ${eventName}%`);
});

Full list of events and their data for each component can be found in API Reference.

Errors

All errors generated by VKit represent custom Error object. Each error has following properties:

• name String - Name of error, it is equal to error class name. Could be used for handling of specific errors in global handler.

• message String - A human-readable description of the error.

Examples

Account.subscribe('error', function(eventName, error) {
    if (error.name === 'InvalidToken') {
        console.log('Authorization token is invalid')
    }
});

Full list of errors generated by VKit can be found in API Reference.

What's Next

Once we do all of these we can start using VKit components. Here's you can find the Components Overview.