Différences

Ci-dessous, les différences entre deux révisions de la page.

--- ffmpeg_live_streaming [2025/04/22 20:03] – luc
+++ ffmpeg_live_streaming [2025/04/23 20:29] (Version actuelle) – luc
@@ Ligne 17: / Ligne 17: @@
   * Une connexion ethernet (le cuivre, y'a que ça de vrai)
   * (facultatif) un serveur web pour centraliser plusieurs Rpi+webcam
+===== Principe =====
+Dans les grandes lignes, on va demander à ffmpeg de capturer le flux vidéo depuis la webcam et de l'envoyer vers un serveur (nginx avec le bon module), qui se chargera de le diffuser à tous les clients qui se connectent en http.\\
+On notera que ffmpeg ne peut diffuser que s'il y a un récepteur actif, c'est le serveur nginx qui joue ce rôle, même si aucun client n'est connecté.
 ===== Installation du Raspberry Pi =====
 On aura un usage headless, or les versions "modernes" de Raspberry pi OS n'incluent pas de ssh par défaut, ni d'utilisateur avec login/mdp. Il faut les gérer au premier démarrage... ou rajouter des petits fichiers sur la partition ''boot'' avant le premier démarrage. J'ai noté [[rpi#login_et_mdp_par_defaut|ici]] comment faire.
+===== Serveur RTMP (nginx) =====
+Installation : ''apt install nginx libnginx-mod-rtmp''.
+=== Configuration en relais RTMP ===
+On configure nginx, le bloc rtmp doit être à la racine, il ne doit pas être inclus dans le bloc http comme le son les vhost :
+<code>
+# nginx.conf
+# Configuration de nginx en relais rtmp
+rtmp {
+    server {
+        listen 1935;        # Listen on standard RTMP port
+        chunk_size 4096;    # les paquets feront 4096 octets, le standard
+        application live {
+            live on;
+            record off;
+        }
+    }
+}
+</code>
+On peut envoyer un flux vers le serveur en indiquant son ip `rtmp://192.168.xxx.xxx:1935/live/stream`
+Le port est facultatif, car nous avons utilisé 1935 qui est le standard.
+Le choix de "live" comme indicateur (sous dossier) est arbitraire, ce pourrait être n'importe quoi, mais il faut que ce soit le même entre la config nginx et la config de ffmpeg.
+Le terme "stream" est également arbitraire, il s'agit du nom du flux, on pourrait imaginer un autre nom comme GeoCamera2.
+On pourrait ensuite se connecter au serveur avec un client comme VLC en indiquant l'adresse `rtmp://192.168.xxx.xxx:1935/live/stream` (mais il faut d'abord diriger le flux de la webcam au serveur)
+C'est bien, mais on ne peut pas accéder au flux RTMP dans le navigateur (peut-être certains lecteurs media en JS le peuvent, mais je ne les ai pas trouvés)
+=== Configuration pour servir en HLS ===
+On va diffuser jusqu'à un navigateur web grâce au protocole/format HLS
+<code>
+# nginx.conf
+# Configuration pour servir le flux en HLS
+rtmp {
+    server {
+        listen 1935;        # Listen on standard RTMP port
+        chunk_size 4096;    # les paquets feront 4096 octets, le standard
+        application live {
+            live on;
+            record off;
+            # Turn on HLS
+            hls on;
+            hls_path /dev/shm/hls/;
+            hls_fragment 3;
+            hls_playlist_length 60;
+        }
+    }
+}
+</code>
+On notera que nous avons choisi de mettre les fichiers écrits par HLS dans un dossier dans la RAM (/dev/shm, pour être plus rapide que sur la carte SD et éviter d'user celle-ci), il convient que ce dossier existe et soit accessible en écriture à l'user du serveur web (www-data ou nginx, selon la config).
+Il faut ensuite gérer 2 vhost : un pour le flux HLS, l'autre pour la page web qui contiendra le lecteur qui consommera le flux. Ce coup-ci, cela se fait dans un vhoist classique (fichier xxx.conf dans le repertoire "httpd" ou "sites-enabled" selon la config).
+<code>
+# Servir le flux HLS (de simples fichiers, mais avec les headers qui vont bien)
+# mon_vhost.conf ou inclus dans le bloc http
+server {
+        listen 8080;
+        location /hls {
+                # Disable cache
+                add_header 'Cache-Control' 'no-cache';
+                # CORS setup
+                add_header Access-Control-Allow-Origin *;
+                add_header 'Access-Control-Allow-Origin' '*' always;
+                add_header 'Access-Control-Expose-Headers' 'Content-Length';
+                # allow CORS preflight requests
+                if ($request_method = 'OPTIONS') {
+                        add_header 'Access-Control-Allow-Origin' '*';
+                        add_header 'Access-Control-Max-Age' 1728000;
+                        add_header 'Content-Type' 'text/plain charset=UTF-8';
+                        add_header 'Content-Length' 0;
+                        return 204;
+                }
+                types {
+                        application/vnd.apple.mpegurl m3u8;
+                        video/mp2t ts;
+                }
+                root /dev/shm;
+        }
+}
+</code>
+On notera l'accès au dossier parent de la où se trouve le flux HLS, `/dev/shm/hls -> /dev/shml`.
+On notera les directives pour autoriser les flux qui viennent d'ailleurs que le site web de base (CORS, Cross Origins...)
+<code>
+# Servir le site web qui contiendra le player (simple fichier html)
+# mon_vhost.conf ou autre ou inclus dans le bloc http
+# dans un bloc server { }, on peut juste servir le fichier
+root /path/to/file.html
+location / {
+        add_header Access-Control-Allow-Origin *;
+        if ($request_method = 'OPTIONS') {
+                add_header 'Access-Control-Allow-Origin' '*';
+                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
+        }
+        # First attempt to serve request as file, then
+        # as directory, then fall back to displaying a 404.
+        try_files $uri $uri/ =404;
+}
+</code>
+On notera les entêtes pour les autorisations de CORS (Cross Origins) bla bla...
+=== Page web avec le lecteur ===
+On va s'appuyer sur `videojs` en version > 7.0 (important, sinon le flux HLS nécessite une lib JS additionnelle). On peut utiliser le CDN ou le proposer en statique (on préfèrera mais le code demo ci-dessous utlise le CDN)
+```
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Live Streaming</title>
+        <link href="//vjs.zencdn.net/8.21.1/video-js.css" rel="stylesheet">
+    </head>
+    <body>
+        <p>VIDEO.JS HLS</p>
+        <video
+            class="video-js"
+            controls
+            preload="auto"
+            width="640"
+            height="480"
+            data-setup="{}"
+          >
+            <source src="http://192.168.0.63:8080/hls/stream.m3u8" type="application/x-mpegURL" />
+            <p class="vjs-no-js">
+              To view this video please enable JavaScript, and consider upgrading to a
+              web browser that
+              <a href="https://videojs.com/html5-video-support/" target="_blank"
+                >supports HTML5 video</a
+              >
+            </p>
+          </video>
+          <script src="https://vjs.zencdn.net/8.21.1/video.min.js"></script>
+    </body>
+</html>
+```
+On notera l'url vers le flux HLS configuré précédemment.
+Voilà, on a ce qu'il faut pour consommer le flux video, il faut maintenant le capturer, c'est le travail de ffmpeg.
 ===== Vérification des caméras connectées =====
@@ Ligne 48: / Ligne 215: @@
 </code>
-Les bcmm2835 ne nous intéressent pas, il s'agit probablement de la gestion de la caméra par le connecteur CSI (nappe). La webcam que nous avons est bien de marque Microsoft, et elle est branchée en USB. C'est donc ce dernier bloc qui nous intéresse.\\
+Les bcm2835 ne nous intéressent pas, il s'agit probablement de la gestion de la caméra par le connecteur CSI (nappe). La webcam que nous avons est bien de marque Microsoft, et elle est branchée en USB. C'est donc ce dernier bloc qui nous intéresse.\\
 => On apprend qu'elle accessible par ''/dev/video0''.
 ===== ffmpeg pour la capture =====