2021-04-13 11:29:40 +02:00
|
|
|
|
<!DOCTYPE html >
|
|
|
|
|
|
<html lang="de">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
|
|
|
|
<title></title>
|
|
|
|
|
|
<link href="/css/style.css" rel="stylesheet">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<jl-header data-title="Insecam Karte"></jl-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>
|
2021-05-13 23:10:17 +02:00
|
|
|
|
<a href="/API/getFile.php?filename=insecam.zip">
|
2021-04-13 11:29:40 +02:00
|
|
|
|
<button>Download V1</button>
|
2021-05-13 23:10:17 +02:00
|
|
|
|
</a> <a href="/API/getFile.php?filename=Insecam_v2.zip">
|
2021-04-13 11:29:40 +02:00
|
|
|
|
<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>
|
|
|
|
|
|
<h2>Kommentare:</h2>
|
|
|
|
|
|
<jl-comments_display></jl-comments_display>
|
|
|
|
|
|
<jl-new_comment id="newComment"></jl-new_comment>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<jl-footer></jl-footer>
|
|
|
|
|
|
|
|
|
|
|
|
<script async defer src='https://www.hCaptcha.com/1/api.js'></script>
|
|
|
|
|
|
<script src="/js/script.js"></script>
|
