Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Webcam Bild in Widget "vergrößern"

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    3.4k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.1k

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.5k

Webcam Bild in Widget "vergrößern"

Scheduled Pinned Locked Moved Visualisierung
43 Posts 7 Posters 4.7k Views 7 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M 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();
      }
    }
    

    0d629da7-f74a-4479-baf1-fc47521780d5-image.png
    Nur img in HTML-Vorlage

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

    5daa28b1-76c3-4c55-8fad-f83ecd729510-image.png

    vis2-Bild-Fullscreen.gif

    T Offline
    T Offline
    topsurfer
    wrote on last edited by
    #32

    @mcu
    Das hier mit dem händigen anklicken des Vorschau-Thumbs um ein Vollbild zu bekommen funktioniert ja gut, danke!
    https://forum.iobroker.net/topic/80939/webcam-bild-in-widget-vergrößern/22?_=1746774469792

    Aktuell wird bei einer erkannten Bewegung ein DP auf True gesetzt, und ein iFrame Widget nutzt die Option "Sichtbarkeit": Bewegung=true" dass dieses iFrame/Kamerabild in einem definierten Rahmen dann eingeblendet wird.

    Wie könnte ich es umsetzen, dass das Kamerabild bei Bewegungserkennung als Vollbild angezeigt wird und per druck auf den Bildschirm wieder vorzeitig "geclosed" wird (oder wenn der DP auf false springt auch wieder verschwindet) ?

    1 Reply Last reply
    0
    • T topsurfer

      Hallo,
      über meine Surveilance-Station habe ich ein Livebild meiner Kamera ( http://192.168.55.xx:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.Stream.VideoStreaming&version=1&method=Stream&format=mjpeg&cameraId=5&StmKey="2a06decfb60e9xxxxxxxxxxxxxxcc86" ).

      Dieses versuche ich nun per HTML- oder iFrame Widget in vis-2 auf dem Dashboard groß darzustellen.
      Aber das eigentliche Bild läßt sich nur bis zu einem bestimmten Wert großziehen (wohl die Auflösung vom Livebild), danach vergrößert sich zwar der "Rahmen", aber das Bild wird nicht weiter mit vergrößert.

      Gibt es einen Parameter in html, iframe oder css, mit dem ich das Bild auch größer bekommen kann?
      (in HTML hab ich schon Werte von >100% versucht, aber ohne Erfolg (width="120%" height="120%"))

      2025-05-03_112500.png

      Crazy32C Offline
      Crazy32C Offline
      Crazy32
      wrote on last edited by
      #33

      @topsurfer Wo hast Du den http-Stream her? In meiner Surveillance Station finde ich nur einen rtsp-Stream.

      T 1 Reply Last reply
      0
      • Crazy32C Crazy32

        @topsurfer Wo hast Du den http-Stream her? In meiner Surveillance Station finde ich nur einen rtsp-Stream.

        T Offline
        T Offline
        topsurfer
        wrote on last edited by topsurfer
        #34

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

        @topsurfer Wo hast Du den http-Stream her? In meiner Surveillance Station finde ich nur einen rtsp-Stream.

        Gute Frage, woher oder wer mir das genannt hat.
        Ist der Key vom RTSP Stream der Surveilance,
        sieht dann so aus und geht im Browser (!):
        http://192.168.yy.xx:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.Stream.VideoStreaming&version=1&method=Stream&format=mjpeg&cameraId=5&StmKey=2a06decfzzzzzzzzzzzzzzzzzzcc86

        1 Reply Last reply
        0
        • M Online
          M Online
          MCU
          wrote on last edited by MCU
          #35

          @topsurfer Nee, das funktioniert leider so nicht. Für die Funktion muss der User klicken!
          Aber du kannst eine andere View nutzen mit Vollbild von dem Kamerabild und dann bei DP true die VIEW umschalten.

          on({id: '0_userdata.0.showCamFullscreen', change: 'ne'}, obj => {
            if (obj.state.val === true) {
              setState('vis-2.0.control.instance', 'vis.0');
              setState('vis-2.0.control.data', JSON.stringify({view: 'cam_fullscreen'}));
              setState('vis-2.0.control.command', 'changeView');
            }
          setTimeout(function(){
             /* zurück auf Standard-Bildschirm */
              setState('vis-2.0.control.instance', 'vis.0');
              setState('vis-2.0.control.data', JSON.stringify({view: 'cam_normal'}));
              setState('vis-2.0.control.command', 'changeView');
          },10000)
          });
          

          NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
          Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

          T 1 Reply Last reply
          0
          • M MCU

            @topsurfer Nee, das funktioniert leider so nicht. Für die Funktion muss der User klicken!
            Aber du kannst eine andere View nutzen mit Vollbild von dem Kamerabild und dann bei DP true die VIEW umschalten.

            on({id: '0_userdata.0.showCamFullscreen', change: 'ne'}, obj => {
              if (obj.state.val === true) {
                setState('vis-2.0.control.instance', 'vis.0');
                setState('vis-2.0.control.data', JSON.stringify({view: 'cam_fullscreen'}));
                setState('vis-2.0.control.command', 'changeView');
              }
            setTimeout(function(){
               /* zurück auf Standard-Bildschirm */
                setState('vis-2.0.control.instance', 'vis.0');
                setState('vis-2.0.control.data', JSON.stringify({view: 'cam_normal'}));
                setState('vis-2.0.control.command', 'changeView');
            },10000)
            });
            
            T Offline
            T Offline
            topsurfer
            wrote on last edited by
            #36

            @mcu Puhh, danke;
            hört sich kompliziert an ...
            Mit dem "anderen DP" meinst du einen/den DP, der das Vollbild ein/ausschaltet?

            Und obiges Code würde wieder nach "Scripte" gehören ?

            M 1 Reply Last reply
            0
            • T topsurfer

              @mcu Puhh, danke;
              hört sich kompliziert an ...
              Mit dem "anderen DP" meinst du einen/den DP, der das Vollbild ein/ausschaltet?

              Und obiges Code würde wieder nach "Scripte" gehören ?

              M Online
              M Online
              MCU
              wrote on last edited by
              #37

              @topsurfer Eigentlich nicht sooo kompliziert.

              • In der VIS2 eine neue Seite (kameraFull) anlegen in dem das Kamerabild auf der ganzen Seite angezeigt wird.
              • in ioBroker unter Skripte ein neues javascript anlegen Name KameraUmschaltung

              Diesen Code in das neue javascript enifügen
              Skripte
              -> +
              -> 361f7e4d-bbff-4509-86c8-94700f587300-image.png
              -> Hinzufügen klicken
              -> 9ebc6329-6488-424b-abf4-2afc40b47942-image.png
              -> Namen Eintragen und ok klicken
              ->

              /* Dein DP mit dem man erkennt, dass da jemand an der Tür ist , KlingelDP oder so */
              let dp = '0_userdata.0.besuchanderTuer'
              
              on({id: dp , change: 'ne'}, obj => {
                if (obj.state.val === true) {
                  setState('vis-2.0.control.instance', 'vis.0');
                  setState('vis-2.0.control.data', JSON.stringify({view: 'kameraFull'}));
                  setState('vis-2.0.control.command', 'changeView');
                }
              setTimeout(function(){
                 /* zurück auf Standard-Bildschirm */
                  setState('vis-2.0.control.instance', 'vis.0');
                  setState('vis-2.0.control.data', JSON.stringify({view: 'normal'}));
                  setState('vis-2.0.control.command', 'changeView');
              },10000)
              });
              

              -> Code einfügen und Speichern
              fda39d70-ed55-41da-afbe-c5d5b0760895-image.png
              -> DP anpassen, views anpassen für kameraFull und normal und Speichern

              NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
              Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

              T 1 Reply Last reply
              1
              • M MCU

                @topsurfer Eigentlich nicht sooo kompliziert.

                • In der VIS2 eine neue Seite (kameraFull) anlegen in dem das Kamerabild auf der ganzen Seite angezeigt wird.
                • in ioBroker unter Skripte ein neues javascript anlegen Name KameraUmschaltung

                Diesen Code in das neue javascript enifügen
                Skripte
                -> +
                -> 361f7e4d-bbff-4509-86c8-94700f587300-image.png
                -> Hinzufügen klicken
                -> 9ebc6329-6488-424b-abf4-2afc40b47942-image.png
                -> Namen Eintragen und ok klicken
                ->

                /* Dein DP mit dem man erkennt, dass da jemand an der Tür ist , KlingelDP oder so */
                let dp = '0_userdata.0.besuchanderTuer'
                
                on({id: dp , change: 'ne'}, obj => {
                  if (obj.state.val === true) {
                    setState('vis-2.0.control.instance', 'vis.0');
                    setState('vis-2.0.control.data', JSON.stringify({view: 'kameraFull'}));
                    setState('vis-2.0.control.command', 'changeView');
                  }
                setTimeout(function(){
                   /* zurück auf Standard-Bildschirm */
                    setState('vis-2.0.control.instance', 'vis.0');
                    setState('vis-2.0.control.data', JSON.stringify({view: 'normal'}));
                    setState('vis-2.0.control.command', 'changeView');
                },10000)
                });
                

                -> Code einfügen und Speichern
                fda39d70-ed55-41da-afbe-c5d5b0760895-image.png
                -> DP anpassen, views anpassen für kameraFull und normal und Speichern

                T Offline
                T Offline
                topsurfer
                wrote on last edited by
                #38

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

                Kurze Frage noch ;-)

                Für einen andere Kamera habe ich bereits einen Datenpunkt, wo der aktuelle Timestamp der erkannten Bewegung immer reingeschrieben wird.
                Wie kann man diesen DP (Objekttyp: Text) zum umschalten der View nutzen, sobald sich dieser Wert geändert/aktuallisiert hat?

                Kenn mich mit Java leider nicht aus,
                diese zwei Zeilen sind/wären es wohl:

                on({id: dp , change: 'ne'}, obj =>
                { if (obj.state.val === true) {
                ...

                /* Dein DP mit dem man erkennt, dass da jemand an der Tür ist , KlingelDP oder so */
                
                let dp = '0_userdata.0.besuchanderTuer'
                on({id: dp , change: 'ne'}, obj => {
                  if (obj.state.val === true) {
                    setState('vis-2.0.control.instance', 'vis.0');
                    setState('vis-2.0.control.data', JSON.stringify({view: 'kameraFull'}));
                    setState('vis-2.0.control.command', 'changeView');
                  }
                setTimeout(function(){
                   /* zurück auf Standard-Bildschirm */
                    setState('vis-2.0.control.instance', 'vis.0');
                    setState('vis-2.0.control.data', JSON.stringify({view: 'normal'}));
                    setState('vis-2.0.control.command', 'changeView');
                },10000)
                });
                
                1 Reply Last reply
                0
                • OliverIOO Offline
                  OliverIOO Offline
                  OliverIO
                  wrote on last edited by OliverIO
                  #39

                  @topsurfer

                  auf dieser seite ist ein Beispiel
                  https://www.smarthome-tricks.de/software-iobroker/vis-ereignisgesteuerter-view-wechsel/

                  die Zeile mit instance und data sieht anders aus.
                  Ich glaube die Notation fürt die view ist
                  projekt/viewname
                  und kein json objekt
                  instance ist die browser instanz, die man in der vis definieren kann. in allen vis-client die view umschalten soll, dann diese mehrachen Fs. Ansonsten die genaue Angabe der Browserinstanz.
                  Die sieht man in vis1 im Tools-Reiter
                  e5628086-c4e1-4553-9b87-fff8c14772ad-image.png

                  passt auch besser zur Dokumentation hier
                  https://github.com/ioBroker/ioBroker.vis?tab=readme-ov-file#control-interface

                  Aber keine Ahnung ob der Code von MCU auch funktionieren könnte.

                  Meine Adapter und Widgets
                  TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                  Links im Profil

                  1 Reply Last reply
                  0
                  • M Online
                    M Online
                    MCU
                    wrote on last edited by MCU
                    #40

                    @oliverio Da wirst du wohl Recht haben.

                    /* Dein DP mit dem man erkennt, dass da jemand an der Tür ist , KlingelDP oder so */
                    let dp = '0_userdata.0.besuchanderTuer'
                     
                    on({id: dp , change: 'ne'}, obj => {
                    //  if (obj.state.val === true) {
                        setState('vis-2.0.control.instance', 'vis.0');
                        setState('vis-2.0.control.data', 'project/kameraFull');
                        setState('vis-2.0.control.command', 'changeView');
                    //  }
                    setTimeout(function(){
                       /* zurück auf Standard-Bildschirm */
                        setState('vis-2.0.control.instance', 'vis.0');
                        setState('vis-2.0.control.data', 'projekt/normal');
                        setState('vis-2.0.control.command', 'changeView');
                    },10000)
                    });
                    
                    

                    @topsurfer Der Zeitpunkt der eingetragen wird ist ja nie gleich, oder?
                    Also würde es auch so funktionieren.
                    -> dp anpassen

                    NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                    Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                    T 1 Reply Last reply
                    0
                    • M MCU

                      @oliverio Da wirst du wohl Recht haben.

                      /* Dein DP mit dem man erkennt, dass da jemand an der Tür ist , KlingelDP oder so */
                      let dp = '0_userdata.0.besuchanderTuer'
                       
                      on({id: dp , change: 'ne'}, obj => {
                      //  if (obj.state.val === true) {
                          setState('vis-2.0.control.instance', 'vis.0');
                          setState('vis-2.0.control.data', 'project/kameraFull');
                          setState('vis-2.0.control.command', 'changeView');
                      //  }
                      setTimeout(function(){
                         /* zurück auf Standard-Bildschirm */
                          setState('vis-2.0.control.instance', 'vis.0');
                          setState('vis-2.0.control.data', 'projekt/normal');
                          setState('vis-2.0.control.command', 'changeView');
                      },10000)
                      });
                      
                      

                      @topsurfer Der Zeitpunkt der eingetragen wird ist ja nie gleich, oder?
                      Also würde es auch so funktionieren.
                      -> dp anpassen

                      T Offline
                      T Offline
                      topsurfer
                      wrote on last edited by
                      #41

                      @mcu
                      OK, also sollte es genügen, wenn ich nur den DP ändere?
                      Hab ich gemacht, der Inhalt vom DP ändert sich auch, aber das Umschalten der Kamera erfolgt nicht.

                      2025-05-20_125120.png
                      In der Log-Ausgabe sieht man den Scriptstart, und dann das starten des Timeouts, aber in den Teil "true" (mit umschalten der Kamera) springt er nicht.

                      2025-05-20_124630.png

                      M OliverIOO 2 Replies Last reply
                      0
                      • T topsurfer

                        @mcu
                        OK, also sollte es genügen, wenn ich nur den DP ändere?
                        Hab ich gemacht, der Inhalt vom DP ändert sich auch, aber das Umschalten der Kamera erfolgt nicht.

                        2025-05-20_125120.png
                        In der Log-Ausgabe sieht man den Scriptstart, und dann das starten des Timeouts, aber in den Teil "true" (mit umschalten der Kamera) springt er nicht.

                        2025-05-20_124630.png

                        M Online
                        M Online
                        MCU
                        wrote on last edited by
                        #42

                        @topsurfer ja,dorry die if obj.state.val Zeile muss raus und dir klammer dazu unten weiter

                        NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                        Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                        1 Reply Last reply
                        1
                        • T topsurfer

                          @mcu
                          OK, also sollte es genügen, wenn ich nur den DP ändere?
                          Hab ich gemacht, der Inhalt vom DP ändert sich auch, aber das Umschalten der Kamera erfolgt nicht.

                          2025-05-20_125120.png
                          In der Log-Ausgabe sieht man den Scriptstart, und dann das starten des Timeouts, aber in den Teil "true" (mit umschalten der Kamera) springt er nicht.

                          2025-05-20_124630.png

                          OliverIOO Offline
                          OliverIOO Offline
                          OliverIO
                          wrote on last edited by
                          #43

                          @topsurfer

                          Hier noch ein Artikel zur Verwendung der Instanz id des Browsers.
                          https://www.smarthome-tricks.de/software-iobroker/iobroker-vis-browser-id/amp/

                          Also soe wie es da steht ist nicht falsch, insbesondere dann wenn du mehrere Clients/Browser hast über du dann deine views abrufen wills, aber der View Wechsel genau nur auf einem Browser ändern willst.
                          Da sich die aus Versehen aber auch mal ändern kann und wenn du überall alles gleich funktionieren lassen willst, würde ich lieber als Instanz id das hier verwenden FFFFFFFF

                          Meine Adapter und Widgets
                          TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                          Links im Profil

                          1 Reply Last reply
                          1
                          Reply
                          • Reply as topic
                          Log in to reply
                          • Oldest to Newest
                          • Newest to Oldest
                          • Most Votes


                          Support us

                          ioBroker
                          Community Adapters
                          Donate

                          542

                          Online

                          32.7k

                          Users

                          82.4k

                          Topics

                          1.3m

                          Posts
                          Community
                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                          ioBroker Community 2014-2025
                          logo
                          • Login

                          • Don't have an account? Register

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Home
                          • Recent
                          • Tags
                          • Unread 0
                          • Categories
                          • Unreplied
                          • Popular
                          • GitHub
                          • Docu
                          • Hilfe