105 lines
No EOL
5.5 KiB
PHP
105 lines
No EOL
5.5 KiB
PHP
<?php
|
||
include "../internal/mysql.php";
|
||
include "../internal/getGravatar.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 Image Tracker-->
|
||
<img src="https://matomo.jonasled.de/matomo.php?idsite=1&rec=1" style="border:0" alt="" />
|
||
<!-- End Matomo -->
|
||
</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>
|
||
<h2>Kommentare:</h2>
|
||
<?php
|
||
|
||
$article = basename($_SERVER["SCRIPT_FILENAME"], '.php');
|
||
$result = $conn->query("SELECT * FROM comments WHERE article='$article'");
|
||
if ($result->num_rows > 0) {
|
||
while($row = $result->fetch_assoc()) {
|
||
$name = $row["name"] . "<br>";
|
||
$gravatar = get_gravatar($row["email"]);
|
||
$content = $row["comment"];
|
||
|
||
echo(<<<EOF
|
||
<h3 class="commentTitle">$name</h3>
|
||
<div class="comment">
|
||
<img src="$gravatar">
|
||
<article class="commentArticle">
|
||
<p class="commentText">$content</p>
|
||
</article>
|
||
</div>
|
||
EOF);
|
||
}
|
||
}
|
||
?>
|
||
|
||
<div id="newComment">
|
||
<form action="/newComment.php" method="post">
|
||
<label for="name">Name:</label><br>
|
||
<input type="text" id="name" name="name"><br><br>
|
||
|
||
<label for="email">E-Mail: (wird nicht veröffentlicht)</label><br>
|
||
<input type="text" id="email" name="email"><br><br>
|
||
|
||
<label for="comment">Kommentar:</label><br>
|
||
<textarea name="comment" id="comment"></textarea><br><br>
|
||
|
||
<input type="submit" value="Kommentar veröffentlichen"><br>
|
||
<p>Mit dem klick auf den obigen Button erklären sie sich mit der <a href="/datenschutzerklaerung.html">Datenschutzerklärung</a> einverstanden.</p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<footer includeHTML="/include/footer.php">
|
||
</footer>
|
||
<script src="/js/includeHTML.js"></script>
|
||
</body>
|
||
</html>
|