Ivideon Web SDK

Changelog 3
Introduction 4
Supported browsers and platforms 4
Quick start 4
Sample code 4
Demo application 6
See the demo application online 6
Building the demo application 6
SDK API Guide 8
Initialization 8
Integrating the SDK with your web application 8
Changes made to the environment 8
Initializing the SDK 8
Authenticating the SDK to access Ivideon API 9
Event handling API 10
StandaloneWebSdkCamera 11
Creating a camera 11
Finding a closest archive record timestamp 12
StandaloneWebSdkPlayer 13
Creating a player 13
Starting the live playback 15
Starting the archive playback 16
Controlling the playback 17
Controlling the sound volume 18
Changing video rotation 18
Cleaning up 18
Other 18
StandaloneWebSdkTimeline 18
Creating a timeline 19
Binding the timeline to a camera to display archive records 20
Binding the timeline to a player to display playback state 20
Handling a timeline time click to play the corresponding video 20
Controlling the timeline time span 21
 Cleaning up 21
StandaloneWebSdkCalendar 21
Creating a calendar 22
Binding the calendar to a camera to display archive records 22
Controlling the calendar selected day 22
Cleaning up 22
Internationalization API 22
Selecting a language and a locale 22
Adding a custom translation 23
Changelog
Version Date Changes

1.0.0 26 February 2019 [Feature] Added support for signed video and preview requests (see hmac_secret param in
configureWithCloudApiAuthResponse() ).
[Feature] The set of default player controls now supports video quality and speed selection.
[Feature] Default player controls can now be enabled or disabled individually (see defaultControls param in
createPlayer() ).
[Improvement] Demo application added! Now you can see a live example of Ivideon Web SDK (see the Demo application
section below).
[Bugfix] Fixed broken sound playback: SDK was not playing sound at all, and now it will. However, if you want to opt out
of this and disable sound, see soundEnabled param in createCamera() . It will also guarantee autoplay permissions for
your video, as some browsers forbid autoplay for videos with sound.
[Docs] Documentation overhauled, updated and corrected. Added info on new options and demo application.

0.19.1 12 December 2018 [Feature] Added WebRTC support (now WebRTC engine can be selected when creating a video player).
[Feature] Now you can limit archive search interval (see playArchive() method).
[Change] This SDK now uses Ivideon OpenAPI to communicate with the video streaming service.
If you were using streaming.ivideon.com as api_host value, please provide api_host returned to you with the
OpenAPI access token.
If you were using your own streaming service, you need to update its API to match that of Ivideon OpenAPI.
[Docs] Added a note about public video playback.

0.18.0 27 August 2018 [Feature] Added support for German, Spanish, French, Italian, Japanese, Portuguese, Russian and Turkish languages.
[Docs] Updated i18n documentation. Added info on creating custom translations.

0.17.0 05 June 2018 [Feature] Now a specific player engine can be manually selected when creating a video player (see playerEngine param
in the createPlayer() method).

0.16.0 21 May 2018 [Feature] Added getClosestArchivePlaybackTime() method.

0.15.8 05 February 2018 [Improvement] If api_host does not contain scheme, it will be prefixed with https:// .
 Version Date Changes

0.15.7 30 November 2017 [Bugfix] Error messages on iOS were not displayed properly.

0.15.6 02 November 2017 [Bugfix] When using HLS engine after pausing archive video playhead stopped updating.

0.15.5 05 October 2017 [Bugfix] api_host param in configureWithCloudApiAuthResponse() method was not handled properly.

0.15.4 23 June 2017 [Improvement] HLS.js engine updated to version 0.7.4.

Introduction
The SDK provides a set of APIs and UI components to integrate a web application with Ivideon Server and Cloud software.

Supported browsers and platforms

Ivideon Web SDK supports the latest versions of popular web browsers:

On Windows: Chrome, Internet Explorer, Microsoft Edge, Firefox, Opera.

