Hallo.
Im Zuge des Umstiegs auf HTTPS ist bei mir einiges kaputt gegangen. Ich konnte alles lösen bis auf eine Sache: das Bild einiger der Überwachungskameras wird nicht mehr wie früher angezeigt. Der Grund: es ist nicht erlaubt unverschlüsselte Inhalte (HTTP) innerhalb von iFrame aufzurufen, da die Hauptseite verschlüsselt ist (HTTPS nutzt). Leider unterstützen diese Kameras kein HTTPS, es kann nur HTTP verwendet werden. Zudem muss am Anfang die Bild-URL direkt in iFrame stehen, damit entsprechende Kennwortabfrage im Browser angezeigt wird. Die Kennwortabfrage nutzt WWW-Auth Basic. Das sind nun Vorgaben die ich nicht ändern kann.
Es ist möglich das src in <img /> per JavaScript zu ändern und http ansteuern, aber dann werde ich nicht mehr nach dem Kennwort gefragt. Ich bekomme eine (401?) Fehlermeldung im Log der Console angezeigt.
Ich will auch keinen Proxy! Ich will Bilder direkt abholen und nicht pbpaced.net sie holen lassen und mir zuzuschicken. Die Aktualisierungsgeschwindigkeiten sind einfach zu hoch (manche Kameras senden 20 FullHD Bilder pro Sekunde), das packt kein Server rechtzeitig um ein vernünftiges Echtzeitbild zu erhalten.
Ich bitte sehr um Hilfe. Mir sind leider die Ideen ausgegangen.
Gruß Markus
Die Kamerabild-URLs sind in einer Datenbank gespeichert und werden direkt im Dokument ausgegeben. Die ##[IP]## Platzhalter werden durch IP-Adressen ersetzt.
hauptseite.php
Zusammenfassung
<table class="GU">
<tbody>
<tr><td><b>Bild der Überwachungskamera</b></td></tr>
<tr><td>
<input type="button" id="Einblenden_ID9" value="Einblenden" class="K S" onclick="javascript:Einblenden_ID9();"/>
<input type="button" id="Ausblenden_ID9" value="Ausblenden" class="K V" onclick="javascript:Ausblenden_ID9();"/>
<input type="button" id="Aktualisierung_ID9" value="Auto-Aktualisierung" class="K V" onclick="javascript:iFrameLaden_ID9();"/>
<input type="button" id="Benutzerdaten_ID9" value="Benutzerdaten Leeren" class="K V" onclick="javascript:AuthLeeren_ID9();"/>
</td></tr>
<tr><td><iframe width="640" height="480" border="0" scrolling="no" class="O V" id="iFrame_ID9" style="border:none; display:none;"></iframe></td></tr>
</tbody>
</table>
<style type="text/css">
input[type="button"].S { display:inline; }
input[type="button"].V { display:none; }
iframe.S { display:block; }
iframe.V { display:none; }
</style>
<script type="text/javascript" charset="UTF-8">
var uA_ID9=Browser_ID9(window.navigator.userAgent.toLowerCase());
if (uA_ID9==='IE' || uA_ID9==='Edge')
{ document.getElementById('Benutzerdaten_ID9').className='K S'; }
function Browser_ID9(uA) /* userAgent */
{
if (uA.indexOf('edge')!==-1) { return 'Edge'; }
if (uA.indexOf('edg')!==-1) { return 'Edge Chromium'; }
if (uA.indexOf('opr')!==-1 && !!window.opr) { return 'Opera'; }
if (uA.indexOf('chrome')!==-1 && !!window.chrome) { return 'Chromium'; }
if (uA.indexOf('trident')!==-1) { return 'IE'; }
if (uA.indexOf('firefox')!==-1) { return 'FireFox'; }
if (uA.indexOf('safari')!==-1) { return 'Safari'; }
return 'Unbekannt';
}
function Einblenden_ID9()
{
document.getElementById('Einblenden_ID9').className='K V';
document.getElementById('Ausblenden_ID9').className='K S';
if (uA_ID9==='IE' || uA_ID9==='Edge')
{ document.getElementById('Benutzerdaten_ID9').className='K V'; }
document.getElementById('iFrame_ID9').calssName='O S';
document.getElementById('iFrame_ID9').src='http://##[IP]##:65532/image/jpeg.cgi';
if (uA_ID9==='FireFox' || uA_ID9==='Edge Chromium')
{ document.getElementById('Aktualisierung_ID9').className='K S'; }
else
{ setTimeout('iFrameLaden_ID9()', 250); }
}
function Ausblenden_ID9()
{
document.getElementById('Einblenden_ID9').className='K S';
document.getElementById('Ausblenden_ID9').className='K V';
if (uA_ID9==='IE' || uA_ID9==='Edge')
{ document.getElementById('Benutzerdaten_ID9').className='K S'; }
document.getElementById('iFrame_ID9').src='about:blank';
document.getElementById('iFrame_ID9').className='O V';
if (uA_ID9==='FireFox' || uA_ID9==='Edge Chromium')
{ document.getElementById('Aktualisierung_ID9').className='K V'; }
}
function iFrameLaden_ID9()
{
document.getElementById('Aktualisierung_ID9').className='K V';
document.getElementById('iFrame_ID9').src='./Kamerabild/?DateiPfad=http%3A%2F%2F##[IP]##%3A65532%2Fimage%2Fjpeg.cgi&X=640&Y=480&Z=50';
}
function AuthLeeren_ID9() // Nur IE und Edge(alt)
{
var Ergebnis;
try { Ergebnis=document.execCommand('ClearAuthenticationCache', true); }
catch(e) { ; }
if (Ergebnis!==true)
{ alert('Das Löschen des HTTP-Auth Cache war erfolglos!'); }
}
</script>kamerabild.php
Zusammenfassung
<?php
require_once('./../Bausteine/funktion_GetWert.php');
require_once('./../Bausteine/funktion_PostWert.php');
require_once('./../Bausteine/funktion_ZuInteger.php');
$DateiPfad=PostWert('DateiPfad'); if ($DateiPfad==='') { $DateiPfad=GetWert('DateiPfad'); }
$X=PostWert('X'); if ($X==='') { $X=GetWert('X'); }
$Y=PostWert('Y'); if ($Y==='') { $Y=GetWert('Y'); }
$Z=PostWert('Z'); if ($Z==='') { $Z=GetWert('Z'); }
if (ZuInteger($Z)===false) { $Z=1000; }
elseif ($Z<50) { $Z=50; } // Maximal 20 Bilder pro Sekunde
?><!DOCTYPE html>
<html>
<head>
<?php require('./../Bausteine/metadaten.php'); ?>
<meta http-equiv="refresh" content="600"/><!-- Behebt das Speicherleck-Problem. Löscht alle 10 Min. gesammelte Daten - nützlich im Dauerbetrieb! -->
<style type="text/css">
body { margin:0px; padding:0px; border:0px; overflow-x:hidden; overflow-y:hidden; }
img { margin:0px; padding:0px; border:0px; }
</style>
<title>Kamerabild</title>
<?php
if ($DateiPfad!=='')
{
?>
<script type="text/javascript">
/* Bild erst laden und dann anzeigen, sonst ist dauernd eine Sanduhr zu sehen. */
function Kamerabilder()
{ setInterval('LadeBild()', <?php echo $Z; ?>); }
function LadeBild()
{
BildNeu=new Image();
BildNeu.src='<?php echo $DateiPfad; ?>?D=' + new Date().getTime() + '&Z=' + Math.random();
setTimeout('AktualisiereBild(BildNeu)', <?php echo $Z; ?>*0.8);
}
function AktualisiereBild(Bild)
{
BildElement=document.getElementById('Bild');
BildElement.src=Bild.src;
Bild=null;
}
</script>
<?php
}
?>
</head>
<?php
if ($DateiPfad==='')
{
?>
<body>
<span>Fehler: Der Dateipfad zum Bild fehlt.</span>
</body>
<?php
}
else
{
?>
<body onload="javascript:setTimeout('Kamerabilder()', 100);">
<img id="Bild" src="<?php echo $DateiPfad; ?>" <?php if ($X!==false) { ?>width="<?php echo $X; ?>" <?php } if ($Y!==false) { ?>height="<?php echo $Y; ?>"<?php } ?>/>
</body>
<?php
}
?>
</html>
