SDK JavaScript ID-AL

SDK JavaScript ID-AL

Ce tutoriel vous aidera à utiliser le SDK JavaScript ID-AL.
La lecture du tutoriel Démarrage rapide est requise pour mener à bien ce tutoriel.

Liste de courses

Pour mener à bien ce tutoriel vous aurez besoin de :

  • un lecteur vidéo ID-AL VP320, VP330 ou EVP380,
  • un support de stockage externe (clé USB ou carte microSD),
  • une souris connectée au lecteur vidéo (ou un écran tactile),
  • un ordinateur.

Qu'est ce que le SDK JavaScript ID-AL ?

Le SDK JavaScript ID-AL est un kit de développement donnant l'accès aux fonctionnalités du lecteur vidéo.

Deux variantes sont disponibles:

  • développement : contient une implémentation permettant de simuler les API du lecteur lors de l'execution sur un PC.
    Cette variante peut être utilisée durant la phase de développement de vos projets. Bien que le simulation ne soit pas totale, elle peut être suffisante pour l'exécution de scénario basiques.
  • production : contient uniquement l'implémentation à destination du lecteur vidéo et devant être utilisée sur les systèmes de production.

Le SDK n'est pas intégré au lecteur vidéo, vous devez le télécharger et l'intégrer dans vos propres sources.
Son utilisation n'est pas obligatoire pour accéder aux fonctionnalités du lecteur mais elle est fortement conseillée !

Téléchargement du SDK

Vous pouvez télécharger la dernière version du SDK ici.

L'archive contient des versions de développement et de production (minifiées ou pas) :

  • Versions de production:
    • idal-sdk.min.js
    • idal-sdk.js
  • Versions de développement:
    • idal-sdk.dev.min.js
    • idal-sdk.dev.js

Vous devez choisir et intégrer l'un de ces fichiers dans votre arborescence de sources et l'inclure dans vos documents HTML.
Sur les systèmes de production, préférez l'utilisation d'une variante de production minifiée.

Préparation du support de stockage

Préparez le support de stockage comme décrit dans le tutoriel Démarrage rapide.

Copiez le fichier idal-sdk.dev.js présent dans le SDK dans le dossier www.
Note : pour ce tutoriel, nous utiliserons une version de développement, ce qui permet de tester le code aussi bien sur PC que sur le lecteur vidéo.

Document HTML

Nous allons créer un document HTML contenant un bouton cliquable permettant de mettre en pause et redémarrer la lecture vidéo.

Dans le dossier www, créez un fichier nommé 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>

Comme vous pouvez le constater, le chargement du SDK edffectué par la balise <script>, ce qui permet d'instancier un objet IDAL :

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

Le bouton est connecté à la fonction JavaScript togglePauseClick():

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

La fonction togglePauseClick() utilise la méthode SDK IDAL.getControlInterfaces() pour récupérer les interfaces de contrôle du lecteur vidéo :

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

La méthode IDAL.getControlInterfaces() retourne une Promise. Cela signifie que les interfaces de contrôle sont retournée de manière asynchrone par l'invocation de la callback passée à la méthode then(). Dans cet exemple, les interfaces de contrôle sont contenues dans le paramètre ifaces (voir IdalControlInterfaces pour plus de détails).

Notez que toutes les API exposées par les interfaces de contrôle retournent aussi des promesses.

Une fois que les interfaces de contrôle ont été récupérées, il est possible d'exécuter la méthode du lecteur Player.togglePause().
Par soucis de simplicité, le code a été raccourci et aurai dû être écrit de cette façon:

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...
    });

Configuration des sites web

Maintenant, dans le dossier www, créez un fichier nommé web-config.json avec le contenu suivant :

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

Pour plus d'information sur la syntaxe de ce fichier, veuillez vous référer au tutoriel Configuration des sites web.

Dossiers multimédia

  1. Créez à la racine un dossier portant ce nom : 000 [WEBS 2][LOOP] IDAL SDK.
  2. Copiez un ou plusieurs fichiers vidéo dans ce dossier (fichiers mp4 ou mkv contenant du H.264 ou H.265)

Exécution sur le lecteur vidéo

  1. Ejectez proprement le support de stockage de votre ordinateur ;
  2. Allumez le lecteur vidéo si ce n'est déjà fait ;
  3. Branchez le support de stockage dans le lecteur vidéo ;
  4. Branchez la souris sur le lecteur vidéo (ou l'écran tactile).

Vous devriez voir la vidéo surmontée d'un bouton "Toggle pause".
Cliquez sur le bouton pour mettre la vidéo en pause ou reprendre la vidéo.