On Mac OS X (macOS): Chrome, Safari.
On Linux: Chrome, Firefox.
On iPhone, iPad with iOS not lower than 7.1: Safari and Chrome for iOS.
On Android not lower than 4.0: Chrome for Android.

Ivideon recommends to ensure the customers have the automatic browser updates enabled.

Ivideon recommends Chrome with automatic updates enabled for its stability and reliability on every platform.

Quick start

Sample code
The code below demonstrates basic Ivideon Web SDK usage: a player is added to a page, and video playback is started for a public camera.

<!DOCTYPE html>
<html>
<head>
<title>Ivideon WEB SDK example</title>
<link rel="stylesheet" href="/vendor/ivideon-web-sdk-1.0.0/iv-standalone-web-sdk.css" />
<script src="/vendor/ivideon-web-sdk-1.0.0/iv-standalone-web-sdk.js"></script>
</head>
<body>
<div class="myapp-player-container" style="max-width: 640px;"></div>

<script>
_ivideon.sdk.init({
rootUrl: 'https://<your-domain>/vendor/ivideon-web-sdk-1.0.0/',
i18nOptions: {
availableLanguages: [
'de',
'en',
'fr',
],
language: 'en',
}
}).then(function (sdk) {
sdk.configureWithCloudApiAuthResponse({
api_host: 'openapi-alpha.ivideon.com',
access_token: 'public',
});

// `id` used below is not an actual camera ID. Replace it with your own.
var camera = sdk.createCamera({
id: '100-481adxa07s5cgd974306aff47e62b639:65536',
cameraName: 'Demo Cam',
imageWidth: 800,
imageHeight: 450,
soundEnabled: true,
 });

var player = sdk.createPlayer({

container: '.myapp-player-container',
camera: camera,
defaultControls: true,
playerEngine: sdk.playerEngines.PLAYER_ENGINE__WEBRTC,
});

player.playLive();

}, function (error) {
console.error(error);
});
</script>
</body>
</html>

Demo application
To get a better understanding of how to use Ivideon Web SDK with a UI library we distribute it with a demo application. Based on create-react-app, it showcases
the use of WEB SDK with ReactJS.

See the demo application online

You can see our demo application online at https://go.ivideon.com/web-sdk-demo.

Building the demo application

Requirements:

Node.js 8.x or higher with NPM 6.x or higher.

To launch demo application follow the next steps:

1. Create folder on your hard-drive (e.g. ivideon-sdk).

2. Extract the contents of the ZIP archive with Ivideon SDK to ivideon-sdk folder.
3. Open terminal and run cd path/to/ivideon-sdk/demo .
4. From inside the demo folder run npm install .
5. To start the application npm start .
6. Demo page will be available at http://localhost:3000/ (the page automatically opens in your default browser after compilation).
SDK API Guide

Initialization

Integrating the SDK with your web application

1. Download the SDK archive and extract the files into a folder which is directly accessible from the browser. The assets should be available via a web server
through HTTP or HTTPS protocol.
For example, at /vendor/ivideon-standalone-web-sdk-1.0.0/
2. Include the CSS file into the page via the <link rel="stylesheet"> tag.
For example, <link rel="stylesheet" href="/vendor/ivideon-standalone-web-sdk-1.0.0/iv-standalone-web-sdk.css">
3. Include the JS file into the page via the <script> tag.
For example, <script src="/vendor/ivideon-standalone-web-sdk-1.0.0/iv-standalone-web-sdk.js"></script>
4. Include the initialization code snippet in a separate <script> tag after the SDK <script> tag.

If you’re unsure how to integrate Ivideon Web SDK into your application, check Quick start.

Changes made to the environment

The SDK exports _ivideon object into the root scope of the JavaScript environment (window). The _ivideon object has the sdk property which exposes the
entry point into the Ivideon Web SDK API — _ivideon.sdk.init(…) . See Initializing the SDK for details.

