MotionPiOS Archive - Stefan's Weblog

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 Beispiel, 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>