J’avais des caméras raspberry pi. Toutes les minutes je prenais une photo et je la stockait pour ensuite l’afficher sur mon site internet. Ayant refait l’isolation de ma maison, je n’ai jamais pris la peine de les remettre, mais suite à la demande de plusieurs voisins qui appréciaient de venir sur mon site pour voir la situation à Montpreveyres, je me suis dirigé vers une nouvelle solution.
Installation de la caméra
J’ai acheté une caméra sur digitec à 80.- de très bonne qualité, la Reolink RLC-410W . J’ai mis sur mon routeur une ip statique. La caméra n’est pas ouverte sur l’extérieur.
Après l’avoir installée, j’ai cherché le lien RTSP:
rtsp://{user}:{password}@{ipdelacaméra}:554/h264Preview_01_main
Beaucoup de caméras ont un lien similaire!
On peut ouvrir ce lien RTSP par exemple dans VLC (media, open network stream). Mais le lien RTSP ne peut pas être vu directement dans un navigateur.
Installation d’un logiciel pour streamer la caméra sur un browser
Il y a un logiciel opensource permettant de voir une caméra sur un site internet (depuis un serveur linux): RTSPtoWeb. J’ai crée un nouvel utilisateur sur mon serveur et je lance ce programme depuis cet utilisateur. ( go run *.go ).
On peut rajouter différents flux sur {ipdevotreserveur}:8083 – ce port n’est pas ouvert sur l’extérieur! J’ai donc rajouté dessus mes différentes caméras.
Ouverture sur l’extérieur (sur https / sécurisé).
J’ai lié mon nom de domaine cam.nuage.ch à une ip dynamique correspondant à mon système à la maison (CNAME). J’ai aussi configuré mon routeur pour rediriger le port 80 (http) et 443 (https) sur ce système.
J’ai ensuite rajouté depuis apache2 (le serveur d’application que j’utilise) un proxy sur ce port.
Je demande un mot de passe sauf pour le stream de la caméra!
Dans /etc/apache2/sites-available/monsite.conf, j’ai mis:
<VirtualHost *:80>
ServerAdmin gabriel.klein@nuage.ch
ServerName cam.nuage.ch
<Location />
AuthType Basic
AuthName "Restricted Content"
AuthUserFile /etc/apache2/htpasswd
Require valid-user
satisfy any
deny from all
</Location>
<Location /stream/19c5065b-8904-4293-9fe3-87858b5c0a8d/channel/0/webrtc>
Allow from All
Satisfy Any
</Location>
<Location /stream/19c5065b-8904-4293-9fe3-87858b5c0a8d/channel/0/hls>
Allow from All
Satisfy Any
</Location>
ProxyRequests On
ProxyPreserveHost on
ProxyPass / http://localhost:8083/
ProxyPassReverse / http://localhost:8083/
ErrorLog /var/log/apache2/error-cam.nuage.ch.log
# Possible values include: debug, info, notice, warn, error, crit,
# alert, emerg.
LogLevel warn
CustomLog /var/log/apache2/access-cam.nuage.ch.log combined
<VirtualHost>Remplacez 19c5065b-8904-4293-9fe3-87858b5c0a8d par votre propre identifiant de caméra!
Je redémarre mon serveur
/etc/init.d/apache2 reload).
Ensuite je sécurise mon serveur de caméra avec
certbot -tvv –apache -m gabriel.klein@nuage.ch –redirect –hsts –uir –reinstall -d cam.nuage.ch
Je peux maintenant accéder à mon flux vidéo depuis
https://cam.nuage.ch/stream/19c5065b-8904-4293-9fe3-87858b5c0a8d/channel/0/hls/live/index.m3u8
Rajouter ma caméra sur wordpress / mon site internet
J’ai essayé WebRtc, mais malheureusement pas compatible avec mon téléphone et certains navigateurs. Donc je me suis dirigé sur le format HLS.
J’ai rajouté dans ma page wordpress un block html.
<input type="hidden" name="hls-url" id="hls-url" value="https://cam.nuage.ch/stream/19c5065b-8904-4293-9fe3-87858b5c0a8d/channel/0/hls/live/index.m3u8">
<p><video id="wc-video" autoplay="" muted="" playsinline="" controls="" style="max-width: 100%; max-height: 100%;"></video></p>
<script>
document.addEventListener('DOMContentLoaded', function () {
const videoEl = document.querySelector('#wc-video')
const hlsUrl = document.querySelector('#hls-url').value
if (Hls.isSupported()) {
const hls = new Hls()
hls.loadSource(hlsUrl)
hls.attachMedia(videoEl)
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
videoEl.src = hlsUrl
}
})
</script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
Remplacez 19c5065b-8904-4293-9fe3-87858b5c0a8d par votre propre identifiant de caméra!
Et succès (après quand même plusieurs heures de recherche….).
J’espère que cet article va vous aider, même si il reste techniquement assez complexe.