Two classes are added to <html> element: .iv-standalone-web-sdk-container and .iv-standalone-web-sdk-container-style .

Initializing the SDK

_ivideon.sdk.init(options) -> Thenable<StandaloneWebSdk,Error>

The dot-notation in the tables below designates the nested object structure.

Option Type Required? Description

options.rootUrl string Yes The absolute URL to the folder where the SDK is located.
 Option Type Required? Description

options.i18nOptions Object<string,*> No The internationalization options. See the Internationalization API section for
additional info.

options.i18nOptions.availableLanguages Array No The list of 2-letter language codes for the languages to load. See the iv-i18n
subdirectory for the list of supported languages. Defaults to ['en'] .

options.i18nOptions.language string No The identifier of the language to select initially. Defaults to 'en' .

options.i18nOptions.locale string No The identifier of the locale (date and time formatting rules) to select initially.
Defaults to the language identifier, which is suitable for most cases.

The following JavaScript snippet initializes the SDK.

_ivideon.sdk.init({
rootUrl: 'https://example.com/vendor/ivideon-standalone-web-sdk-1.0.0/',
i18nOptions: {
availableLanguages: [
'en'
],
language: 'en'
}
}).then(function (sdk) {
// Use `sdk` object which is an instance of `StandaloneWebSdk`.
}, function (error) {
// Handle the initialization error.
});

Authenticating the SDK to access Ivideon API

After initializing the SDK itself, before using the SDK components, the SDK should be configured with credentials to access the Ivideon API.

This is done via StandaloneWebSdk#configureWithCloudApiAuthResponse() method. The following JavaScript snippet shows how to do that.

/*
Pass the OAuth response object returned by the Ivideon API.
The object should have the following structure:
{
 api_host: '...',
access_token: '...',
hmac_secret: '...',
// ...other fields
}
*/

sdk.configureWithCloudApiAuthResponse(cloudApiAuthResponse);

Please note:

If URL scheme in api_host param is omitted, it will be automatically prefixed with https://.
To play public video (which does not require authentication), use the following parameters:
api_host: 'openapi-alpha.ivideon.com'
access_token: 'public'
hmac_secret is a special key provided by Ivideon API to sign video feed and preview requests so that they could not be reused. If omitted, requests
will not be signed.

The call to StandaloneWebSdk#configureWithCloudApiAuthResponse() may be repeated later, when a new token is acquired.

Please note that the call will only affect the upcoming requests to the Ivideon API. Changing the configuration does not terminate the outstanding requests
made by the SDK, including video streams.

Event handling API

The events happening in the SDK components are reported via the StandaloneWebSdkDispatcher.

Obtain a dispatcher by calling StandaloneWebSdk#getDispatcher() -> StandaloneWebSdkDispatcher .

The dispatcher has the methods to subscribe and unsubscribe from the events happening in the SDK components.

StandaloneWebSdkDispatcher#subscribe(handler: function(event)) -> number — Registers a handler to listen to all events. Returns a handler identifier to
use in unsubscribe().
StandaloneWebSdkDispatcher#unsubscribe(handlerId: number) — Unregisters a handler by its identifier. The identifier is returned from subscribe().

Each event reported to the handler has the following structure.

 Option Type Required? Description

event.type string Yes The event type identifier.

event.sender Object Yes A reference to the component which reported the event.

event.data Object No Optional event-specific data.

The following JavaScript snippet subscribes a handler function to all events and then unsubscribes it.

// Subscribe the handler to the SDK events.

var handlerId = sdk.getDispatcher().subscribe(function (event) {
// Handle the `event` here.
});

// Unsubscribe the handler from the SDK events.

sdk.getDispatcher().unsubscribe(handlerId);

StandaloneWebSdkCamera
The camera model is required to access video streams, previews, archive records etc.

Creating a camera
StandaloneWebSdk#createCamera(options) -> StandaloneWebSdkCamera

Option Type Required? Description

