Différences

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

--- ffmpeg_live_streaming [2025/04/23 20:11] – luc
+++ ffmpeg_live_streaming [2025/04/23 20:29] (Version actuelle) – luc
@@ Ligne 85: / Ligne 85: @@
 }
 </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.
@@ Ligne 114: / 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''.