janis/system0-2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing webcam issues

Browse Source
This commit is contained in:
Janis Steiner
2024-10-14 12:38:32 +01:00
parent 5e853f4000
commit 3e1380ca47
2 changed files with 42 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
sys0-code/api/download_image.php Normal file
View File

@@ -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");
?>

43
sys0-code/app/webcam.php
View File

@@ -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>
</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>