options.id string Yes The camera identifier. Use Camera.id from the Ivideon API.

options.cameraName string Yes The camera display name.

options.imageWidth number Yes The camera original image width.

options.imageHeight number Yes The camera original image height.

options.soundEnabled boolean No If set to false, sound will be disabled for this camera and volume control will be hidden. Note that this can
help with restrictive browser autoplay policies , as for videos without sound autoplay is always available.
 The following JavaScript snippet creates the camera model.

var camera = sdk.createCamera({

id: '...',
cameraName: 'Office Cam',
soundEnabled: false,
imageWidth: 1920,
imageHeight: 1080,
});

Finding a closest archive record timestamp

StandaloneWebSdkCamera#getClosestArchivePlaybackTime -> Thenable<number|null>

This function locates an archive record closest to the given timestamp (within a certain range). If there are no archive records within the specified range, it
returns null .

Option Type Required? Description

options.requiredTime number Yes The required archive playback timestamp in milliseconds.

options.offsetValue number Yes The range offset value to search in.

options.offsetUnit string No The required archive playback timestamp in milliseconds.

Possible values:

'y' for years

'M' for months
'd' for days
'h' for hours
'm' for minutes
's' for seconds
'ms' for for milliseconds

Defaults to 's' .

The following JavaScript snippet finds an archive record closest to current time (within -10 minute / +10 minute range).
 camera.getClosestArchivePlaybackTime({
requiredTime: (new Date()).getTime(),
offsetValue: 600,
})
.then(function (closestArchiveRecord) {
if ( closestArchiveRecord !== null ) {
...
}
else {
...
}
})
.catch(function (error) {
...
});

StandaloneWebSdkPlayer
The player UI is created per camera for playing live and archive video from it.

Creating a player
StandaloneWebSdk#createPlayer(options: Object) -> StandaloneWebSdkPlayer

The following options are required to create a player.

Option Type Required? Description

options.container HTMLElement | string Yes The DOM element or a CSS selector string that targets the element to put the
player into.

options.camera StandaloneWebSdkCamera Yes The camera model.

Option Type Required? Description

options.defaultControls boolean | No If undefined or true default player controls will be enabled: volume,
Object<string,boolean> play/pause/stop, live, quality, fullscreen, timeline, calendar and zoom-center
buttons under the player.
Or you can pass an object with the following keys enabling or disabling each
control separately:

fullscreenButtonEnabled: true / false

playPauseButtonEnabled: true / false
goToLiveButtonEnabled: true / false
volumeControlEnabled: true / false
qualityControlEnabled: true / false
speedControlEnabled: true / false
timelineEnabled: true / false
 Option Type Required? Description

options.playerEngine StandaloneWebSdkPlayerEngine No Video player supports several engines. Normally the optimal engine is selected
automatically, based on the user’s operating system and browser. However, in some
cases you may want to enforce the engine choice.

Possible values:

sdk.playerEngines.PLAYER_ENGINE__AUTO : Autoselect (player will

automatically select the optimum engine)
sdk.playerEngines.PLAYER_ENGINE__HLSJS : HTML5 + HLS (used in most
cases)
sdk.playerEngines.PLAYER_ENGINE__HLSJS_IOS : HTML5 + HLS for iOS
devices
sdk.playerEngines.PLAYER_ENGINE__WEBRTC : WebRTC (beta enhanced
engine based on WebRTC)
sdk.playerEngines.PLAYER_ENGINE__FLVJS : HTML5 + FLV (beta enhanced
engine based on FLV.js)
sdk.playerEngines.PLAYER_ENGINE__FLASH : Flash (engine based on Adobe
Flash)

Default value is sdk.playerEngines.PLAYER_ENGINE__AUTO .

Please note that PLAYER_ENGINE__AUTO will never enable WebRTC or FLV.js

engines. These two are experimental and have to be selected manually.

The following JavaScript snippet creates the player component.

