From 53c409cc21b44732260a7e002ef3dd0a3a2bd1ba Mon Sep 17 00:00:00 2001
From: spgeticode <pastaparty25@gmail.com>
Date: Tue, 18 Mar 2025 20:53:26 +0800
Subject: [PATCH] Added ISBN barcode scaning functionality

Updated search.html with QuaggsJS inline so you scan isbn barcodes. Scanned information is directly inserted into the search field.

The scan ISBN button is only available when the client is using https (the button is hidden)
---
 Booktracker/wwwroot/search.html | 70 ++++++++++++++++++++++++++++++++-
 1 file changed, 69 insertions(+), 1 deletion(-)

diff --git a/Booktracker/wwwroot/search.html b/Booktracker/wwwroot/search.html
index 12e2392..d0b95ef 100644
--- a/Booktracker/wwwroot/search.html
+++ b/Booktracker/wwwroot/search.html
@@ -86,12 +86,80 @@ <h2 class="page-title">
                                 <button class="btn searchBookButton" onclick="searchForBook(event)" type="button">Search</button> 
                                 
                                 <button class="btn searchBookButton" onclick="manualEntry()">Manual Entry</button>
+                                
+                                <button class="btn searchBookButton" id="scanIsbnButton"  onclick="startScanner()">Scan ISBN</button>
                                 </div>
                             </div>
                         </div>
                       </div>
                     </div>
                     
+		<video id="scanner" playsinline style="width: 400px; object-fit: cover; height: 400px; display: none;"></video>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
+    <script>
+	//In the case the client ist using https, this disables the button (browsers won't let web apps access the camera on http)
+	document.addEventListener("DOMContentLoaded", function () {
+    	  let scanButton = document.getElementById("scanIsbnButton");
+	    if (window.location.protocol !== "https:") {
+        	scanButton.disabled = true;
+		scanButton.style.display = "none"; // Hides the button
+		console.log("HTTP detected - hiding Scan ISBN button.");
+	    } else {
+		console.log("HTTPS detected - button remains visible.");
+		}
+	});
+      function startScanner() {
+        let scannerElement = document.getElementById("scanner");
+	
+	// Makes sure video element is visible,not full screen and the size of the container
+    	scannerElement.style.display = "block";
+	scannerElement.style.width = "400px";
+   	scannerElement.style.height = "300px";
+    	scannerElement.setAttribute("playsinline", "true"); // Prevents full screen on mobile
+
+    	// Request camera access and attach stream
+    	navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
+    	.then(function (stream) {
+        	scannerElement.srcObject = stream;
+        	scannerElement.play();
+    	})
+    	.catch(function (err) {
+        	console.error("Camera access denied:", err);
+        	alert("Failed to access camera. Please check browser permissions.");
+  	  });
+        Quagga.init(
+          {
+            inputStream: {
+              name: "Live",
+              type: "LiveStream",
+              target: scannerElement,
+              constraints: {
+                facingMode: "environment",
+              },
+            },
+            decoder: {
+              readers: ["ean_reader"],
+            },
+          },
+          function (err) {
+            if (err) {
+              console.error("QuaggaJS Initialization Error:", err);
+              return;
+            }
+            Quagga.start();
+            console.log("QuaggaJS started successfully.");
+          }
+        );
+
+        Quagga.onDetected(function (result) {
+          let isbn = result.codeResult.code;
+          document.getElementById("bookSearchID").value = isbn;
+          Quagga.stop();
+          scannerElement.style.display = "none";
+        });
+      }
+    </script>
 
       
                 </div>
@@ -242,4 +310,4 @@ <h3 class="card-title" id="searchCardTitle5">Card with title and image</h3>
     
     <script src="src/checkAuth.js"></script>
     <script src="src/search.js"></script>
-</html>
\ No newline at end of file
+</html>