Différences

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

--- linux:installation:rtsptoweb [2025/03/01 23:29] – [Intégrer les vidéos dans une page html] tutospisto
+++ linux:installation:rtsptoweb [2025/03/02 20:30] (Version actuelle) – tutospisto
@@ Ligne 77: / Ligne 77: @@
   },
   "streams": {
-    "Couvoir": {
+    "Cam1": {
-      "name": "Couvoir",
+      "name": "Cam1",
       "channels": {
         "0": {
@@ Ligne 89: / Ligne 89: @@
       }
     },
-    "Pondoir": {
+    "Cam2": {
-      "name": "Pondoir",
+      "name": "Cam2",
       "channels": {
         "0": {
@@ Ligne 127: / Ligne 127: @@
 Type=simple
 Restart=always
-ExecStart= /home/debisto/RTSPtoWeb/RTSPtoWeb.bin
+ExecStart= /$TONPATH/RTSPtoWeb/RTSPtoWeb.bin
-WorkingDirectory=/home/debisto/RTSPtoWeb
+WorkingDirectory=/$TONPATH/RTSPtoWeb
 [Install]
@@ Ligne 145: / Ligne 145: @@
 Exemple :
-https://pisto.fr.nf:8084
+<code bash>https://$TONDNS:8084</code>
@@ Ligne 151: / Ligne 151: @@
 ====== Intégrer les vidéos dans une page html ======
+Source :
+  * https://stackoverflow.com/questions/19782389/playing-m3u8-files-with-html-video-tag
+  * https://videojs.com/getting-started/#videojs-cdn
+  * https://github.com/videojs/http-streaming?tab=readme-ov-file#initialization
+  * https://unpkg.com/browse/@videojs/http-streaming@3.15.0/dist/videojs-http-streaming.min.js
+  * https://github.com/videojs/http-streaming?tab=readme-ov-file#installation
-<code bash>
-<!-- CSS  -->
+Pour l'ajouter dans une page Web, il faut utiliser videojs ( https://github.com/videojs/http-streaming?tab=readme-ov-file#initialization ).
- <link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet">
+Fichiers : {{ :linux:installation:videojs_js_et_css.7z |}}
+Exemple dans une page PHP :
-<!-- HTML -->
+<code php>
-<video id='hls-example'  class="video-js vjs-default-skin" width="800" height="600" controls>
+<!doctype html>
-<!-- <source type="application/x-mpegURL" src="https://pisto.fr.nf:8084/stream/Couvoir/channel/0/hls/live/index.m3u8"> -->
+<html lang="fr">
-<source type="application/x-mpegURL" src="https://pisto.fr.nf:8084/stream/Pondoir/channel/0/hls/live/index.m3u8">
+<head>
-</video>
+  <meta charset="utf-8">
+  <title>Titre</title>
+  <link href="../css.css" rel="stylesheet">
+  <link href="css/video-js.css" rel="stylesheet" />
+    <!-- "core" version of Video.js -->
+  <script src="js/video.min.js"></script>
+  <script src="js/videojs-http-streaming.min.js"></script>
+</head>
+<body>
-<!-- JS code -->
+<?php
-<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
-<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
+  $TONDNS = "example.org";
-<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
-<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>
+  $cameras = [
+    'Cam1',
+    'Cam2',
+    'Cam3'
+  ];
+  foreach ($cameras as $valeur) {
+    ?><video-js id=<?php echo ("'".$valeur."'");?> width='540' height='360' class="vjs-default-skin" controls autoplay muted style="margin-bottom:10px;">
+      <source src=<?php echo ("'https://".$TONDNS.":8084/stream/".$valeur."/channel/0/hls/live/index.m3u8'");?> type="application/x-mpegURL">
+    </video-js>
+    <script>
+      var player = videojs(<?php echo ("'".$valeur."'");?>);
+      player.play();
+    </script>
-<script>
+&nbsp;
-var player = videojs('hls-example');
-player.play();
-</script>
+<?php
+  }
+?>
+</body>
+</code>
+====== Ajouter une nouvelle Cam ======
+Editer la config de RTSPtoWeb :
+<code bash>nano /$TONPATH/RTSPtoWeb/config.json</code>
+Ajouter dans les streams :
+<code bash>
+    ,"NomDeLaCam": {
+      "name": "NomDeLaCam",
+      "channels": {
+        "0": {
+          "name": "ch1",
+          "url": "rtsp://IPDELACAM:554/11",
+          "debug": false,
+          "on_demand": true,
+          "audio": true,
+          "status": 0
+        }
+      }
+    }
 </code>
-Source : https://stackoverflow.com/questions/19782389/playing-m3u8-files-with-html-video-tag
+Redémarrer le service rtsp :
+<code bash>sudo systemctl restart rtsp.service</code>
+Vérifier son statut :
+<code bash>sudo systemctl status rtsp.service</code>
+Si tout est OK, la nouvelle cam est disponible par le gestionnaire de RTSPtoWeb.
-https://videojs.com/getting-started/#videojs-cdn
-https://github.com/videojs/http-streaming?tab=readme-ov-file#initialization
-https://unpkg.com/browse/@videojs/http-streaming@3.15.0/dist/videojs-http-streaming.min.js
-https://github.com/videojs/http-streaming?tab=readme-ov-file#installation

Les tutos de Pisto

Outils pour utilisateurs

Outils du site

Différences

Outils de la page