website/public/projekte/insecam.html

49 lines
No EOL
2.9 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
<a href="/API/getFile.php?filename=files/insecam.zip">
<button>Download V1</button>
</a>&nbsp;<a href="/API/getFile.php?filename=files/Insecam_v2.zip">
<button>Download V2</button>
</a><br>
<p>Alte Karte mit Google Maps:</p>
<img src="/API/getFile.php?filename=/img/Insecam.png"><br>
<p>Neue Karte mit Leaflet:</p>
<img src="/API/getFile.php?filename=/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 src="/js/script.js"></script>