L'aide mémoire du petit Louc

Outils pour utilisateurs

Outils du site

Piste :
ffmpeg_live_streaming

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
ffmpeg_live_streaming [2025/04/22 19:53] – lucffmpeg_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)   * Une connexion ethernet (le cuivre, y'a que ça de vrai)
   * (facultatif) un serveur web pour centraliser plusieurs Rpi+webcam   * (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 ===== ===== 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. 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 ===== ===== Vérification des caméras connectées =====
Ligne 48: Ligne 215:
 </code> </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''. => On apprend qu'elle accessible par ''/dev/video0''.
 +
 +
 +
 +===== ffmpeg pour la capture =====
 +
 +[[https://trac.ffmpeg.org/wiki/Capture/Webcam#Linux|inspiration, source partielle]]
 +
 +ffmpeg permet la capture de video depuis la webcam. C'est un outil qui se lance en ligne de commande, et qui nécessite un certain nombre de paramètres pour bien définir et optimiser le flux. Il n'est pas rare de passer 1h (voir beaucoup plus) à peaufiner les paramètres de cette mono-ligne de commande quand on est débutant sur ffmpeg. Mais quelle jouissance quand ça fonctionne :)
 +
 +=== Installation === 
 +Sur mon Raspberry Pi OS, l'installation de ffmpeg nécessite 156 paquets et 400 Mo.
 +
 +=== Formats disponibles ===
 +On peut voir quels sont les formats
 +
 +
  
  
Ligne 59: Ligne 242:
 Liens (pas testés): Liens (pas testés):
   * https://kaanlabs.com/low-latency-webcam-to-browser-streaming-with-rtsp-webrtc/   * https://kaanlabs.com/low-latency-webcam-to-browser-streaming-with-rtsp-webrtc/
 +
  
 ===== Autre solution : le streaming d'images fixes ===== ===== Autre solution : le streaming d'images fixes =====
Ligne 83: Ligne 267:
     - faire des captures en boucle, sur le même nom de fichier (pour un streaming par exemple)     - faire des captures en boucle, sur le même nom de fichier (pour un streaming par exemple)
     - avec des noms de fichiers qui s'incrémentent pour un enregistrement     - avec des noms de fichiers qui s'incrémentent pour un enregistrement
 +
 +Il convient ensuite de créer un serveur web qui diffuse les images.
 +
 +Idées :
 +  * mettre les images dans ''/dev/shm'', qui n'est autre qu'une zone de la RAM pour éviter d'user la carte SD (et gagner en vitesse)
 +  * côté client, utiliser une lib JS comme [[https://htmx.org/|htmlx]] pour gérer le poll régulier des images
 +  * Rajouter des subprocess python/cli pour vérifier si la caméra est connectée (entre le serveur central et le rpi+webcam, ping ?)
  
 === rpicam === === rpicam ===
ffmpeg_live_streaming.1745351623.txt.gz · Dernière modification : 2025/04/22 19:53 de luc