Monatsrückblick Januar/Februar 2026 ist online!

[MCU]

@topsurfer Bei Klick auf das Bild -> Vergrößern auf den gesamten Bildschirm.
Als HTML nutzen.

<img id="camStream" 
     src="http://192.168.55.xx:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.Stream.VideoStreaming&version=1&method=Stream&format=mjpeg&cameraId=5&StmKey=DEINKEY" 
     style="width: 100%; height: auto; cursor: pointer; object-fit: contain;" 
     onclick="openFullscreen(this)">
     
<script>
function openFullscreen(el) {
  if (el.requestFullscreen) {
    el.requestFullscreen();
  } else if (el.webkitRequestFullscreen) { /* Safari */
    el.webkitRequestFullscreen();
  } else if (el.msRequestFullscreen) { /* IE11 */
    el.msRequestFullscreen();
  }
}
</script>

evtl reicht auch nur, kommt auf den Browser an.

<img src="http://192.168.55.xx:5000/webapi/entry.cgi?..." 
     style="width: 100%; cursor: pointer;" 
     onclick="this.requestFullscreen()">

[topsurfer]

@crunchip said in Webcam Bild in Widget "vergrößern":

@topsurfer mittels transform kannst du die Größe anpassen, wenn deine cam nicht von vornherein die passende liefert

Wo soll dieses "Transform" sein, bei welchem Widget (?).
Ich sehe diese Option bei "CSS Allgemein", hat aber keine Auswirkung (Widget: iFrame oder auch: HTML) auf das Bild.

--

@mcu said in Webcam Bild in Widget "vergrößern":

@topsurfer Bei Klick auf das Bild -> Vergrößern auf den gesamten Bildschirm.

Ich will ja aber kein Vollbild, sondern nur das vorhandene Bild etwa um 30% vergrößern
(Hauptscreen ist FullyKioskBrowser)

[crunchip]

@topsurfer sagte in Webcam Bild in Widget "vergrößern":

Wo soll dieses "Transform" sein, bei welchem Widget (?)

Na bei deinem basic iframe, natürlich hat das Auswirkung auf die Größe.(Allerdings hab ich vergrößern noch nie ausprobiert, nur verkleinern,siehe screen, Wert kleiner 1)

Was dazu kommt, das deine x und y Position sich verschiebt und muss entsprechend angepasst werden.

Gibt deine cam keine größere Auflösung her?

[topsurfer]

@crunchip
Also hier?

Manuell eingetragene Werte (0.5 oder 1.5) haben aber keine Auswirkung.

[MCU]

@topsurfer
Wenn du es an die Widgetgröße anpassen willst, dann mit object-fit.

<div style="width: 100%; height: 100%; overflow: hidden;">
  <img src="http://192.168.55.xx:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.Stream.VideoStreaming&version=1&method=Stream&format=mjpeg&cameraId=5&StmKey=DEINKEY"
       style="width: 100%; height: 100%; object-fit: cover; display: block;">
</div>

[topsurfer]

@mcu said in Webcam Bild in Widget "vergrößern":

Wenn du es an die Widgetgröße anpassen willst, dann mit object-fit.

OK, wo soll/muss der Code rein?
iFrame Widget ist das korrekte?

Bei Widget-Quelle, oder im Tab: CSS oder ...?
Sorry ...

[MCU]

@topsurfer html-widget

Alternativen zu object-fit: cover

Wert	Verhalten
contain	Bild wird vollständig gezeigt, kann Lücken haben
fill	Bild wird gestreckt – ggf. verzerrt
cover	Füllt das Widget aus – ggf. schneidet etwas ab

[crunchip]

@topsurfer du musst schon angeben was transformiert wird. Man kann da ja noch ganz andere Dinge eingeben, siehe screen

scale(wert)

hier nochmal ein screen mit vis2

[topsurfer]

@crunchip
Super,
bei mir heißt es auch "Transform" und nicht "Druckeffekt" (sprachabhängig wohl),
Werte > 1 gehen auch!

