Streamer le flux d'une caméra IP sur un site Joomla

Tout ce qui concerne Internet et le Web Mastering.

Streamer le flux d'une caméra IP sur un site Joomla

Messagepar tchao57 » 03 Oct 2016, 17:08

Si vous souhaitez streamer le flux d'une caméra IP sur un site Joomla, c'est à dire mettre en ligne en direct ce que vois la caméra, il faut que celle-ci soit déjà compatible avec le protocole RTSP (Real Time Streaming Protocol (protocole de streaming temps-réel)). Généralement, maintenant elle le sont toutes ou presque.
Le protocole RTSP se lit avec des lecteurs de flux tels que VLC ou encore Windows Media Player. Le principe étant de récupérer l'URI (Uniform Resource Identifier) de la caméra afin de l'intégrer dans le code d'une page Internet. Dans ce tuto nous allons voir comment le faire sur un site créé sous Joomla, mais le principe reste le même avec n'importe quel CMS ou même un site codé entièrement "à la main".

  1. Télécharger le logiciel gratuit ONVIF Device Manager ICI
  2. Une fois le logiciel téléchargé et lancé, il faut entrer les données d'identification de la caméra IP dans le coin supérieur gauche du logiciel (Nom d'utilisateur et mot de passe préalablement créés ou ceux par défaut) puis cliquer sur "Login"



  3. Le logiciel scanne automatiquement le réseau avec les identifiants donnés et retrouve la caméra.



  4. Maintenant il faut entrer dans le live de la caméra en cliquant sur "Live video"



  5. On aperçois donc l'image que filme la caméra. Sous cette image se trouve l'URI RTSP à récupérer. Ici rtsp://192.168.1.168:80/0

    Où:

    rtsp = protocol RTSP
    192.168.1.168 = Adresse IP donnée à la caméra. Soit par DHCP, soit manuellement
    :80 = Port d'écoute de la caméra pour la retrouver dans un navigateur tel que IE ou Firefox
    /0 = Flux principal de la caméra (Il est différent selon la marque et la série de la caméra)



    ATTENTION:
    L'URI récupérée ici correspond à une adresse IP de réseau local. Si on souhaite mettre le flux sur un site internet il faut absolument utiliser une URI avec une adresse IP Publique (Fournie par le FAI, tel que Free, SFR, etc.). Autrement dit il faut remplacer l'adresse IP locale (192.168.1.168) par l'adresse IP publique de la box ou éventuellement un DynDNS.
    Le port 80 est également à changer par le port TCP 554 qui correspond au protocol RTSP

  6. Une fois l'URI récupérée il convient de faire une redirection de port dans son routeur ou box afin que le port 554 soir redirigé vers l'adresse IP locale de la caméra.

  7. Il faut maintenant s'attaquer au site internet Joomla dans lequel on va intégrer le flux. Pour cela il faut créer un module de contenu personnalisé dans l'onglet des Modules. Dans "Extensions --> Modules" puis "Nouveau"

  8. On donne un titre à ce nouveau Module. Par exemple "Caméra", puis on insère ce code dans l'éditeur de texte en veillant bien qu'on ai choisi l'éditeur de base sans les options de mise en forme

    Code: Tout sélectionner
    <object id="MediaPlayer" classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components..." type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" width="320" height="270"><param name="autoStart" value="True"><param name="filename" value="rtsp://ADR-IP:554"><param name="ShowControls" value="False"><param name="ShowStatusBar" value="False"><embed type="application/x-mplayer2" src="rtsp://ADR-IP:554" name="MediaPlayer" autostart="1" showcontrols="0" width="320" height="270"></object>


    Où:

    object id="MediaPlayer" = Lecteur Windows Média Player
    classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" = Code d'identification du lecteur (code unique, à ne pas changer)
    width="320" height="270" = Taille du lecteur (à changer selon la taille désirée)
    rtsp://ADR-IP:554 = "ADR-IP" à changer par l'adresse IP publique de la box ou routeur

  9. Enfin dans le champ "Position" il faut indiquer une position unique du module. Par exemple "Camera" puis on enregistre le module.

  10. On crée un article dans lequel on utilise également l'éditeur de texte de base sans option puis on insère ce code

    Code: Tout sélectionner
    {loadposition Camera}


    On y met un titre et on enregistre

  11. On crée un Menu qui pointe vers cet article, on enregistre le tout et c'est terminé
Nul n'est parfait, nous apprenons sans cesse...

Site Web Pro : http://www.solucetech.fr
Avatar de l’utilisateur
tchao57
Administrateur du site
 
Messages: 115
Inscription: 07 Avr 2013, 22:14
Localisation: Florange en Moselle

Retourner vers Internet

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron