fixing webcam issues
This commit is contained in:
12
sys0-code/api/download_image.php
Normal file
12
sys0-code/api/download_image.php
Normal 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");
|
||||||
|
|
||||||
|
?>
|
||||||
@@ -1,26 +1,41 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<?php
|
<?php
|
||||||
$username=htmlspecialchars($_GET["username"]);
|
$username = htmlspecialchars($_GET["username"]);
|
||||||
$printer_url=$_GET["url"];
|
$printer_url = $_GET["url"];
|
||||||
$rotation=$_GET["rotation"];
|
$rotation = $_GET["rotation"];
|
||||||
?>
|
?>
|
||||||
<head>
|
<head>
|
||||||
<title>Webcam</title>
|
<title>Webcam</title>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<?php
|
<!-- Display the first image -->
|
||||||
$path = "/var/www/html/user_files/$username/$printer_url.jpeg";
|
<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">
|
||||||
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'>");
|
|
||||||
?>
|
|
||||||
<script>
|
<script>
|
||||||
setInterval(function() {
|
// Function to call PHP script to download the latest image and then swap it
|
||||||
location.reload();
|
function loadAndSwapImage() {
|
||||||
}, 5000);
|
// 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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user