var player = sdk.createPlayer({

container: '.myapp-player-container',
camera: camera,
});

Starting the live playback

StandaloneWebSdkPlayer#playLive(options: Object)

The following options specify how to start live video playback.

 Option Type Required? Description

options.quality number No The quality value, one of the following: 0 (low), 1 (medium), 2 (high). Defaults to the last specified quality for live
or archive video, initially 2 (high).

The following JavaScript snippet starts live playback with the last specified quality.

player.playLive();

Starting the archive playback

StandaloneWebSdkPlayer#playArchive(options: Object)

The following options specify how to start archive video playback.

Option Type Required? Description

options.startTime number Yes The timestamp to start playback at, in milliseconds.

If there is no archive at the specified time, the closest available archive record will be located and
played. The search interval for the closest record starts at options.startTime and ends at
options.startTime + 4 hours . To override this behavior use parameters below.

options.limitArchiveSearch boolean No If true, the search interval start at (options.startTime - offset) and end at (options.startTime +
offset) . The offset is specified by options.offsetValue and options.offsetUnit .

options.offsetValue number No The range offset value to search in. Defaults to 30 .

 Option Type Required? Description

options.offsetUnit string No The required archive playback timestamp in milliseconds.

Possible values:

'y' for years

'M' for months
'd' for days
'h' for hours
'm' for minutes
's' for seconds
'ms' for for milliseconds

Defaults to 's' .

options.speed number No The speed multiplier, one of the following: 1 , 2 , 4 , 8 , 16 , 32 , 64 .

options.quality number No The quality value, one of the following: 0 (low), 1 (medium), 2 (high). Defaults to the last specified
quality for live or archive video, initially 2 (high).

The following JavaScript snippet starts archive playback.

player.playArchive({
startTime: Date.now() - 1000 * 60 * 60 //< Start an hour back from now.
});

Controlling the playback

StandaloneWebSdkPlayer#getLoading() -> boolean — Gets the player loading state.
StandaloneWebSdkPlayer#getPlaying() -> boolean — Gets the player playing state (includes paused).
StandaloneWebSdkPlayer#getPlayheadTime() -> number — Gets the timestamp of the currently played video. Returns the timestamp of the currently played
video in milliseconds ( 0 if idle).
StandaloneWebSdkPlayer#setPaused(isPaused: boolean) — Pauses playback or resumes playback from paused state.
StandaloneWebSdkPlayer#getPaused() -> boolean — Gets the player paused state (while playing).
StandaloneWebSdkPlayer#stop() — Stops playback.

Events:
 ivideon.StandaloneWebSdkPlayer:playback-state-changed — The playback state has changed. Query getLoading, getPlaying, getPlayheadTime,
getPaused to get the current state.

Controlling the sound volume

The volume level and the muted state are controlled separately and persisted for the lifetime of the player. Has no effect on mobile platforms with hardware
volume control.

StandaloneWebSdkPlayer#getVolume() -> number — Gets the sound volume. The volume value is from 0.0 to 1.0.
StandaloneWebSdkPlayer#setVolume(volume: number) — Sets the sound volume. The volume value is from 0.0 to 1.0.
StandaloneWebSdkPlayer#getMuted() -> boolean — Gets the sound muted state.
StandaloneWebSdkPlayer#setMuted(isMuted: boolean) — Mutes the sound or reverts the volume to the current level.

Events:

ivideon.StandaloneWebSdkPlayer:volume-changed — The volume has changed. Query getVolume to get the current value.
ivideon.StandaloneWebSdkPlayer:muted-changed — The muted state has changed. Query getMuted to get the current value.

Changing video rotation

The player supports flipping the video by 180 degrees. The setting is persisted for the lifetime of the player. Has no effect in browsers that do not support CSS3
2D transform.

StandaloneWebSdkPlayer#getVideoRotation() -> number — Gets the current video rotation angle. Either 0 or 180.
StandaloneWebSdkPlayer#setVideoRotation(volume: number) — Sets the current video rotation angle. Either 0 or 180.

Cleaning up
The player component should be explicitly destroyed before removing its container from the DOM.

StandaloneWebSdkPlayer#destroy() — Releases the resources taken by the player component.

Other
StandaloneWebSdkPlayer#getCamera() -> StandaloneWebSdkCamera — Returns the camera this player is bound to.

StandaloneWebSdkTimeline
The timeline displays the recorded archive of the bound cameras and the playback state of the bound players.

Events:
 ivideon.StandaloneWebSdkTimeline:time-clicked — The user has clicked the timeline to select a video for playback. See Handling a timeline time
click to play the corresponding video.

Creating a timeline
StandaloneWebSdk#createTimeline(options: Object) -> StandaloneWebSdkTimeline

The following JavaScript snippet creates the timeline component.

var timeline = sdk.createTimeline({

container: '.myapp-timeline-container'
});

The following options are required to create a timeline.

Option Type Required? Description

options.container HTMLElement | string Yes The DOM element or a CSS selector string that targets the element to put the
timeline into.

options.timelineColorsGenerator function({ camera: Yes A function to generate the timeline colors. Should return either an RGBA
StandaloneWebSdkCamera object {r:number,g:number,b:number,a:number}, or a string like rgba(0,0,0,0.5)
}):RGBA|string|undefined or #FFFFFF, or undefined to use the default color.

The timeline requests the color once for a camera when the camera gets
bound to the timeline.

The following example generates the timeline colors based on the camera index:

// Populate the custom color palette:

var palette = [ '#000000', '#C00000', '#5B9BD5', '#FFC000', '#7030A0', '#ED7D31' ];

// Populate the array of cameras:

var cameras = [];
cameras.push(camera1); //< Just an example, shouldn't be written this way.
cameras.push(camera2);
cameras.push(camera3);
cameras.push(camera4);
 // Create a timeline with the custom colors based on the camera index.
// Note that the color is bound to the specific camera and won't be changed if the index of that camera changes.
var timeline = sdk.createTimeline({
container: '.myapp-timeline-container',
timelineColorsGenerator: function (args) {
var index = cameras.indexOf(args.camera);
return palette[index % palette.length];
}
});

Binding the timeline to a camera to display archive records

StandaloneWebSdkTimeline#bindCamera(camera: StandaloneWebSdkCamera)
StandaloneWebSdkTimeline#unbindCamera(camera: StandaloneWebSdkCamera)

Binding the timeline to a player to display playback state

StandaloneWebSdkTimeline#bindPlayer(player: StandaloneWebSdkPlayer)
StandaloneWebSdkTimeline#unbindPlayer(player: StandaloneWebSdkPlayer)

Handling a timeline time click to play the corresponding video

Event: ivideon.StandaloneWebSdkTimeline:time-clicked

Event data:

Option Type Required? Description

data.now number Yes The timestamp when the event is sent, in milliseconds.

data.time number Yes The timestamp which is clicked, in milliseconds.

The following JavaScript snippet subscribes to all events via the StandaloneWebSdkDispatcher and handles a timeline click event to select live or archive video
depending on the clicked time.

// Assuming `timeline` is an instance of `StandaloneWebSdkTimeline`,

// `player` is an instance of `StandaloneWebSdkPlayer`.
sdk.getDispatcher().subscribe(function (event) {
 if (
event.type === 'ivideon.StandaloneWebSdkTimeline:time-clicked'
&& event.sender === timeline
) {
var data = event.data;
if (data.time >= data.now) {
player.playLive();
}
else {
player.playArchive({
startTime: data.time
});
}
}
});

Controlling the timeline time span

StandaloneWebSdkTimeline#setTimeSpan(timespan: { startTime: number, endTime: number }, animate: boolean) — Navigates the timeline view to
display the specified time span. If the timeline is animating, the current animation will stop.

