Hallo zusammen,
wir haben in unserem Club eine neue Webcam installiert, die im Abstand von 2 Minuten Fotos (Snap.jpg) zum Webserver hochlädt.
https://www.golfclub-oberrot-frankenberg.de/webcam.html
Die Fotos werden in einer speziellen HTML-Datei (siehe Link) angezeigt. Leider pumpt dabei das Bild so lange, bis es komplett übertragen wurde. Ich kann mir dieses Verhalten nicht erklären.
Kann jemand mal auf die relevanten Dateien schauen und evtl. eine Lösung finden? Danke!
PHP
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webcam Golfclub Oberrot-Frankenberg</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="webcam.css" media="screen">
<script type="text/javascript" src="webcam.js"></script>
</head>
<body>
<h2>Webcam des Golfclubs Oberrot-Frankenberg</h2>
<p>Die von der Webcam erzeugten Bilder werden im Abstand von 2 Minuten erneuert.</p>
<div class="camview"><img src="{__LAST_IMAGE__}" alt="WebCam StopMotion View"><p>{__DATETIME__}</p></div>
<p>Datum der letzten Änderung</p>
</body>
</html>
***************************************************************************************************************
PHP
<?php
date_default_timezone_set( 'Europe/Berlin' );
error_reporting( -1 );
ini_set( 'display_errors', true );
const IMAGES_PATH_NAME = 'images/webcam/WLAN_Cam/Snapshot/';
const IMAGES_PATH = __DIR__ . '/' . IMAGES_PATH_NAME;
const IMAGES_PATTERN = 'Snap.jpg';
$itrImages = new GlobIterator( IMAGES_PATH . IMAGES_PATTERN );
$itrImages->rewind();
$aImages = [];
while ( $itrImages->valid() ) {
$splFileInfo = $itrImages->current();
$aImages[$splFileInfo->getCTime()] = [
'filename' => $splFileInfo->getFileName(),
'filepath' => IMAGES_PATH_NAME . $splFileInfo->getFileName() . '?v=' . microtime( true ),
'filecdate' => date( 'd.m.Y H:i:s', $splFileInfo->getCTime() )
];
$itrImages->next();
}
ksort( $aImages );
$aImagesData = array_values( array_reverse($aImages) );
if ( !isset($_GET['reload']) ) {
echo strtr( file_get_contents(__DIR__ . '/webcam.html'), ['{__LAST_IMAGE__}'=>$aImagesData[0]['filepath'], '{__DATETIME__}'=>$aImagesData[0]['filecdate']] );
exit;
}
echo json_encode( $aImagesData[0] );
**************************************************************************************************************************************
JS
window.onload = function() { reload(); }
function reload() {
var oXmlHttp = new XMLHttpRequest();
oXmlHttp.onreadystatechange = function () {
if ( oXmlHttp.readyState !== XMLHttpRequest.DONE )
return;
console.log( oXmlHttp.responseText );
setTimeout( reload, 1200 );
_response = JSON.parse( oXmlHttp.responseText );
document.querySelector( '.camview > img' ).setAttribute( 'src', _response.filepath );
document.querySelector( '.camview > img + p' ).innerHTML = _response.filecdate;
};
oXmlHttp.open( 'GET', 'webcam.php?reload=1', true );
oXmlHttp.send();
}
