Mode design JEEDOM: Utiliser le HTML pour créer une page de vidéosurveillance en flux live.

Même si le chantier Domotique est loin d’être terminé (Les cordonniers sont les plus mal chaussés…), j’ai commencé à installer quelques cameras dans et autour de la maison.

Même si le plugin camera sur JEEDOM est très bien, j’ai préférer gérer mes caméras en mettant les mains dans le cambouis ;-).

 

Jeedom nous permet d’utiliser du code HTML sur le mode design. Je ne suis pas un grand programmeur, loin de là, mais avec des connaissances de base on s’en sort bien.

J’ai déjà créer à la base une page par caméra et possibilité de les commander. (J’en parlerai dans un prochain article).

L’objectif d’aujourd’hui est de centraliser sur une seule page qu’on va nommer (Vidéosurveillance) toutes les cameras de la maison en flux direct.

 

1-Création de la page:

Pour créer une page on va dans un premier temps aller sur le mode design:

Jeedom=>Accueil=>Design

mode-design

On clic sur design:

design-new-project

Un petit clic sur le bouton vert pour créer notre nouvelle page, et on la nomme:

nouvelle-page-design

La page créer, on passe alors en mode EDITION (bouton orange à droite)

 

2-Mise en place du fond:

Pour trouver un fond Goggle est ton ami 😉 J’ai vu qu’un fond boisé pouvait faire l’affaire, mais chacun ses goûts.

La mise en place du fond ne se fait pas en html mais en passant par les paramètre de la page. (On peut aussi laisser le fond blanc et le gérer en html mais pour tester facilement différent fonds, c’est plus simple par les paramètres de la page.

parametres-page

Zou on clic sur le 2ème bouton en partant de la droite : Paramètres.

On arrive sur la page de configuration de la page et on envoie notre image de fond via=> envoyer

envoi-image

Maintenant l’image de fond est poser, il ne reste plus qu’à créer notre partie html.

 

3-Insertion des flux videos des cameras via HTML:

On ajoute via l’onglet (Test:html) Notre nouvelle élément.

Dans la partie code on va pouvoir gérer nos emplacements des cameras sur notre page, appeler les flux des cameras etc..)

Voici mon code de base: (Attention il est loin d’être propre, j’utilise des balise <br> pour les retour chariots à tout va. Ce n’est pas la meilleur méthode mais ça fonctionne)

<html>
<body>
<br>

<br>
<br>

<img src= »
http://moniplocal/cgi-bin/CGIStream.cgi?cmd=GetMJStream&usr=utilisateur
&pwd=mettrelemotdepasse
« style= »width:400px; height:250px; box-shadow:0 0 15px 5px grey; » align= »left » alt= »probleme de connection » />
<img src= »
http://moniplocal/cgi-bin/CGIStream.cgi?cmd=GetMJStream&usr=utilisateur
&pwd=mot de passe de camera 2
« style= »width:400px; height:250px; box-shadow:0 0 15px 5px grey; » align= »right » alt= »Probleme de connection » /><br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<img src= »
http://ipcamera3/cgi-bin/CGIStream.cgi?cmd=GetMJStream&usr=icioci
&pwd=laencore
« style= »width:400px; height:250px; box-shadow:0 0 15px 5px grey; » align= »left » valign= »down » alt= »Probleme de connection » />
<img src= »
http://ipcamera4/cgi-bin/CGIStream.cgi?cmd=GetMJStream&usr=login
&pwd=passcam4
« style= »width:400px; height:250px; box-shadow:0 0 15px 5px grey; » align= »right » alt= »Probleme de connection » />
</body>
</html>

ATTENTION: ICI  j’utilise des cameras FOSCAM. Selon vos cameras voir vos API pour savoir comment avoir le flux.

Si tout va bien vous devriez avoir vos camera en flux direct sous cette forme:

videosurveillance

On à un récapitulatif de nos caméras avec un flux en direct.

Ensuite on pourra ajouter des bouton  pour afficher chaque caméra individuellement et avoir Access au pilotage de celle-ci, lancer un enregistrement etc…

 

LBC Concept

Ancien ingénieur dans le secteur de l industrie, je travaillais sur des systèmes de conduite automatisée de ligne de fabrication. Aujourd'hui, j'utilise mes connaissances au service de la domotique.

Une pensée sur “Mode design JEEDOM: Utiliser le HTML pour créer une page de vidéosurveillance en flux live.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *