benrueck
Goto Top

Kamera Live-Bilder in HTML nebeneinander anzeigen lassen

Hallo zusammen,

Ich habe geplant eine Seite mittels HTML zu erstellen, um den Imagestream von 6 Kameras Gleichzeitig nebeneinander anzeigen zu lassen. Wenn mann auf ein Kamera Bild klickt soll dieses vergrößert angezeigt werden. Siehe:
html erläuterung


Ich habe es bis jetzt geschafft, die Bilder auf einer Seite anzeigen zu lassen. Man muss jedoch runter scrollen, um zwischen den Bildern hin und her zu schalten.
Mein bisheriger Quellcode sieht so aus:
<!DOCTYPE html>
<html>
<head>
<title>LiveVideo</title>
<META content="text/html"; charset="UTF-8"; http-equiv=Content-Type>  
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">  
<META HTTP-EQUIV="Expires" CONTENT="-1">  
</head>
<body>
Kamera-Livebilder Trocknung

<tr>
    
<!-- K11-Turm-Buehne-3 anordnung links oben -->   

    
<div class="box">  
        <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
      <tr><td bgcolor=red > <font color=white> K11-Turm-Buehne-3 (M22) <BR>
              </font>
      </td> </tr> </TABLE>   
      <iframe src="http://XXX.XXX.XXX.XXX/cgi-bin/faststream.jpg"  
         width="1268" height="951" frameborder="0" scrolling="no" style='zoom:100%'>  
      </iframe>
    </div>


<!-- K16 Turm Tank oben anordnung links unten -->

<div class="box">  
        <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
      <tr><td bgcolor=red > <font color=white> K16 Turm Tank oben <BR>
              </font>
      </td> </tr> </TABLE>   
      <iframe src="http://XXX.XXX.XXX.XXX/cgi-bin/faststream.jpg"  
         width="1268" height="951" frameborder="0" scrolling="no" style='zoom:100%'>  
      </iframe>
    </div>


<!-- K16 Turm Tank oben 2 anordnung mitte oben -->

<div class="box">  
        <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
      <tr><td bgcolor=red > <font color=white> K16 Turm Tank oben 2 <BR>
              </font>
      </td> </tr> </TABLE>   
      <iframe src="http://XXX.XXX.XXX.XXX/cgi-bin/faststream.jpg"  
         width="1268" height="951" frameborder="0" scrolling="no" style='zoom:100%'>  
      </iframe>
    </div>


<!-- K15 Tank 764 mitte unten -->

<div class="box">  
        <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
      <tr><td bgcolor=red > <font color=white> K15 Tank 764 <BR>
              </font>
      </td> </tr> </TABLE>   
      <iframe src="http://XXX.XXX.XXX.XXX/cgi-bin/faststream.jpg"  
         width="1268" height="951" frameborder="0" scrolling="no" style='zoom:100%'>  
      </iframe>
    </div>


<!-- K13 Trocknung Tank 764 rechts oben -->

<div class="box">  
        <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
      <tr><td bgcolor=red > <font color=white> K13 Trocknung Tank 764 <BR>
              </font>
      </td> </tr> </TABLE>   
      <iframe src="http://XXX.XXX.XXX.XXX/cgi-bin/faststream.jpg"  
         width="1268" height="951" frameborder="0" scrolling="no" style='zoom:100%'>  
      </iframe>
    </div>


<!-- K9-Verladung (M22) (M24) rechts unten -->

<div class="box">  
        <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
      <tr><td bgcolor=red > <font color=white> K9-Verladung (M22) <BR>
              </font>
      </td> </tr> </TABLE>   
      <iframe src="http://XXX.XXX.XXX.XXX/cgi-bin/faststream.jpg"  
         width="1268" height="951" frameborder="0" scrolling="no" style='zoom:100%'>  
      </iframe>
    </div>


<!-- Kamera K1 anordnung unten -->

<div class="box">  
        <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
      <tr><td bgcolor=red > <font color=white> Kamera Ventilknoten K1 (M24) <BR>
              </font>
      </td> </tr> </TABLE>   
      <iframe src="http://XXX.XXX.XXX.XXX/cgi-bin/faststream.jpg"  
         width="1268" height="951" frameborder="0" scrolling="no" style='zoom:100%'>  
      </iframe>
    </div>

</tr>

</body>
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">  
<META HTTP-EQUIV="Expires" CONTENT="-1">  
</HEAD>
</html>

Die Kameras sind von Mobotix. Leider kann ich die Mobotix Management Software nicht für die Darstellung nicht verwenden, da die Anwendung zu Anspruchsvoll für unsere Terminalserver ist.
Die Website soll später über einen Thin Client von Igel angezeigt werden.

Falls mein Quellcode noch irgendwie optimiert werden kann, dann sagt es mir bitte.

Danke schon jetzt für eure Antworten.

Content-Key: 516585

Url: https://administrator.de/contentid/516585

Printed on: April 16, 2024 at 13:04 o'clock

Member: falscher-sperrstatus
falscher-sperrstatus Nov 18, 2019 at 08:14:36 (UTC)
Goto Top
Hallo,

Tabellenloses Layout, entsprechend adaptiv auf die Bildschirmgröße in % oder Maßen.