Kamera Live-Bilder in HTML nebeneinander anzeigen lassen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

bennrueck

Neues Mitglied
21 November 2019
2
0
1
20
Guten Tag zusammen,

Ich habe diesen Thread schon auf einer anderen Website eröffnet dort jedoch keine zufriedenstellenden Antworten erhalten.
Deshalb möchte ich meine Frage hier erneut stellen.

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 - Klicke auf das Bild, um es zu vergrößern

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:

HTML:
<!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://10.16.10.145/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://10.16.10.160/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://10.16.10.161/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://10.16.10.159/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://10.16.10.149/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://10.16.10.146/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://10.16.10.158/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.
 

bennrueck

Neues Mitglied
21 November 2019
2
0
1
20
Hallo Basti,

eine CSS habe ich leider nicht dazu.
Ich möchte gerne noch dazu sagen das ich bislang noch nie mit HTML programmiert habe, dies ist also mein erster Quelltext.
Ja das Bild zeigt wie es aussehen soll, es sollen alle Bilder parallel angezeigt werden und eines davon vergrößert,
Kannst du mir vielleicht sagen wie ich als Anfänger am besten in die HTML Programmierung einsteigen kann ?

Danke schon mal für deine Antwort.
 

Sailor

Aktives Mitglied
14 Juli 2017
442
53
28
Das wird so wie du es angelegt hast nicht funktionieren können. Du kannst mit dem Cick auf ein IFrame keine Manipulation an der Seite hervorrufen, in der der IFrame eingebettet ist. Es sei denn, du hast auch Kontrolle über den Quelltext, der im IFrame angezeigt wird... wovon ich bei einem Videostream nicht ausgehe.
Alternativ könntest du die Vorschau (die 6 kleinen Bilder) als statisches Bild, also nicht als Videostream einfügen und nur in dem großen IFrame den Stream anzeigen.
Oder zu den Vorschauvideos so etwas wie eine 'Start-Schaltfläche (außerhalb des IFrames) hinzufügen, mit der der gewünschte Stream dann im großen Frame abgespielt wird.

Dein Quellcode ist aber so oder so nicht tauglich, um irgendetwas in der von dir gewünschten Richtung darzustellen - schau dir Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/https://css-tricks.com/snippets/css/a-guide-to-flexbox/) und an lerne die Grundlagen von HTML und CSS, sonst wirst du mit deinem Projekt keine Freude haben.
 
Werbung: