Streamer une caméra sur internet

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.