Chargement d'un fichier .js dans un code HTML personnalisé (dashboard) - Release 4.4.0

Bonjour à la communauté !

Je cherche de l’aide car je ne m’en sors pas suite à des tests en release 4.4.0 d’un widget personnalisé sur le dashboard. Tout d’abord, je ne rencontre aucun souci en 4.3.15 !

J’ai fait un copier/coller du code du widget à la racine de jeedom et tout est ok sans aucun log spécifique dans la console.

Voici le code du widget :

<div class="eqLogic eqLogic-widget" style="width:384px;height:218px;border:#border#;border-radius:#border-radius#;background-color:#2a2e33;color:#color#;#style#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#">
    <script src="plugins/netatmopro/3rdparty/hls.js/hls.js"></script>
    <video id="video#id#" controls autoplay muted style="width: 384px; height: 216px"></video>
</div>

<script type="text/javascript">
    if (Hls.isSupported()) {
      console.log('hello hls.js!');
    }
</script>

Logs de la console :

image

Avec le fichier contenant le code du widget à la racine de jeedom :

image

Je sais qu’il y a eu pas mal de changement dans le core Jeedom avec la suppression du jquery et j’aurais besoin d’aide car je ne m’en sors pas :wink:
A disposition pour des tests !

Bonjour
Met un settimeout avant l’utilisation du hsl.

Ce n’est hélas pas suffisant ou je m’y prends mal :

Voici le résultat dans la console après modification du code :

<div class="eqLogic eqLogic-widget" style="width:384px;height:218px;border:#border#;border-radius:#border-radius#;background-color:#2a2e33;color:#color#;#style#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#">
    <script src="plugins/netatmopro/3rdparty/hls.js/hls.js"></script>
    <video id="video#id#" controls autoplay muted style="width: 384px; height: 216px"></video>
</div>

<script type="text/javascript">
  setTimeout(() => {
    console.log("Delayed for 10 second.");
    if (Hls.isSupported()) {
      console.log('hello hls.js!');
    }
  }, 10000);
</script>

image

Hello,

Il semblerait que ce soit dans le contenu du Hls.js qu’il ce produit une erreur.

Edit : Il semble que tu as déja une autre erreur avant (Failed to fetch), peut-être la cause pour la suite ?

1 « J'aime »

Sur le principe et les logs d’erreur de la console, je suis d’accord… mais cette erreur n’existe pas dans la console quand le code est executé depuis la racine de jeedom (/var/www/html/toto.html par exemple)

Je ne sais pas comment est chargé le code javascript depuis jeedom pour un widget mais j’ai l’impression que ce module hls.js lui pose problème.

J’ai testé avec une version plus récente, j’ai plus le message sauf la caméra s’affiche pas :frowning:

Je suis avec la toute dernière version de hls.js.
Tu es en 4.4.0 sans aucun message d’erreur dans la console ?

Les 3 premiers messages s’affichent systématiquement quelque soit le dashboard sélectionné et les autres widgets (sans JS) ne posent pas de problème.

Quand je debug hls.js, j’ai
image

Peux-tu être explicite sur tes modifications pour le chargement de la librairie hls.js vu que cela ne fonctionne pas chez moi ?

J’ai mit les nouveaux fichier dans ton dossier

Ensuite je modifie le template
image

Les fichiers NOC.html et NACamera.html, j’ai récupéré le dernier code de Hls.js

<script type="text/javascript" src="/plugins/netatmopro/3rdparty/hls.js/hls.min.js"></script>
<div class="eqLogic eqLogic-widget" style="width:384px;height:218px;border:#border#;border-radius:#border-radius#;background-color:#2a2e33;color:#color#;#style#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#">


<video id="video#id#" controls autoplay muted style="width: 384px; height: 216px"></video>

<script type="text/javascript">
   var video#id# = document.getElementById('video#id#');
      if (Hls.isSupported()) {
        var hls#id# = new Hls({
          debug: true,
        });
        hls#id#.loadSource('#vpn_url#/live/index.m3u8');
        hls#id#.attachMedia(video#id#);
        hls#id#.on(Hls.Events.MANIFEST_PARSED, function () {
          video#id#.play();
        });
      }
      // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
      // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
      // This is using the built-in support of the plain video element, without using hls.js.
      else if (video#id#.canPlayType('application/vnd.apple.mpegurl')) {
        video#id#.src = '#vpn_url#/live/index.m3u8';
        video#id#.addEventListener('canplay', function () {
          video#id#.play();
        });
      }
  /*var video#id# = document.getElementById('video#id#');

  if(Hls.isSupported()) {
    var hls#id# = new Hls();
    hls#id#.loadSource('#vpn_url#/live/index.m3u8');
    hls#id#.attachMedia(video#id#);
    hls#id#.on(Hls.Events.MANIFEST_PARSED,function() {
      video#id#.play();
    });
  }
  else if (video#id#.canPlayType('application/vnd.apple.mpegURL')) {
    video#id#.src = '#vpn_url#/live/index.m3u8';
    video#id#.addEventListener('canplay',function() {
      video#id#.play();
    });
  }*/
