Kamerabild responsive in VIS

[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

[sigi234]

@Curtis777

Welche Cam?

[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

[sigi234]

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

[Curtis777]

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

[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

[sigi234]

@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

[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

[CrunkFX]

@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

[wendy2702]

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

Spoiler

[{"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"}]

[walle79]

@wendy2702 Vielen Dank für den Tipp.