46 lines
2.9 KiB
HTML
46 lines
2.9 KiB
HTML
<!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>
|
||
|
||
<button onclick="window.location.href='/API/getFile.php?filename=files/insecam.zip';">Download V1</button> <button onclick="window.location.href='/API/getFile.php?filename=files/Insecam_v2.zip';">Download V2</button><br>
|
||
<p>Alte Karte mit Google Maps:</p>
|
||
<jl-img src="/img/projekte/Insecam.png"></jl-img><br>
|
||
<p>Neue Karte mit Leaflet:</p>
|
||
<jl-img src="/img/projekte/insecam_neu.png"></jl-img><br>
|
||
<h2>Kommentare:</h2>
|
||
<jl-comments_display></jl-comments_display>
|
||
<jl-new_comment id="newComment"></jl-new_comment>
|
||
</div>
|
||
<jl-footer></jl-footer>
|
||
|
||
|
||
<script src="/js/script.js"></script> |