MotionPiOS – Kamerakachelübersicht

Wer mehrere Raspberry Kameras sein Eigen nennt, möchte vielleicht alle in einer Kachelübersicht in seinem bevorzugten Browser anschauen.

Der hier dargestellte Code ist ein Biepiel, wie so etwas aussehen könnte.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Kamera - Kachelübersicht</title>
	
<style>
    #wrap { width: 780px; height: 450px; padding: 0; overflow: hidden; }
    #frame { width: 1920px; height: 1080px; border: 1px solid black; }
    #frame {
        -ms-zoom: 1.0;
        -moz-transform: scale(0.5);
        -moz-transform-origin: 0 0;
        -o-transform: scale(1.0);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.4);
        -webkit-transform-origin: 0 0;
    }
</style>	
	
  </head>

<table>
<tr>
	<td>
		<h3>Kamera 1</h3>
		<div id="wrap">
			<iframe id="frame" src="http://192.168.2.2:8081" allowfullscreen="" frameborder="0"  scrolling="no" align="centre">
			</iframe>                
		</div>
	</td>
	<td>
		<h3>Kamera 2</h3>
		<div id="wrap">
			<iframe id="frame" src="http://192.168.2.3:8081" allowfullscreen="" frameborder="0"  scrolling="no" align="centre">
			</iframe>                
		</div>
	</td>
</tr>
<tr>
	<td>
		<h3>Kamera 3</h3>
		<div id="wrap">
			<iframe id="frame" src="http://192.168.2.3:8081" allowfullscreen="" frameborder="0"  scrolling="no" align="centre">
			</iframe>                
		</div>
	</td>
	<td>
		<h3>&Uuml;bersicht Kameras - View</h3>
		<ul>
			<li>Kamera 1 - 192.168.178.37</li>
			<li>Kamera 2 - 192.168.178.26</li>
			<li>Kamera 3 - 192.168.178.38</li>
		</ul>
		
		<h3>&Uuml;bersicht Kameras - Admin</h3>
		<ul>
			<li>Kamera 1</li>
			<li>Kamera 2</li>
			<li>Kamera 3</li>
		</ul>
	</td>
</tr>
</table>

</html>

Bildquelle: raspberrypi.org

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.