80 lines
No EOL
4.8 KiB
PHP
80 lines
No EOL
4.8 KiB
PHP
<?php
|
||
include "../internal/mysql.php";
|
||
|
||
?>
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Insecam - Jonas Leder</title>
|
||
|
||
<link href="/css/style.css" rel="stylesheet">
|
||
<link href="/css/normalize.css" rel="stylesheet">
|
||
<link href="/css/sourcesanspro.css" rel="stylesheet">
|
||
<link href="/css/menue.css" rel="stylesheet">
|
||
<script src="https://kit.fontawesome.com/038c6c1f0e.js" crossorigin="anonymous"></script>
|
||
<!-- Matomo -->
|
||
<script type="text/javascript">
|
||
var _paq = window._paq = window._paq || [];
|
||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||
_paq.push(["setCookieDomain", "*.jonasled.de"]);
|
||
_paq.push(['trackPageView']);
|
||
_paq.push(['enableLinkTracking']);
|
||
(function() {
|
||
var u="//matomo.jonasled.de/";
|
||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||
_paq.push(['setSiteId', '1']);
|
||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||
})();
|
||
</script>
|
||
<noscript><p><img src="//matomo.jonasled.de/matomo.php?idsite=1&rec=1" style="border:0;" alt="" /></p></noscript>
|
||
<!-- End Matomo Code -->
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="header-wrapper">
|
||
<div class="header-homepage color-overlay" data-parallax-depth="20">
|
||
<div class="header-description gridContainer content-on-center">
|
||
<div class="row header-description-row">
|
||
<div class="header-content header-content-centered">
|
||
<div class="align-holder">
|
||
<h1 class="heading8">Insecam</h1>
|
||
<p class="header-subtitle"> </p>
|
||
<div class="header-buttons-wrapper"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="header-separator header-separator-bottom ">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
|
||
<path class="svg-white-bg" d="M737.9,94.7L0,0v100h1000V0L737.9,94.7z"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div id="mainMenu" includeHTML="/include/menue.php?page=projekte"></div>
|
||
</header>
|
||
<div id="content">
|
||
<p>Insecam ist eine Seite, auf der viele ungesicherte Kameras streams dargestellt werden. Leider wird die Darstellung auf der Seite von Insecam ohne Karte gemacht, obwohl die Position online steht. Daher kam ich auf die Idee selbst eine Karte zu programmieren. Herausgekommen ist <a href="https://insecam.jonasled.tk">diese</a> wunderschöne Karte. Wer sich den Quellcode genauer anschaut wird sich fragen ob es sinnvoll ist alle Daten der Kameras beim Seitenaufbau zu laden, da die Variabel ja mehrere Megabyte groß ist. Die Antwort ist ja, da der Browser nur die Teile lädt die er braucht. Ein Versuch eines Freund das ganze mit einer SQL Datenbank zu lösen war langsamer und aufwendiger, deswegen ist dies die beste Lösung. Aktuell werden nur deutsche Kameras gescannt, dies kann man aber durch das abändern der Länder variable ändern.</p>
|
||
<h2>Update 1:</h2>
|
||
<p>Da ich festgestellt habe, dass die Streams in manchen Browsern in der Vorschau blockiert werden, habe ich einen Proxy eingerichtet, welcher die Streams über eine verschlüsselte Verbindung überträgt. Dadurch sollten das Problem mit der Vorschau behoben sein. Der Proxy Script kann auf GitHub gefunden werden: <a href="https://github.com/jenssegers/php-proxy">https://github.com/jenssegers/php-proxy</a> . In der Config sollte man aber die anpassen, dass die URLs nicht codiert werden.</p>
|
||
<h2>Update 2:</h2>
|
||
<p>Da die Positionsbestimmung nicht immer richtig funktioniert hatte habe ich sie durch eine Suchleiste ersetzt</p>
|
||
<h2>Updaten 3:</h2>
|
||
<p>Am 16.Juli 2018 hat Google seine API für Google Maps umgebaut. Seit diesem Tag verlangt Google Geld um Karten auf Websites einzubinden. Man kann zwar seine Kreditkarte hinterlegen und bekommt jeden Monat 200$, dies wollte ich aber nicht. Daher habe ich die Karte umgeschrieben. Sie setzt jetzt auf die Kartenbibliothek leaflet, welche auf die OpenStreetMap Karten von Mapbox zurückgreift.</p><br>
|
||
<a href="/files/insecam.zip"><button>Download V1</button></a> <a href="/files/Insecam_v2.zip"><button>Download V2</button></a><br>
|
||
<p>Alte Karte mit Google Maps:</p>
|
||
<img src="/img/Insecam.png"><br>
|
||
<p>Neue Karte mit Leaflet:</p>
|
||
<img src="/img/insecam_neu.png"><br>
|
||
|
||
</div>
|
||
<footer includeHTML="/include/footer.php">
|
||
</footer>
|
||
<script src="/js/includeHTML.js"></script>
|
||
</body>
|
||
</html>
|