From 4e568b288c11bf3f036fa58c0ca31892075c15df Mon Sep 17 00:00:00 2001
From: scayac <christophe.scaya@gmail.com>
Date: Wed, 30 Sep 2026 21:28:41 +0200
Subject: [PATCH] =?UTF-8?q?Mise=20=C3=A0=20jour=20du=20README=20pour=20inc?=
 =?UTF-8?q?lure=20des=20instructions=20sur=20l'utilisation=20de=20la=20cam?=
 =?UTF-8?q?=C3=A9ra=20en=20HTTPS=20en=20local.=20Optimation=20du=20scan=20?=
 =?UTF-8?q?pour=20certains=20navigateurs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                |  2 +-
 main/templates/scan.html | 48 ++++++++++++++++++++++++++++++----------
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 0a76a3e..6c56679 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ Application Django pour l’enregistrement des temps de courses des coureurs.
 
 ## Tester en HTTPS en local avec Daphne
 
-Depuis la racine du projet, après avoir activé l'environnement virtuel :
+ATTENTION ! L'utilisation de la caméra pour scanner les QR codes nécessite que le site soit servi en HTTPS. Pour tester en local, vous pouvez générer un certificat autosigné et lancer Daphne avec TLS comme expliqué ci-dessous. Le certificat autosigné n'est pas destiné à un usage en production.
 
 1. Générez un certificat autosigné pour `localhost` :
    ```bash
diff --git a/main/templates/scan.html b/main/templates/scan.html
index a444157..3bb3e83 100644
--- a/main/templates/scan.html
+++ b/main/templates/scan.html
@@ -1,6 +1,29 @@
 {% extends 'base.html' %}
 {% block content %}
 {% load static %}
+<style>
+    #reader {
+        position: relative;
+    }
+
+    #reader::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: min(250px, calc(100% - 20px));
+        aspect-ratio: 1;
+        border: 2px solid #fff;
+        box-sizing: border-box;
+        content: '';
+        pointer-events: none;
+        transform: translate(-50%, -50%);
+        z-index: 10;
+    }
+
+    #reader.qr-detected::after {
+        border-color: rgb(90, 193, 56);
+    }
+</style>
 <div class="container-fluid mt-4">
     <div class="row">
          <div class="col-12">
@@ -146,14 +169,19 @@ let camerasAvailable = [];
 let currentCameraId = null;
 
 document.addEventListener('DOMContentLoaded', function() {
-    html5Qrcode = new Html5Qrcode("reader");
+    const reader = document.getElementById('reader');
+    if (!reader) return;
+
+    html5Qrcode = new Html5Qrcode('reader', {
+        formatsToSupport: [Html5QrcodeSupportedFormats.QR_CODE]
+    });
     Html5Qrcode.getCameras().then(cameras => {
         camerasAvailable = cameras || [];
         if (camerasAvailable.length) {
             currentCameraId = camerasAvailable[0].id;
             html5Qrcode.start(
                 currentCameraId,
-                { fps: 10, qrbox: 250 },
+                { fps: 15, qrbox: 250 },
                 onScanSuccess
             );
         }
@@ -174,7 +202,7 @@ document.addEventListener('DOMContentLoaded', function() {
                         currentCameraId = cam.id;
                         html5Qrcode.start(
                             currentCameraId,
-                            { fps: 10, qrbox: 250 },
+                            { fps: 15, qrbox: 250 },
                             onScanSuccess
                         );
                     });
@@ -192,6 +220,11 @@ function getCourseIdFromUrl() {
 }
 function onScanSuccess(decodedText, decodedResult) {
     console.log('Scan détecté :', decodedText, 'Course:', getCourseIdFromUrl());
+    if (decodedResult) {
+        const reader = document.getElementById('reader');
+        reader.classList.add('qr-detected');
+        setTimeout(() => reader.classList.remove('qr-detected'), 350);
+    }
     if (decodedText === lastScanned || window.scanDebounce) return;
     window.scanDebounce = true;
     lastScanned = decodedText;
@@ -245,14 +278,5 @@ document.addEventListener('DOMContentLoaded', function() {
     };
 });
 
-Html5Qrcode.getCameras().then(cameras => {
-    if (cameras && cameras.length) {
-        html5Qrcode.start(
-            cameras[0].id,
-            { fps: 10, qrbox: 250 },
-            onScanSuccess
-        );
-    }
-});
 </script>
 {% endblock %}