From 3e1380ca4783977a484d9a60a0a94f3e3d3e263e Mon Sep 17 00:00:00 2001
From: Janis Steiner <janis.st44@gmail.com>
Date: Mon, 14 Oct 2024 12:38:32 +0100
Subject: [PATCH] fixing webcam issues

---
 sys0-code/api/download_image.php | 12 +++++++++
 sys0-code/app/webcam.php         | 45 +++++++++++++++++++++-----------
 2 files changed, 42 insertions(+), 15 deletions(-)
 create mode 100644 sys0-code/api/download_image.php
diff --git a/sys0-code/api/download_image.php b/sys0-code/api/download_image.php
new file mode 100644
index 0000000..db26d59
--- /dev/null
+++ b/sys0-code/api/download_image.php
@@ -0,0 +1,12 @@
+<?php
+	// Get parameters
+	$username = htmlspecialchars($_GET["username"]);
+	$printer_url = $_GET["url"];
+
+	// Path to save the downloaded image
+	$path = "/var/www/html/user_files/$username/$printer_url.jpeg";
+
+	// Download the latest snapshot from the printer URL
+	exec("wget --quiet \"http://$printer_url/webcam/?action=snapshot\" -O $path");
+
+?>
diff --git a/sys0-code/app/webcam.php b/sys0-code/app/webcam.php
index 70b7511..8eb82b8 100644
--- a/sys0-code/app/webcam.php
+++ b/sys0-code/app/webcam.php
@@ -1,26 +1,41 @@
 <!DOCTYPE html>
 <html>
 	<?php
-		$username=htmlspecialchars($_GET["username"]);
-		$printer_url=$_GET["url"];
-		$rotation=$_GET["rotation"];
+		$username = htmlspecialchars($_GET["username"]);
+		$printer_url = $_GET["url"];
+		$rotation = $_GET["rotation"];
 	?>
 	<head>
-	  <title>Webcam</title>
-	
+		<title>Webcam</title>
 	</head>
 	<body>
-		<?php
-			$path = "/var/www/html/user_files/$username/$printer_url.jpeg";
-			unlink($path);			
-			exec("wget --quiet \"http://$printer_url/webcam/?action=snapshot\" -O $path");
-			echo("<img style='transform: rotate(".$rotation."deg);' loading='lazy' width='100%' src='/user_files/$username/$printer_url.jpeg'>");
-		?>
+		<!-- Display the first image -->
+		<img id="webcam-image" style="transform: rotate(<?php echo $rotation; ?>deg);" width="100%" src="/user_files/<?php echo $username; ?>/<?php echo $printer_url; ?>.jpeg" alt="Webcam Feed">
+
 		<script>
-			setInterval(function() {
-   			 location.reload();
-			}, 5000);
+			// Function to call PHP script to download the latest image and then swap it
+			function loadAndSwapImage() {
+				// Make an AJAX call to PHP to trigger the image download
+				let xhr = new XMLHttpRequest();
+				xhr.open('GET', '/api/download_image.php?username=<?php echo $username; ?>&url=<?php echo $printer_url; ?>', true);
+				xhr.onload = function() {
+					if (xhr.status === 200) {
+						// Preload the new image once the PHP script has completed downloading
+						let img = new Image();
+						img.src = '/user_files/<?php echo $username; ?>/<?php echo $printer_url; ?>.jpeg?rand=' + Math.random(); // Add cache buster to avoid caching issues
+
+						// Swap the image when it is loaded
+						img.onload = function() {
+							let webcamImage = document.getElementById('webcam-image');
+							webcamImage.src = img.src;
+						}
+					}
+				};
+				xhr.send(); // Execute the request
+			}
+
+			// Reload the image every 5 seconds
+			setInterval(loadAndSwapImage, 5000);
 		</script>
 	</body>
-
 </html>
