Mise à jour du README pour inclure des instructions sur l'utilisation de la caméra en HTTPS en local.

Optimation du scan pour certains navigateurs

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

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 %}