[crunchip]

@topsurfer also klappt es nun wie gewünscht?

[topsurfer]

@crunchip Ja, genau. Danke!

Bei "Scale", gibt es da auch was zum rotieren des Bildes?

[Homoran]

@topsurfer sagte in Webcam Bild in Widget "vergrößern":

Bei "Scale", gibt es da auch was zum rotieren des Bildes?

nicht scale, sondern rotate

[topsurfer]

@homoran Dort meinte ich ja ;-)
Transform / Druckeffegt (dort wo zuvor "scale" genutzt wurde.

So geht auch das:
rotate(90deg)

(das "deg" musste ich googlen, das geht jetzt auch - jetzt wird noch eine herumliegende ESP32 Cam integriert, thx!)

[vowill]

@topsurfer Alternative Lösung (bei mir in vis-1): Lege einen Rahmen als Button auf das Bild, bei dessen Anklicken eine 'View in Pop-up' geöffnet wird mit dem entsprechend größeren Bild.

[topsurfer]

@vowill said in Webcam Bild in Widget "vergrößern":

bei dessen Anklicken eine 'View in Pop-up' geöffnet wird

Könnte ich mal testen in vis-2,
aber was bzw wo finde ich "View in Pop-up" ?

[topsurfer]

@mcu
Wollte jetzt auch mal deinen Code testen
( https://forum.iobroker.net/topic/80939/webcam-bild-in-widget-vergrößern/6?_=1746462956983 )
Beim oberen längeren Code (16 Zeilen) erscheint kein Fullscreen oder größeres Bild, nur das Vorschaubild bleibt.

Der Dreizeiler darunter mit "....this.requestFullscreen()" funktioniert.
Aber wie kann ich das Fenster wieder schliessen (Tablet) ? Die "Zurück-Taste" ist ausgeblendet ...

Hintergrund:
Habe ein kleines Live-Vorschaubild der Kamera auf dem Dashboard (vis2), beim klick auf das Bild soll das Livebild größer (oder auch als Fullscreen) angezeigt werden. Das große Bild/Fullscreen muss aber auch auch wieder leicht geschlossen werden können.

[MCU]

@topsurfer

<body>
<img src="http://192.168.55.xx:5000/webapi/entry.cgi?..." 
     style="width: 100%; cursor: pointer;" 
     onclick="toggleFullscreen(this)">

<script>
  function toggleFullscreen(elem) {
    if (!document.fullscreenElement) {
      elem.requestFullscreen().catch(err => {
        alert(`Fehler beim Vollbildmodus: ${err.message}`);
      });
    } else {
      document.exitFullscreen();
    }
  }
</script>
</body>

1. Klick Fullscreen
2. Klick normal

[topsurfer]

@mcu Danke, hab den kompletten Code (den Source zuvor angepasst) in "HTML Basic-Widget =>Allgemein=> HTML gepastet.
Im Vis2-Editor zeigt er dann das Kamerabild zweimal an (Untereinander)(?), im Dashboard korrekt nur 1x.
Anklicken für Vollbild geht, aber weder im Browser noch am Handy (FullyKioskBrwoser) geht das Bild "weg" wenn man in das Bild klickt.

[MCU]

@topsurfer Die Funktion in den Reiter "Skripte" einfügen

function toggleFullscreen(elem) {
  if (!document.fullscreenElement) {
    elem.requestFullscreen().catch(err => {
      console.error(`Fullscreen error: ${err.message}`);
    });
  } else {
    document.exitFullscreen();
  }
}

Nur img in HTML-Vorlage

<img src="http://192.168.55.xx:5000/webapi/entry.cgi?..." 
     style="width: 100%; cursor: pointer;" 
     onclick="toggleFullscreen(this)">

[topsurfer]

@mcu Danke, bin leider nicht so fit in HTML, CSS, JS, ...
Thx!