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".
- Télécharger le logiciel gratuit ONVIF Device Manager ICI
- 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"
- Le logiciel scanne automatiquement le réseau avec les identifiants donnés et retrouve la caméra.
- Maintenant il faut entrer dans le live de la caméra en cliquant sur "Live video"
- 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 - 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.
- 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"
- 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
Où: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>
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 - Enfin dans le champ "Position" il faut indiquer une position unique du module. Par exemple "Camera" puis on enregistre le module.
- On crée un article dans lequel on utilise également l'éditeur de texte de base sans option puis on insère ce code
On y met un titre et on enregistreCode : Tout sélectionner
{loadposition Camera} - On crée un Menu qui pointe vers cet article, on enregistre le tout et c'est terminé