ID-AL JavaScript SDK

ID-AL JavaScript SDK

This tutorial will help you use the ID-AL JavaScript SDK.
In order to complete this tutorial, please read the Quick start tutorial.

Shopping list

To complete this tutorial, you will need:

  • an ID-AL VP320, VP330 or EVP380 video player
  • an external storage device (USB stick or a microSD card)
  • a mouse connected to the video player (or a touchscreen)
  • a personal computer

What is the ID-AL JavaScript SDK ?

The ID-AL JavaScript SDK is a JavaScript development kit giving access to the video player features.
Two flavors are available:

  • development: contains stubbed implementations that simulate the player APIs when running on a PC.
    This flavor can be used during project development. Although it does not fully simulate the video player, it could be sufficient enough to run basic use cases.
  • production: only contains the video player implementation that should be used on production systems.

The SDK is not embedded into the video players, you have to download it and integrate it in your own sources.
It's use is not mandatory to access the player features but it is strongly advised!

Downloading the SDK

You can download the latest SDK version here.

The zip archive contains production and development versions (minified or not):

  • Production versions:
    • idal-sdk.min.js
    • idal-sdk.js
  • Development versions:
    • idal-sdk.dev.min.js
    • idal-sdk.dev.js

You will have to choose and integrate one of this file into your source tree and include it in your own HTML documents.
On production systems use the minified version of the production SDK.

Media preparation

Prepare the storage device as described in the Quick start tutorial.

Copy the SDK file idal-sdk.dev.js into the www folder.
Note: for this tutorial, we will use the development version. It makes it possible to run the code on both PC and video player.

HTML document

We are going to create an HTML document containing a clickable button that can pause and resume the video playback.

In the www folder, create a file named tutorial-idal-sdk.html.

<html>
<head>
<script src="idal-sdk.dev.js"></script>
<script>
    function togglePauseClick() {
        IDAL.getControlInterfaces()
            .then(function(ifaces) {
                ifaces.player.togglePause();
            });
    }
</script>
</head>
<body>
<input type="button" onclick="togglePauseClick()" value="Toggle pause">
</body>
</html>

As you can see, the SDK in loaded using a <script> tag, allowing the instantiation of an IDAL object:

<script src="idal-sdk.dev.js"></script>

And the button is connected to the JavaScript function togglePauseClick():

<input type="button" onclick="togglePauseClick()" value="Toggle pause">

The togglePauseClick() function is using IDAL.getControlInterfaces() to retrieve the video player control interfaces:

function togglePauseClick() {
    IDAL.getControlInterfaces()
        .then(function(ifaces) {
            ifaces.player.togglePause();
        });
}

The IDAL.getControlInterfaces() method is returning a Promise. It means that the control interfaces are returned asynchronously by invoking the function callback passed to the then() method. In this example, the control interfaces are contained in the ifaces parameter (see IdalControlInterfaces for more details).

Note that all the API exposed by the control interfaces are also returning Promises.

Once the control interfaces have been retrieved, it is possible to invoke the Player.togglePause() method.
For simplicity, the code has been shortened and should have been written like this:

ifaces.player.togglePause()
    .then(function(status) {
        // Everything is OK
        // Check that the pause has action has been processes by checking the status
    })
    .catch(function(error) {
        // An error occured, do something...
    });

Websites configuration

Now, in the www folder, create a file named web-config.json containing the websites definitions.

{
    "websites": [
        {
            "id": 2,
            "url": "http://localhost/www/tutorial-idal-sdk.html"
        }
    ]
}

Multimedia folders

  1. Create a folder with the following name: 000 [WEBS 2][LOOP] IDAL SDK.
  2. Copy one or more video files into the folder (any mp4 or mkv file with H.264 or H.265 content).

Running on the video player

  1. Safely eject the storage device from your computer.
  2. Power on the video player if not already done.
  3. Plug the storage device into the video player.
  4. Plug the mouse into the video player (or connect the touchscreen)

You should see the video running and the "Toggle pause" button.
Click on the button to pause an resume the video.