StandaloneWebSdkTimeline#getTimeSpan() -> { startTime: number, endTime: number } — Returns the time span displayed on the timeline. If the timeline
is animating, this will be the target of the animation.

StandaloneWebSdkTimeline#centerAt(time: number, center: number, animate: boolean) — Centers the timeline view at the specified timestamp. The
center argument specifies the relative coordinate [0; 1] where the target time should end up (default is 0.5 which is the center).

StandaloneWebSdkTimeline#zoomBy(factor: number, center: number, animate: boolean) — Zooms the timeline view by the given factor (positive to zoom
in, negative to zoom out). The center argument specifies the relative coordinate [0; 1] where the zoom occurs (default is 0.5 which is the center).

Cleaning up
The timeline component should be explicitly destroyed before removing its container from the DOM.

StandaloneWebSdkTimeline#destroy() — Releases the resources taken by the timeline component.

StandaloneWebSdkCalendar
 The calendar displays archive records and events on a calendar.

Creating a calendar
StandaloneWebSdk#createCalendar(options: Object) -> StandaloneWebSdkCalendar

Binding the calendar to a camera to display archive records

StandaloneWebSdkCalendar#bindCamera(camera: StandaloneWebSdkCamera)

StandaloneWebSdkCalendar#unbindCamera(camera: StandaloneWebSdkCamera)

Controlling the calendar selected day

StandaloneWebSdkCalendar#getSelectedTimeSpan() -> { startTime: number, endTime: number } — Gets the time span of the selected date.

StandaloneWebSdkCalendar#setSelectedDate(timestamp: number) — Selects the date at the specified timestamp.

Events:

ivideon.StandaloneWebSdkCalendar:selected-date-changed — The selected date has changed (either via setSelectedDate or via a user click). Query
getSelectedTimeSpan to get the current value.
ivideon.StandaloneWebSdkCalendar:selected-date-changed-by-user — The user has selected a date on the calendar. Query getSelectedTimeSpan
to get the current value.

Cleaning up
The calendar component should be explicitly destroyed before removing its container from the DOM.

StandaloneWebSdkCalendar#destroy() — Releases the resources taken by the calendar component.

Internationalization API
The SDK provides an API for selecting a language to render the messages, and for selecting a locale to render the time and date.

To obtain an entry point to the internationalization API, call the following method:

StandaloneWebSdk#getI18n() -> StandaloneWebSdkI18n

Selecting a language and a locale

 StandaloneWebSdkI18n#setLanguageAndLocale(language: string, locale: string)

Sets the language and locale for the SDK components. The specified language must be added before with StandaloneWebSdkI18n#addMessages(category,
messages, language) .

Option Type Required? Description

language string Yes The identifier of the language to select. Supported options are:

'de' — Deutch
'en' — English
'es' — Spanish
'fr' — French
'it' — Italian
'pt' — Portuguese
'ja' — Japanese
'ru' — Russian
'tr' — Turkish

locale string No The identifier of the locale to select. Defaults to the language identifier. Supported options are the same as those of
language parameter (listed above).

Warning: The SDK components that have been created before must be destroyed and created again to correctly reflect the change in language and locale.

Adding a custom translation

SDK language files are located in iv-i18n folder in the SDK directory. To add a custom translation:

1. Take en.js from iv-i18n folder.

2. Translate en.js to the target language, and name the resulting file {lg}.js , where {lg} is an ISO-631 2-letter language code serving as a translation ID.
3. Put the resulting file back into iv-i18n folder beside the other translation files.
4. In your SDK initialization code update the call to _ivideon.sdk.init() , adding your custom translation ID:

_ivideon.sdk.init({
…
i18nOptions: {
 availableLanguages: [
'en',
'{lg}'
],
language: 'en',
…

English translation should be always added to availableLanguages list as it is used as a fallback in case a message is missing from the selected translation.

Please note new releases of the SDK can come with updated translation files, so you will have to update your custom translations as well.