Documentation

Installation

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

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 playback of videos, uploading of new videos to the server and provide abilities to pass recording to mobile VKit using QR code.

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:

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:

Callback function will be called with 2 arguments:

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:

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.