Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Kamerabild responsive in VIS

NEWS

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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.0k

Kamerabild responsive in VIS

Geplant Angeheftet Gesperrt Verschoben Visualisierung
cameravishow-totemplateown project
11 Beiträge 5 Kommentatoren 2.0k Aufrufe 9 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • Curtis777C Curtis777

    Liebe Leute,
    Ich suche vergeblich seit 3 Tagen wie ich in meiner VIS ein kleines Iframe einbinden kann,
    Indem der Kamera Stream ohne Scrollbalken erscheint also angepasst an das iframe selbst

    habt ihr das dazugehörige html snippet vielleicht für mich

    sigi234S Online
    sigi234S Online
    sigi234
    Forum Testing Most Active
    schrieb am zuletzt editiert von
    #2

    @Curtis777

    Welche Cam?

    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
    Immer Daten sichern!

    1 Antwort Letzte Antwort
    0
    • Curtis777C Offline
      Curtis777C Offline
      Curtis777
      schrieb am zuletzt editiert von
      #3

      eine billige china cam die ich geschenkt bekommen habe.
      greife das Video als Link im browser so ab.
      http://192.168.0.199/video/livemb.asp
      leider kein richtiges mjpeg

      sigi234S 1 Antwort Letzte Antwort
      0
      • Curtis777C Curtis777

        eine billige china cam die ich geschenkt bekommen habe.
        greife das Video als Link im browser so ab.
        http://192.168.0.199/video/livemb.asp
        leider kein richtiges mjpeg

        sigi234S Online
        sigi234S Online
        sigi234
        Forum Testing Most Active
        schrieb am zuletzt editiert von sigi234
        #4

        @Curtis777 sagte in Kamerabild responsive in VIS:

        eine billige china cam die ich geschenkt bekommen habe.
        greife das Video als Link im browser so ab.
        http://192.168.0.199/video/livemb.asp
        leider kein richtiges mjpeg

        https://www.ispyconnect.com/man.aspx?n=china

        Aha, der Stream kommt ja, also du siehst was?

        Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
        Immer Daten sichern!

        1 Antwort Letzte Antwort
        0
        • Curtis777C Offline
          Curtis777C Offline
          Curtis777
          schrieb am zuletzt editiert von
          #5

          ja sehe ein iframe aber eben mit scrollbalken weil das video in 1080p ist

          CrunkFXC sigi234S 2 Antworten Letzte Antwort
          0
          • Curtis777C Curtis777

            ja sehe ein iframe aber eben mit scrollbalken weil das video in 1080p ist

            CrunkFXC Offline
            CrunkFXC Offline
            CrunkFX
            Forum Testing
            schrieb am zuletzt editiert von
            #6

            @Curtis777 Probiers mal damit, ist zwar ein Workaround sollte aber gehen:

            <div id="contentframe" style="position:relative; top: -198px; left: -260px;">
               <iframe width="1024" height="768" scrolling="no" frameBorder="0"  src="http://192.168.0.199/video/livemb.asp " style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
            </div>
            
            width="1024" height="768" <!--  Diese Auflösung wird oben um 0.5 im IFrame reduziert  -->
            
            top: -198px; left: -260px <!--  Leider verschiebt sich das Bild je nach Auflösung. Das kannst du hiermit anpassen  -->
            

            Benutzung:

            1. basic-html Widget anlegen
            2. html Copy und Paste
            3. Für den ersten Test die Größe des Widgets auf "width: 508px" und "height: 286" setzen.

            Schau mal ob das bei dir Klappt.

            MFG
            CrunkFX

            Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

            Curtis777C 1 Antwort Letzte Antwort
            3
            • Curtis777C Curtis777

              ja sehe ein iframe aber eben mit scrollbalken weil das video in 1080p ist

              sigi234S Online
              sigi234S Online
              sigi234
              Forum Testing Most Active
              schrieb am zuletzt editiert von sigi234
              #7

              @Curtis777 sagte in Kamerabild responsive in VIS:

              ja sehe ein iframe aber eben mit scrollbalken weil das video in 1080p ist

              Zieh das Widget soweit auseinander bis die Balken verschwinden, oder schau dir mal overflow x/y an

              Screenshot (26)_LI.jpg

              Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
              Immer Daten sichern!

              1 Antwort Letzte Antwort
              0
              • CrunkFXC CrunkFX

                @Curtis777 Probiers mal damit, ist zwar ein Workaround sollte aber gehen:

                <div id="contentframe" style="position:relative; top: -198px; left: -260px;">
                   <iframe width="1024" height="768" scrolling="no" frameBorder="0"  src="http://192.168.0.199/video/livemb.asp " style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
                </div>
                
                width="1024" height="768" <!--  Diese Auflösung wird oben um 0.5 im IFrame reduziert  -->
                
                top: -198px; left: -260px <!--  Leider verschiebt sich das Bild je nach Auflösung. Das kannst du hiermit anpassen  -->
                

                Benutzung:

                1. basic-html Widget anlegen
                2. html Copy und Paste
                3. Für den ersten Test die Größe des Widgets auf "width: 508px" und "height: 286" setzen.

                Schau mal ob das bei dir Klappt.

                MFG
                CrunkFX

                Curtis777C Offline
                Curtis777C Offline
                Curtis777
                schrieb am zuletzt editiert von
                #8

                @CrunkFX Danke das hilft schon sehr.
                er schneidet leider noch sehr viel ab unten und rechts
                Da ich das ganze sehr gern im so ca 350px breite betreiben möchte immer noch nicht passend.!

                Ich versuche die Werte und Texte zu verstehen...
                was muss ich denn anpassen ?

                screenshot

                CrunkFXC 1 Antwort Letzte Antwort
                0
                • Curtis777C Curtis777

                  @CrunkFX Danke das hilft schon sehr.
                  er schneidet leider noch sehr viel ab unten und rechts
                  Da ich das ganze sehr gern im so ca 350px breite betreiben möchte immer noch nicht passend.!

                  Ich versuche die Werte und Texte zu verstehen...
                  was muss ich denn anpassen ?

                  screenshot

                  CrunkFXC Offline
                  CrunkFXC Offline
                  CrunkFX
                  Forum Testing
                  schrieb am zuletzt editiert von
                  #9

                  @Curtis777 Da ich leider gerade keine Kamera zum testen in Reichweite hab, musst du das übernehmen.

                  Mit den Werten "0.5" kannst du das Bild weiter verkleinern. z.B. "0.2". Dann fällt dir auf, dass das Bild in die Mitte des html Widgets rutscht.

                  style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"
                  

                  Um das auszugleichen passt du die Verschiebung hier an:

                  top: -198px; left: -260px
                  

                  MFG
                  CrunkFX

                  Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                  1 Antwort Letzte Antwort
                  0
                  • Curtis777C Curtis777

                    Liebe Leute,
                    Ich suche vergeblich seit 3 Tagen wie ich in meiner VIS ein kleines Iframe einbinden kann,
                    Indem der Kamera Stream ohne Scrollbalken erscheint also angepasst an das iframe selbst

                    habt ihr das dazugehörige html snippet vielleicht für mich

                    wendy2702W Online
                    wendy2702W Online
                    wendy2702
                    schrieb am zuletzt editiert von
                    #10

                    @Curtis777 Importier mal das Widget und passe die Quelle an:

                    [{"tpl":"tplImage","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"src":"http://192.168.178.54:8085","stretch":true,"name":"Bild Garage Gross"},"style":{"left":"0.86%","top":"6.5%","width":"98.97%","height":"93.5%","border-width":"1px","z-index":"2"},"widgetSet":"basic"}]
                    

                    Bitte keine Fragen per PN, die gehören ins Forum!

                    Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                    walle79W 1 Antwort Letzte Antwort
                    0
                    • wendy2702W wendy2702

                      @Curtis777 Importier mal das Widget und passe die Quelle an:

                      [{"tpl":"tplImage","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"src":"http://192.168.178.54:8085","stretch":true,"name":"Bild Garage Gross"},"style":{"left":"0.86%","top":"6.5%","width":"98.97%","height":"93.5%","border-width":"1px","z-index":"2"},"widgetSet":"basic"}]
                      

                      walle79W Offline
                      walle79W Offline
                      walle79
                      schrieb am zuletzt editiert von
                      #11

                      @wendy2702 Vielen Dank für den Tipp.:+1:

                      1 Antwort Letzte Antwort
                      0
                      Antworten
                      • In einem neuen Thema antworten
                      Anmelden zum Antworten
                      • Älteste zuerst
                      • Neuste zuerst
                      • Meiste Stimmen


                      Support us

                      ioBroker
                      Community Adapters
                      Donate

                      749

                      Online

                      32.6k

                      Benutzer

                      82.0k

                      Themen

                      1.3m

                      Beiträge
                      Community
                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                      ioBroker Community 2014-2025
                      logo
                      • Anmelden

                      • Du hast noch kein Konto? Registrieren

                      • Anmelden oder registrieren, um zu suchen
                      • Erster Beitrag
                        Letzter Beitrag
                      0
                      • Home
                      • Aktuell
                      • Tags
                      • Ungelesen 0
                      • Kategorien
                      • Unreplied
                      • Beliebt
                      • GitHub
                      • Docu
                      • Hilfe