rachid/Lucas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
Lucas/doc_camera.php
Debian 24dbc7cd6a Initial commit — Serveur Lucas SmartEye 
API réception alertes chute (SmartEye/YOLO), analyse IA (Gemini 2.5 Flash),
gestion alertes avec escalade (watchdog), notifications Firebase,
dashboard web, documentation MkDocs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-14 21:26:06 +01:00

283 lines
20 KiB
PHP
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SmartEye — Configuration Caméra</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { background: #0a0e1a; }
.flux-1 { border-left: 3px solid #ef4444; }
.flux-2 { border-left: 3px solid #3b82f6; }
.badge-flux1 { background: #ef444422; color: #f87171; border: 1px solid #ef444444; }
.badge-flux2 { background: #3b82f622; color: #60a5fa; border: 1px solid #3b82f644; }
</style>
</head>
<body class="min-h-screen text-slate-200">
<!-- HEADER -->
<nav class="bg-slate-900/80 backdrop-blur border-b border-slate-800 px-6 py-4 sticky top-0 z-50">
<div class="max-w-5xl mx-auto flex justify-between items-center">
<div class="flex items-center gap-4">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<span class="font-bold text-xl tracking-wider text-white">CONFIG <span class="text-slate-500 text-sm font-normal">CAM&Eacute;RA</span></span>
</div>
<div class="flex gap-3">
<a href="checklist.php" class="text-slate-400 hover:text-white text-sm border border-slate-700 px-3 py-2 rounded transition">Checklist</a>
<a href="admin.php" class="text-slate-400 hover:text-white text-sm border border-slate-700 px-3 py-2 rounded transition">Admin</a>
</div>
</div>
</nav>
<div class="max-w-5xl mx-auto px-6 py-8 space-y-8">
<!-- CONCEPT : LES 2 FLUX -->
<div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
<div class="px-6 py-4 bg-slate-800/50 border-b border-slate-800">
<h2 class="font-bold text-white text-lg">Comprendre les 2 flux vid&eacute;o</h2>
<p class="text-slate-400 text-sm mt-1">Chaque cam&eacute;ra IP diffuse 2 flux RTSP simultan&eacute;s, utilis&eacute;s pour des besoins diff&eacute;rents.</p>
</div>
<div class="p-6 grid grid-cols-2 gap-6">
<!-- FLUX 2 = Détection -->
<div class="bg-slate-950 rounded-lg border border-blue-500/30 p-5 space-y-3">
<div class="flex items-center gap-3">
<span class="badge-flux2 px-3 py-1 rounded font-bold text-sm">Flux 2 — D&eacute;tection</span>
<span class="font-mono text-xs text-slate-500">/cam/realmonitor?channel=1&subtype=<span class="text-blue-400 font-bold">1</span></span>
</div>
<div class="text-sm text-slate-300 space-y-2">
<p><span class="text-blue-400 font-bold">Usage :</span> Flux analys&eacute; en continu par YOLO sur le Jetson pour d&eacute;tecter les chutes.</p>
<p><span class="text-blue-400 font-bold">Pourquoi basse r&eacute;solution ?</span> YOLO n'a pas besoin de HD pour d&eacute;tecter une personne. Un flux l&eacute;ger (800x448) permet :</p>
<ul class="list-disc list-inside text-slate-400 text-xs space-y-1 ml-2">
<li>Moins de charge GPU sur le Jetson</li>
<li>Analyse plus rapide (+ de FPS trait&eacute;s)</li>
<li>Plusieurs cam&eacute;ras en parall&egrave;le</li>
</ul>
</div>
<div class="bg-blue-950/30 rounded p-3 text-xs font-mono text-blue-300 flex items-center gap-2">
<span class="text-blue-500">CAM</span> &rarr; <span class="text-blue-400">Flux 2 (SD)</span> &rarr; <span class="text-slate-400">Jetson YOLO</span> &rarr; <span class="text-red-400">Chute ?</span>
</div>
</div>
<!-- FLUX 1 = Preuve HD -->
<div class="bg-slate-950 rounded-lg border border-red-500/30 p-5 space-y-3">
<div class="flex items-center gap-3">
<span class="badge-flux1 px-3 py-1 rounded font-bold text-sm">Flux 1 — Preuve HD</span>
<span class="font-mono text-xs text-slate-500">/cam/realmonitor?channel=1&subtype=<span class="text-red-400 font-bold">0</span></span>
</div>
<div class="text-sm text-slate-300 space-y-2">
<p><span class="text-red-400 font-bold">Usage :</span> Quand YOLO d&eacute;tecte une chute, SmartEye capture une image <strong>HD</strong> depuis ce flux et l'envoie au serveur Lucas.</p>
<p><span class="text-red-400 font-bold">Pourquoi haute r&eacute;solution ?</span> L'image de preuve doit &ecirc;tre nette pour :</p>
<ul class="list-disc list-inside text-slate-400 text-xs space-y-1 ml-2">
<li>Analyse pr&eacute;cise par Gemini (position, visage, contexte)</li>
<li>Preuve visuelle pour la famille dans l'app AVA</li>
<li>Archivage en qualit&eacute;</li>
</ul>
</div>
<div class="bg-red-950/30 rounded p-3 text-xs font-mono text-red-300 flex items-center gap-2">
<span class="text-red-500">CHUTE</span> &rarr; <span class="text-red-400">Capture HD</span> &rarr; <span class="text-emerald-400">Lucas (Gemini)</span> &rarr; <span class="text-indigo-400">AVA</span>
</div>
</div>
</div>
<!-- Schéma résumé -->
<div class="px-6 pb-6">
<div class="bg-slate-950 rounded-lg border border-slate-700 p-4">
<pre class="text-xs text-slate-400 font-mono leading-relaxed">
CAM&Eacute;RA IP (ex: 192.168.1.196)
&boxv;
&boxvr;&HorizontalLine;&HorizontalLine; <span class="text-blue-400">Flux 2 (subtype=1)</span> &mdash; 800x448, 15fps, 300kbps &mdash;&rarr; <span class="text-amber-400">Jetson YOLO</span> (d&eacute;tection continue 24/7)
&boxv; &boxv;
&boxv; <span class="text-red-400">Chute d&eacute;tect&eacute;e !</span>
&boxv; &boxv;
&boxur;&HorizontalLine;&HorizontalLine; <span class="text-red-400">Flux 1 (subtype=0)</span> &mdash; 2880x1620, 20fps, 6Mbps &mdash;&rarr; <span class="text-amber-400">Capture screenshot HD</span>
&boxv;
POST image &rarr; <span class="text-emerald-400">Lucas api.php</span>
&boxv;
<span class="text-emerald-400">Gemini analyse</span> &rarr; <span class="text-indigo-400">Push AVA</span></pre>
</div>
</div>
</div>
<!-- PARAMÈTRES RECOMMANDÉS -->
<div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
<div class="px-6 py-4 bg-slate-800/50 border-b border-slate-800">
<h2 class="font-bold text-white text-lg">Param&egrave;tres recommand&eacute;s</h2>
<p class="text-slate-400 text-sm mt-1">Configuration optimale pour le syst&egrave;me SmartEye. Accessible via l'interface web de la cam&eacute;ra.</p>
</div>
<!-- Paramètres généraux -->
<div class="p-6 space-y-6">
<div>
<h3 class="text-sm font-bold text-slate-300 uppercase tracking-wider mb-3">Param&egrave;tres g&eacute;n&eacute;raux</h3>
<div class="grid grid-cols-2 gap-4">
<div class="bg-slate-950 rounded border border-slate-700 p-4">
<table class="w-full text-sm">
<tr class="border-b border-slate-800">
<td class="py-2 text-slate-500">Format vid&eacute;o</td>
<td class="py-2 text-white font-bold text-right">50Hz</td>
</tr>
<tr>
<td class="py-2 text-slate-500">Codage vid&eacute;o</td>
<td class="py-2 text-white font-bold text-right">H.264 Main Profile</td>
</tr>
</table>
</div>
<div class="bg-slate-950 rounded border border-slate-700 p-4 flex items-center">
<p class="text-xs text-slate-500"><span class="text-amber-400 font-bold">H.264</span> est indispensable. Le H.265 n'est pas support&eacute; par tous les lecteurs RTSP. Le Main Profile offre le meilleur compromis qualit&eacute;/compatibilit&eacute;.</p>
</div>
</div>
</div>
<!-- FLUX 1 : HD -->
<div>
<div class="flex items-center gap-3 mb-3">
<h3 class="text-sm font-bold text-red-400 uppercase tracking-wider">Premier flux — Preuve HD</h3>
<span class="badge-flux1 px-2 py-0.5 rounded text-xs font-bold">subtype=0</span>
</div>
<div class="bg-slate-950 rounded border border-red-500/20 overflow-hidden">
<table class="w-full text-sm">
<thead class="bg-red-950/30 text-xs text-red-300 uppercase">
<tr>
<th class="px-4 py-2 text-left">Param&egrave;tre</th>
<th class="px-4 py-2 text-left">Valeur</th>
<th class="px-4 py-2 text-left">Explication</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-800">
<tr>
<td class="px-4 py-3 text-slate-400">R&eacute;solution</td>
<td class="px-4 py-3 text-white font-bold font-mono">2880 x 1620</td>
<td class="px-4 py-3 text-xs text-slate-500">R&eacute;solution max de la cam&eacute;ra. Image nette pour Gemini et la famille.</td>
</tr>
<tr>
<td class="px-4 py-3 text-slate-400">D&eacute;bit binaire</td>
<td class="px-4 py-3 text-white font-bold font-mono">6144 kbps</td>
<td class="px-4 py-3 text-xs text-slate-500">D&eacute;bit max. Qualit&eacute; optimale pour la capture de preuve.</td>
</tr>
<tr>
<td class="px-4 py-3 text-slate-400">Fr&eacute;quence</td>
<td class="px-4 py-3 text-white font-bold font-mono">20 fps</td>
<td class="px-4 py-3 text-xs text-slate-500">Suffisant pour capturer un screenshot net. Pas besoin de 25fps.</td>
</tr>
<tr>
<td class="px-4 py-3 text-slate-400">Intervalle image cl&eacute;</td>
<td class="px-4 py-3 text-white font-bold font-mono">20</td>
<td class="px-4 py-3 text-xs text-slate-500">1 image cl&eacute; par seconde (= intervalle / fps). Capture plus rapide.</td>
</tr>
<tr>
<td class="px-4 py-3 text-slate-400">Contr&ocirc;le d&eacute;bit</td>
<td class="px-4 py-3 text-white font-bold">CBR</td>
<td class="px-4 py-3 text-xs text-slate-500">D&eacute;bit constant. Qualit&eacute; stable m&ecirc;me en mouvement.</td>
</tr>
<tr>
<td class="px-4 py-3 text-slate-400">Qualit&eacute; image</td>
<td class="px-4 py-3 text-white font-bold font-mono">1 <span class="text-xs text-slate-500 font-normal">(meilleure)</span></td>
<td class="px-4 py-3 text-xs text-slate-500">Valeur la plus basse = qualit&eacute; max.</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- FLUX 2 : Détection -->
<div>
<div class="flex items-center gap-3 mb-3">
<h3 class="text-sm font-bold text-blue-400 uppercase tracking-wider">Deuxi&egrave;me flux — D&eacute;tection YOLO</h3>
<span class="badge-flux2 px-2 py-0.5 rounded text-xs font-bold">subtype=1</span>
</div>
<div class="bg-slate-950 rounded border border-blue-500/20 overflow-hidden">
<table class="w-full text-sm">
<thead class="bg-blue-950/30 text-xs text-blue-300 uppercase">
<tr>
<th class="px-4 py-2 text-left">Param&egrave;tre</th>
<th class="px-4 py-2 text-left">Valeur</th>
<th class="px-4 py-2 text-left">Explication</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-800">
<tr>
<td class="px-4 py-3 text-slate-400">R&eacute;solution</td>
<td class="px-4 py-3 text-white font-bold font-mono">800 x 448</td>
<td class="px-4 py-3 text-xs text-slate-500">YOLO d&eacute;tecte tr&egrave;s bien en basse r&eacute;solution. &Eacute;conomise le GPU.</td>
</tr>
<tr>
<td class="px-4 py-3 text-slate-400">D&eacute;bit binaire</td>
<td class="px-4 py-3 text-white font-bold font-mono">300 kbps</td>
<td class="px-4 py-3 text-xs text-slate-500">20x moins que le flux HD. Bande passante n&eacute;gligeable.</td>
</tr>
<tr>
<td class="px-4 py-3 text-slate-400">Fr&eacute;quence</td>
<td class="px-4 py-3 text-white font-bold font-mono">15 fps</td>
<td class="px-4 py-3 text-xs text-slate-500">Suffisant pour d&eacute;tecter un mouvement. Plus = plus de charge GPU inutile.</td>
</tr>
<tr>
<td class="px-4 py-3 text-slate-400">Intervalle image cl&eacute;</td>
<td class="px-4 py-3 text-white font-bold font-mono">30</td>
<td class="px-4 py-3 text-xs text-slate-500">1 image cl&eacute; toutes les 2 secondes. Acceptable pour la d&eacute;tection.</td>
</tr>
<tr>
<td class="px-4 py-3 text-slate-400">Contr&ocirc;le d&eacute;bit</td>
<td class="px-4 py-3 text-white font-bold">VBR</td>
<td class="px-4 py-3 text-xs text-slate-500">D&eacute;bit variable. &Eacute;conomise la bande passante quand rien ne bouge.</td>
</tr>
<tr>
<td class="px-4 py-3 text-slate-400">Qualit&eacute; image</td>
<td class="px-4 py-3 text-white font-bold font-mono">1 <span class="text-xs text-slate-500 font-normal">(meilleure)</span></td>
<td class="px-4 py-3 text-xs text-slate-500">On garde la meilleure qualit&eacute; m&ecirc;me en SD pour la d&eacute;tection.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- URLs RTSP -->
<div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
<div class="px-6 py-4 bg-slate-800/50 border-b border-slate-800">
<h2 class="font-bold text-white text-lg">URLs RTSP</h2>
<p class="text-slate-400 text-sm mt-1">Format des URLs pour cam&eacute;ras Dahua. Remplacer l'IP par celle de la cam&eacute;ra.</p>
</div>
<div class="p-6 space-y-4">
<div class="bg-slate-950 rounded border border-red-500/20 p-4">
<div class="flex items-center gap-2 mb-2">
<span class="badge-flux1 px-2 py-0.5 rounded text-xs font-bold">Flux 1 — HD</span>
<span class="text-xs text-slate-500">Capture de preuve</span>
</div>
<code class="text-sm text-red-300 font-mono">rtsp://admin:password@192.168.1.196/cam/realmonitor?channel=1&subtype=0</code>
</div>
<div class="bg-slate-950 rounded border border-blue-500/20 p-4">
<div class="flex items-center gap-2 mb-2">
<span class="badge-flux2 px-2 py-0.5 rounded text-xs font-bold">Flux 2 — SD</span>
<span class="text-xs text-slate-500">D&eacute;tection YOLO 24/7</span>
</div>
<code class="text-sm text-blue-300 font-mono">rtsp://admin:password@192.168.1.196/cam/realmonitor?channel=1&subtype=1</code>
</div>
<div class="bg-amber-950/20 border border-amber-500/30 rounded p-3 text-xs text-amber-300">
<strong>Note :</strong> Le <span class="font-mono">channel</span> correspond au num&eacute;ro de canal de la cam&eacute;ra (1 pour une cam&eacute;ra mono-objectif). Le <span class="font-mono">subtype</span> s&eacute;lectionne le flux : <strong>0</strong> = principal (HD), <strong>1</strong> = secondaire (SD).
</div>
</div>
</div>
<!-- CHECKLIST RAPIDE -->
<div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
<div class="px-6 py-4 bg-slate-800/50 border-b border-slate-800">
<h2 class="font-bold text-white text-lg">Checklist configuration cam&eacute;ra</h2>
</div>
<div class="p-6">
<ol class="space-y-3 text-sm text-slate-300">
<li class="flex gap-3"><span class="text-slate-600 font-bold w-6">1.</span> Acc&eacute;der &agrave; l'interface web de la cam&eacute;ra <span class="font-mono text-xs text-slate-500">(http://IP_CAM)</span></li>
<li class="flex gap-3"><span class="text-slate-600 font-bold w-6">2.</span> Aller dans <strong>Param&egrave;tres &rarr; Cam&eacute;ra &rarr; Vid&eacute;o</strong></li>
<li class="flex gap-3"><span class="text-slate-600 font-bold w-6">3.</span> Configurer le <span class="text-red-400 font-bold">Premier flux</span> (HD) selon le tableau ci-dessus</li>
<li class="flex gap-3"><span class="text-slate-600 font-bold w-6">4.</span> Configurer le <span class="text-blue-400 font-bold">Deuxi&egrave;me flux</span> (SD) selon le tableau ci-dessus</li>
<li class="flex gap-3"><span class="text-slate-600 font-bold w-6">5.</span> Cliquer <strong>Appliquer</strong></li>
<li class="flex gap-3"><span class="text-slate-600 font-bold w-6">6.</span> Tester les 2 flux RTSP avec VLC <span class="font-mono text-xs text-slate-500">(vlc rtsp://...)</span></li>
<li class="flex gap-3"><span class="text-slate-600 font-bold w-6">7.</span> V&eacute;rifier que SmartEye re&ccedil;oit le flux 2 et d&eacute;tecte correctement</li>
</ol>
</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink