Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Webcam Bild in Widget "vergrößern"

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Webcam Bild in Widget "vergrößern"

    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      topsurfer @MCU last edited by

      @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 Reply Quote 0
      • Crazy32
        Crazy32 @topsurfer last edited by

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

        T 1 Reply Last reply Reply Quote 0
        • T
          topsurfer @Crazy32 last edited by topsurfer

          @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 Reply Quote 0
          • M
            MCU last edited by 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 1 Reply Last reply Reply Quote 0
            • T
              topsurfer @MCU last edited by

              @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 Reply Quote 0
              • M
                MCU @topsurfer last edited by

                @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 1 Reply Last reply Reply Quote 1
                • T
                  topsurfer @MCU last edited by

                  @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 Reply Quote 0
                  • OliverIO
                    OliverIO last edited by OliverIO

                    @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.

                    1 Reply Last reply Reply Quote 0
                    • M
                      MCU last edited by 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 1 Reply Last reply Reply Quote 0
                      • T
                        topsurfer @MCU last edited by

                        @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 OliverIO 2 Replies Last reply Reply Quote 0
                        • M
                          MCU @topsurfer last edited by

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

                          1 Reply Last reply Reply Quote 1
                          • OliverIO
                            OliverIO @topsurfer last edited by

                            @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

                            1 Reply Last reply Reply Quote 1
                            • First post
                              Last post

                            Support us

                            ioBroker
                            Community Adapters
                            Donate

                            1.1k
                            Online

                            31.7k
                            Users

                            79.7k
                            Topics

                            1.3m
                            Posts

                            7
                            43
                            1017
                            Loading More Posts
                            • Oldest to Newest
                            • Newest to Oldest
                            • Most Votes
                            Reply
                            • Reply as topic
                            Log in to reply
                            Community
                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                            The ioBroker Community 2014-2023
                            logo