</script>

</div>

Ensuite il faut revalider la caméra pour prendre en compte la modification

Ya un soucis avec la lib JS la peut être qu’il y a un truc a lui dire pour qu’elle marche en relatif (ça serait une première)

Je viens malheureusement de faire exactement ce que tu as fait… et j’ai toujours la même stack d’erreur.

total 1980
drwxrwxr-x 2 www-data www-data    4096 Aug 23 18:18 .
drwxrwxr-x 4 www-data www-data    4096 Aug 23 12:06 ..
-rwxrwxr-x 1 www-data www-data  374853 Aug 23 18:17 hls.min.js
-rwxrwxr-x 1 www-data www-data 1640103 Aug 23 18:17 hls.min.js.map

J’ai fait un copier/coller du code et j’ai bien sauvegardé l’équipement.
Bref… je ne m’explique pas comment le chargement de hls fonctionne chez toi !

C’est bon ça fonction pour moi

J’ai trouvé la bonne version https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js

une petite précision, je sais pas si t’a vu j’ai déplacé l’insertion du js, je l’ai mit en début de fichier, j’ai copié sur le plugin Camera :slight_smile:

Ps : je viens d’activer mes caméras j’en ai qu’une qui marche :frowning:

Pour les autres caméras j’ai

Il semble que cette version date de décembre 2018…

Je vais donc éviter de l’intégrer au plugin :wink:

Pour revenir au problème initial, comment puis-je investiguer le chargement de cette librairie ?

Je rappelle que tout fonctionne parfaitement en 4.3.15 et que je n’ai aucun problème si le code est présent dans un fichier à la racine de jeedom (cf mon premier post)

Bonjour
La 4.4 change énormément de chose on a essayé de rendre ça le plus transparent possible malheureusement c’est pas possible et oui il y aura dans les cas complexe comme ici des truc a regardé et a corriger malheureusement.

Après si vraiment c’est trop pour vous je verrai pour ajouter un numéro max de version de core et vous pourrez déclarer votre plugin incompatible v4.4 et si vraiment ya trop de dev on annulera la 4.4 et les évolutions qui vont avec.

Il ne faut aucunement annuler la release 4.4.0 et toutes les évolutions que vous avez faites !
Désolé si je ne me suis mal exprimé.

J’aimerais juste comprendre pourquoi/comment ces évolutions impactent le chargement de script externe .js
Je suis plutôt backend et pas du tout à l’aise sur le frontend d’ou cet appel à l’aide mais prêt à mettre la main à la pâte et aider au maximum.

J’ai testé sur un plugin de test avec Alpha MaJ a l’instant :

  • ajout des 3 fichiers
    image

venant de https://cdnjs.com/libraries/hls.js/8.0.0-beta.3

  • ajout de
<script src="plugins/monplugin/3rdparty/hls.js/hls.js"></script>
<script type="text/javascript">
    if (Hls.isSupported()) {
      console.log('hello hls.js!');
    }
</script>

dans mon template.

  • création de 2 Eq.

Résultat en dashboard :

image

Pas d’erreur.

Je sais ca aide pas beaucoup :rofl:

En gros avant c’est jQuery qui s’occupait du chargement des scripts avec une tambouille interne sur je n’ai jamais compris, qui était très lente (du à l’envi d’être compatible avec de vieux navigateur) et masqué beaucoup de soucis.

La maintenant on a tout réécris et c’est donc jeedom qui lors de l’affiche du widget voit qu’il y a un JS a chargé demande au navigateur de le faire puis affiche le widget (le fichier JS et même sortie du widget pour être remis propre dans le header de la page, ça permet au passage de ne pas charger 2 fois le même js)

Et je pense que c’est là qu’il y a un soucis soit :

  • notre système ne voit pas ton js, pour ça c’est très simple dans l’onglet network puis en rechargent la page tu es censé le voir passer
  • ya un soucis dans le js que tu charges (peut être des dépendances)
  • ya un soucis dans les timing de chargement

C’est un soucis avec domUtils.loadScript, je vais passer en mode debug et voir à comprendre la fonction :slight_smile: