[Redesign] wioBrowser für Windows

[Rushmed]

@wal Ja stimmt, jetzt gehts. Beim ersten Mal kam diese Meldung.

Da war ich per VPN unterwegs. Jetzt im Lan funktioniert es.
Danke.

[schittl]

Ich muss erstmal ein großes Lob aussprechen. Der wiobrowser funktioniert 1a und ich habe damit meinen MagicMirror abgelöst. Super Arbeit!!! Nun hätte ich noch eine Frage. Hat das jmd hinbekommen, das im wiobrowser Video's automatisch abgespielt werden können?

Hintergrund:
Habe eine VIS-Seite gebaut auf der ein HTML-Widget ist mit folgendem Inhalt:

<video id="videots" width="630px" height="340px" autoplay="autoplay" controls loop="true" >
    <source src="{0_userdata.0.VIS.Tagesschau.URL.Tagesschau100s}" type="video/mp4">
</video>
<script>
setTimeout(function () { 
    console.log("jetzt autoplay");
    document.getElementById('videots').play();
}, 10000);
</script>

Das Video soll direkt oder kurz verzögert einfach starten. Google/Console meldet:

Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first.

Das ist sicherlich auch in anderen Browser so, aber es sollte doch eine Möglichkeit geben das automatisch zu starten
Eventuell Focus setzen o.ä..

Zusätzlich: Gibt es eine Möglichkeit den Cache des wiobrowser zu deaktivieren oder ein F5/Strg-R zu senden, damit er die sendURL immer aktuell lädt?

Vielen Dank für das tolle Tool.

Info:
wiobrowser 2.0.2
win11pro
wiobrowser (2.0.12.0 64bit) aus erstem Post

wioBrowser.ini

[Sip]
On=0
VideoUrl=
DTMF=#1234
OpenUrl=
[Browser]
StartUrl=http://xxx.xxx.xxx.xxx:8082/vis/index.html?MM#01_Haupt
[ioBroker]
TCPPort=5000
[Voice]
Index=0
[ScreenOn]
Select=0
Command=powercfg
Parameter=-change -monitor-timeout-ac 0
[ScreenOff]
Select=0
Command=powercfg
Parameter=-change -monitor-timeout-ac 1
[Screen]
Left=0
Top=0
[Read]
Volume=1
System=1
[System]
Menu=1
Logoff=0
Keyboard=1

[Wal]

@schittl ,
ich schau mir das mal an.

[Wal]

@schittl ,
bekommst du das Video mit wiobrowser überhaupt zum laufen, ich im Moment nicht.
Ich denke es liegt an fehlenden Codecs.

[schittl]

@wal Stimmt im wiobrowser läuft es gar nicht. Ich hatte es exemplarisch mit Chrome getestet und vermutet das der wiobrowser sich wie ein chrome verhält. Ich hatte vorher mit nem chrome im kioskmode getestet und bin dann aber zum wiobrowser umgestiegen. Das ist natürlich schade das ein mp4 nicht läuft

[schittl]

Vllt gibt es auch bei jemanden eine Lösung, den Mediaplayer remote zu starten? Das würde mir auch genügen . Wie müsste denn das command aussehen? Hat das jemand schon mal gemacht?

@wal Vllt kann man noch einen Datenpunkt "wiobrowser.0.web.refresh" noch einbinden für Cache leeren

[BananaJoe]

@schittl also ich nutze für ein anderes Projekt den "Media Player Classic" den ich mit Parameter aufrufe um auf einen Multi-Monitor-Systeme verschiedene Videos auf verschiedenen Bildschirmen zu starten.

https://github.com/clsid2/mpc-hc
https://github.com/clsid2/mpc-hc/releases

Achtung, der MPC unter https://mpc-hc.org/ wird NICHT mehr weiterentwickelt, die GitHub Variante bekommt regelmäßig Updates-

Wenn man die mpc-hc64.exe /? aufruft, erhält man die Hilfe:

Aufruf: mpc-hc.exe "Pfadname" [Parameter]

"Pfadname"	Gibt eine Mediendatei oder ein Verzeichnis an
		(Wildcards sind möglich, Standardeingabe kann als "-"
		angegeben werden)
/dub "Datei"	Lädt eine zusätzliche Audiodatei
/dubdelay "Datei"	Lädt eine zusätzliche Audiodatei, deren Wiedergabe
		um X ms versetzt wird (Dateiname muss "DELAY Xms"
		enthalten)
/d3dfs		Aktiviert den Direct3D-Vollbildmodus
/sub "Datei"	Lädt eine zusätzliche Untertiteldatei
/filter "B"		Lädt die in der dynamischen Bibliothek "B" enthaltenen
		DirectShow-Filter (Wildcards sind möglich)
/dvd		Startet den Player im DVD-Modus (DVD-Verzeichnis kann
		als "Pfadname" angegeben werden)
/dvdpos T#C	Startet die DVD-Wiedergabe bei Titel T, Kapitel C
/dvdpos T#P	Startet die DVD-Wiedergabe bei Titel T, Position P
		(hh:mm:ss)
/cd		Öffnet eine Audio-CD oder (S)VCD (Laufwerk kann als
		"Pfadname" angegeben werden)
/device		Öffnet das Standard-Gerät
/open		Öffnet eine Mediendatei und pausiert die Wiedergabe
/play		Öffnet eine Mediendatei und startet die Wiedergabe
/close		Beendet den Player (nach Wiedergabe) (nur in
		Kombination mit "/play")
/shutdown	Fährt den Computer herunter (nach Wiedergabe)
/standby		Wechselt in den Standby-Modus (nach Wiedergabe)
/hibernate		Ruhezustand des Betriebssystems nach Wiedergabe
/logoff		Meldet den Benutzer ab (nach Wiedergabe)
/lock		Sperrt den Computer (nach Wiedergabe)
/monitoroff	Schaltet den Bildschirm aus (nach Wiedergabe)
/playnext		Öffnet die nächste Ordnerdatei (nach Wiedergabe)
/fullscreen	Startet den Player im Vollbild
/viewpreset N	Startet den Player mit Fenster-Profil N (N > 0, siehe
		Ansicht-Menü)
/minimized	Startet den Player minimiert
/new		Startet einen neuen Player
/add		Fügt "Pfadname" zur Wiedergabeliste hinzu (auch in
		Kombination mit "/open" oder "/play")
/randomize	Sortiert die Wiedergabeliste nach Zufall
/volume N	Startet den Player mit Lautstärke N (N >= 0 und
		N <= 100)
/regvid		Registriert alle Videoformate
/regaud		Registriert alle Audioformate
/regpl		Registriert alle Wiedergabelisten
/regall		Registriert alle Medienformate
/unregall		Deregistriert alle Medienformate
/start X		Startet die Wiedergabe bei X ms
/startpos P	Startet die Wiedergabe bei Position P (hh:mm:ss)
/ab_start hh:mm:ss	A-B wiederholen: Startposition
/ab_end hh:mm:ss	A-B wiederholen: Endposition
/fixedsize w,h[,x,y]	Feste Fenstergröße setzen; optional mit Angabe der oberen linken Fensterposition
/monitor N	Startet den Player auf Monitor N (N > 0)
/audiorenderer N	Verwendet Audio-Renderer N (N > 0, siehe
		Ausgabe-Optionen)
/shaderpreset "P"	Lädt Shader-Profil "P"
/pns "Name oder Werte"	Namen der zu verwendenden Pan & Scan-Voreinstellung oder direkte Positions- und Zoomwerte im Format "px,py,zx,zy" angeben
/iconsassoc	Ordnet die formateigenen Icons erneut zu.
/nofocus		Startet den Player im Hintergrund
/webport N	Aktiviert das Webinterface auf Port N
/debug		Zeigt die Debug-Informationen im OSD an
/nocrashreporter	Deaktiviert die Fehlerberichterstattung
/slave "H"		Startet den Player im Slave-Modus mit
		Fensterhandle "H"
/hwgpu "I"	Verwendet für das Hardware-Decoding GPU-Index "I"
		(nur CUVID und DXVA2 copy-back)
/reset		Setzt alle Programm-Einstellungen zurück
/mute		Startet den Player mit Ton aus
/thumbnails	Vorschaubild erstellen
/help /h /?	Zeigt diese Hilfe an

Unter anderem kann der Video abspielen /play und nach der Widergabe automatisch wieder beenden /close

Ein Aufruf wäre z.B.

"C:\Program Files\MPC-HC\mpc-hc64.exe" "Pfad-und-Name-Video" /play /close

Edit: Der sollte auch Videos von URLs abspielen können.
Ich hatte damals auch mit dem VLC experimentiert, der konnte damals aber irgendetwas nicht was ich brauchte.

[schittl]

@BananaJoe Danke für den Tip. Es hat funktioniert. Im Browser wäre schöner, aber so reicht es auch.

setState('wiobrowser.0.command', '"d:/mpc/mpc-hc64.exe" "' + getState('0_userdata.0.VIS.Tagesschau.URL.Tagesschau100s').val + '" /fullscreen /play /close');

[BananaJoe]

@schittl den /fullscreen hatte ich vergessen. Man kann bei mehreren Monitoren sogar den Monitor/Bildschirm angeben auf dem der Player erscheinen soll, das fehlte meine ich bei VLC

[schittl]

@bananajoe Bekommt man damit auch noch hin das die Bedienungsleiste am unteren Bild nicht angezeigt wird wie /controloff oder ähnliches?

[BananaJoe]

@schittl wird die beim /fullscreen nicht ausgeblendet? Wenn er meint das die Maus da unten ist (wenn man den Mauszeiger verschwinden lässt indem man diesen ganz nach unten setzt) würde diese dann aber angezeigt werden.

Edit: gerade in meinen Quellcode nachgeschaut- ich starte mit /monitor x /fullscreen und habe dann keine Playerleisten
Das x steht für den Monitor 1 bis 3, ich nutze das ja für eine Multianzeige

[saeft_2003]

@Wal

Hi, ich habe ein Problem mit dem wiobrowser und zwar habe ich in meiner VIS einige Kameras über ein iframe eingebettet. Das ganze läuft über go2rtc weil die Kameras nur einen rtsp stream haben.

Den go2rtc server habe ich neugestartet seitdem lädt im wiobrowser der stream von allen Kamera nicht mehr. Auf allen anderen Geräten funktioniert es weiterhin auch auf dem selben Gerät in chrome wo der wiobrowser drauf läuft geht alles.

Natürlich habe ich schon neugestartet usw... bringt aber alles nichts. Hast du eine Idee an was das liegen könnte?

Dieser Fehler wird angezeigt:

Edit: Nachdem ich alle Kameras auf dem go2rtc Server entfernt und wieder hinzugefügt habe. Geht es wieder auch im wiobrowser. Aber: Der Fehler kommt immer noch und ein paar Sekunden später springt der Stream um auf RTC. Auf allen anderen Geräten kommt der Fehler nicht und kommt sofort MSE. Ist das ein wiobrowser Problem?

[skvarel]

@saeft_2003 .. das kann kein generelles wio Problem sein.

Ich nutze den Browser nur für meine Kameras. Insgesamt 9 Streams über go2rtc.

Ich nutze allerdings den webrtc Stream. Die lokale HTML habe ich angepasst, damit das 'Wasserzeichen' (MSE/RTC) nicht angezeigt wird. Den Ton schalte ich mit '&media=video' aus, weil mir das Bild reicht.

<iframe frameborder="no" width="395" height="295"src="http://192.168.130.240:1984/webrtc.html?src=Garten_II&media=video"></iframe>

Hier mal ein Screenshot vom Aussenbreich:

Jedes Vorschau-Video ist auch ein Button um in den Haupt-Stream zu kommen:

Hier kann ich dann die Kameras steuern, die Aufnahmen und Alarme de-/aktivieren.

[saeft_2003]

@skvarel

danke für die Info. In der VIS brauch ich auch keinen Ton. Ich teste mal die webrtc Methode...

[saeft_2003]

@skvarel

Könntest du bitte mal den ganzen Export von dem widget posten? Hab nämlich grad so meine Probleme das hinzubekommen...

[skvarel]

@saeft_2003 .. das ist aber VIS2.

Unser inventwo Universal-Widget und als 'Textinhalt' einfach den Code für den iFrame eintragen.

<iframe frameborder="no" width="395" height="295"src="http://192.168.130.240:1984/webrtc.html?src=Garten_II&media=video"></iframe>

Ein Widget-Export wird dir nicht helfen, weil ich auf die Steckdose der Kamera triggere. Meine Widgets sind schon ziemlich 'speziell' eingerichtet

• Wenn Steckdose AUS, dann zeige ein Testbild
• Wenn Steckdose AN, zeige den Stream

Hier der Export:

[
  {
    "tpl": "tplInventwoWidgetUniversal",
    "data": {
      "bindings": [],
      "type": "readonly",
      "g_common": true,
      "mode": "singleButton",
      "direction": "row",
      "oid": "alias.0.Videoüberwachung.reolink_Garten_AN",
      "httpType": "send",
      "buttonSize": 110,
      "btnSpacing": 10,
      "countStates": 1,
      "buttonHoldValue": false,
      "dialogWidth": 500,
      "g_attr_group_type_view_in_dialog": true,
      "dialogHeight": 300,
      "dialogPadding": 10,
      "dialogBackground": "rgb(18, 18, 18)",
      "dialogTitleColor": "rgb(255,255,255)",
      "dialogTitleSize": 20,
      "dialogCloseButtonBackground": "rgba(255,255,255,0)",
      "dialogCloseButtonColor": "rgba(255,255,255,1)",
      "dialogCloseButtonSize": 14,
      "dialogBorderRadiusTopLeft": 12,
      "dialogBorderRadiusTopRight": 0,
      "dialogBorderRadiusBottomRight": 12,
      "dialogBorderRadiusBottomLeft": 0,
      "contentBlinkInterval": 0,
      "g_attr_group_state_default": true,
      "outerShadowColor": "rgba(0, 0, 0, 1)",
      "colorPickerColorModel": "hex",
      "g_attr_content_color_picker": true,
      "colorPickerWidth": 200,
      "colorPickerHandleSize": 8,
      "colorPickerHandleMargin": 6,
      "colorPickerComponentsSpace": 12,
      "colorPickerDirection": "vertical",
      "colorPickerBorderWidth": 0,
      "colorPickerShowWheel": true,
      "colorPickerShowSaturation": true,
      "colorPickerShowValue": true,
      "textDecoration": "none",
      "g_attr_group_css_text": true,
      "textMarginTop": 0,
      "textMarginBottom": 0,
      "textMarginLeft": 0,
      "textMarginRight": 0,
      "contentType": "image",
      "g_attr_group_css_content": true,
      "contentMarginTop": 0,
      "contentMarginBottom": 0,
      "contentMarginLeft": 0,
      "contentMarginRight": 0,
      "contentSize": 395,
      "contentRotation": 0,
      "contentMirror": false,
      "flexDirection": "column",
      "g_attr_group_css_alignment": true,
      "alignItems": "center",
      "textAlign": "center",
      "contentAlign": "center",
      "backgroundOpacity": 0.9,
      "g_attr_group_css_transparency": true,
      "contentOpacity": 1,
      "paddingLeft": 0,
      "g_attr_group_css_spacing": true,
      "paddingRight": 0,
      "paddingTop": 3,
      "paddingBottom": 0,
      "borderRadiusTopLeft": "0",
      "g_attr_group_css_border_radius": true,
      "borderRadiusTopRight": "0",
      "borderRadiusBottomRight": "0",
      "borderRadiusBottomLeft": "0",
      "borderSizeTop": 0,
      "g_attr_group_css_border": true,
      "borderSizeBottom": 0,
      "borderSizeLeft": 0,
      "borderSizeRight": 0,
      "borderStyle": "none",
      "outerShadowX": 2,
      "g_attr_group_css_outer_shadow": true,
      "outerShadowY": 2,
      "outerShadowBlur": 2,
      "outerShadowSize": 1,
      "innerShadowX": 0,
      "g_attr_group_css_inner_shadow": true,
      "innerShadowY": 0,
      "innerShadowBlur": 2,
      "innerShadowSize": 1,
      "text": "",
      "image": "/vis-icontwo/Alarm/NO-SIGNAL_800-600.png",
      "undefined1": null,
      "compareBy1": "default",
      "oid1": null,
      "comparisonOperator1": "===",
      "value1": "true",
      "view1": null,
      "text1": "<iframe frameborder=\"no\" width=\"395\" height=\"295\"src=\"http://192.168.130.240:1984/webrtc.html?src=Garten_II&media=video\"></iframe>",
      "textTrue1": null,
      "icon1": null,
      "iconTrue1": null,
      "image1": null,
      "imageTrue1": null,
      "html1": null,
      "htmlTrue1": null,
      "viewInWidget1": null,
      "viewInWidgetTrue1": null,
      "contentBlinkInterval1": null,
      "contentColor1": "rgba(255,255,255,1)",
      "contentColorTrue1": null,
      "background1": "linear-gradient(#444, #111)",
      "backgroundTrue1": "rgb(69,86,24)",
      "textColor1": "rgba(255,255,255,1)",
      "textColorTrue1": null,
      "borderColor1": "rgba(77,115,33,1)",
      "borderColorTrue1": null,
      "outerShadowColor1": "rgb(0,0,0)",
      "outerShadowColorTrue1": "rgb(0,0,0)",
      "innerShadowColor1": "rgba(46,67,74,1)",
      "innerShadowColorTrue1": null,
      "contentSize1": null,
      "g_countStates-1": true,
      "valueTrue": "true",
      "innerShadowColor": "rgba(46,67,74,1)",
      "background": "linear-gradient(#333, #ba3b3b)",
      "textColor": "rgba(255,255,255,1)",
      "borderColor": "rgba(77,115,33,1)",
      "contentColor": "",
      "name": "Vorschau_Garten",
      "comment": null,
      "class": null,
      "filterkey": null,
      "multi-views": null,
      "locked": null,
      "g_fixed": true
    },
    "style": {
      "bindings": [],
      "left": 855,
      "top": 395,
      "width": "405",
      "height": "305",
      "position": "absolute",
      "overflow": "visible",
      "z-index": 10
    },
    "widgetSet": "vis-2-widgets-inventwo",
    "_id": "i000001"
  }
]

Über diesem Widget liegt dann ein Weiters, als Button für das PopUp-Fenster. Dieses Widget zeigt mir dann auch die erkannte Bewegung an.

[
  {
    "tpl": "tplInventwoWidgetUniversal",
    "data": {
      "bindings": [
        "innerShadowColorFeedback"
      ],
      "type": "viewInDialog",
      "g_common": true,
      "mode": "singleButton",
      "direction": "row",
      "oid": "nothing_selected",
      "httpType": "send",
      "buttonSize": 110,
      "btnSpacing": 10,
      "countStates": 1,
      "buttonHoldValue": false,
      "dialogWidth": 1090,
      "g_attr_group_type_view_in_dialog": true,
      "dialogHeight": 670,
      "dialogPadding": 0,
      "dialogBackground": "rgba(51,51,51,1)",
      "dialogTitleColor": "rgb(255,255,255)",
      "dialogTitleSize": 15,
      "dialogCloseButtonBackground": "rgba(51,51,51,1)",
      "dialogCloseButtonColor": "rgba(255,255,255,1)",
      "dialogCloseButtonSize": 14,
      "dialogBorderRadiusTopLeft": 0,
      "dialogBorderRadiusTopRight": 0,
      "dialogBorderRadiusBottomRight": 0,
      "dialogBorderRadiusBottomLeft": 0,
      "contentBlinkInterval": 0,
      "g_attr_group_state_default": true,
      "outerShadowColor": "rgba(0, 0, 0, 0)",
      "colorPickerColorModel": "hex",
      "g_attr_content_color_picker": true,
      "colorPickerWidth": 200,
      "colorPickerHandleSize": 8,
      "colorPickerHandleMargin": 6,
      "colorPickerComponentsSpace": 12,
      "colorPickerDirection": "vertical",
      "colorPickerBorderWidth": 0,
      "colorPickerShowWheel": true,
      "colorPickerShowSaturation": true,
      "colorPickerShowValue": true,
      "textDecoration": "none",
      "g_attr_group_css_text": true,
      "textMarginTop": 0,
      "textMarginBottom": 10,
      "textMarginLeft": 0,
      "textMarginRight": 0,
      "contentType": "image",
      "g_attr_group_css_content": true,
      "contentMarginTop": 0,
      "contentMarginBottom": 0,
      "contentMarginLeft": 0,
      "contentMarginRight": 0,
      "contentSize": 66,
      "contentRotation": 0,
      "contentMirror": false,
      "flexDirection": "column",
      "g_attr_group_css_alignment": true,
      "alignItems": "center",
      "textAlign": "center",
      "contentAlign": "center",
      "backgroundOpacity": 1,
      "g_attr_group_css_transparency": true,
      "contentOpacity": 0,
      "paddingLeft": 0,
      "g_attr_group_css_spacing": true,
      "paddingRight": 0,
      "paddingTop": 0,
      "paddingBottom": 0,
      "borderRadiusTopLeft": "0",
      "g_attr_group_css_border_radius": true,
      "borderRadiusTopRight": "0",
      "borderRadiusBottomRight": "0",
      "borderRadiusBottomLeft": "0",
      "borderSizeTop": 0,
      "g_attr_group_css_border": true,
      "borderSizeBottom": 0,
      "borderSizeLeft": 0,
      "borderSizeRight": 0,
      "borderStyle": "none",
      "outerShadowX": 2,
      "g_attr_group_css_outer_shadow": true,
      "outerShadowY": 2,
      "outerShadowBlur": 2,
      "outerShadowSize": 2,
      "innerShadowX": 0,
      "g_attr_group_css_inner_shadow": true,
      "innerShadowY": 0,
      "innerShadowBlur": 3,
      "innerShadowSize": 6,
      "background": "rgba(0, 0, 0, 0)",
      "contentColor": "rgba(0, 0, 0, 0)",
      "textColor": "rgba(0, 0, 0, 0)",
      "borderColor": "rgba(0, 0, 0, 0)",
      "innerShadowColor": "rgba(0, 0, 0, 0)",
      "view": "reolink Garten",
      "icon": "/vis-icontwo/Navigations/nav_i.png",
      "undefined1": null,
      "compareBy1": "value",
      "oid1": "reolink.9.sensor.motion",
      "comparisonOperator1": "===",
      "value1": "true",
      "view1": "v000_index",
      "text1": "",
      "textTrue1": null,
      "icon1": null,
      "iconTrue1": null,
      "image1": "",
      "imageTrue1": null,
      "html1": null,
      "htmlTrue1": null,
      "viewInWidget1": null,
      "viewInWidgetTrue1": null,
      "contentBlinkInterval1": null,
      "contentColor1": "rgba(0, 0, 0, 0)",
      "contentColorTrue1": null,
      "background1": "rgba(0, 0, 0, 0)",
      "backgroundTrue1": "rgb(69,86,24)",
      "textColor1": "rgba(0, 0, 0, 0)",
      "textColorTrue1": null,
      "borderColor1": "rgba(0, 0, 0, 0)",
      "borderColorTrue1": null,
      "outerShadowColor1": "rgba(0, 0, 0, 0)",
      "outerShadowColorTrue1": "rgb(0,0,0)",
      "innerShadowColor1": "rgba(186,59,59,1)",
      "innerShadowColorTrue1": null,
      "contentSize1": null,
      "g_countStates-1": true,
      "text": "",
      "image": "",
      "g_css_font_text": true,
      "dialogTitle": "Garten • reolink E1 Outdoor • 192.168.130.90 • Instanz 9",
      "dialogCloseOnClickOutside": true
    },
    "style": {
      "bindings": [],
      "left": 855,
      "top": 395,
      "width": "405",
      "height": "305",
      "position": "absolute",
      "overflow": "visible",
      "text-shadow": "2px 2px 1px #000000",
      "font-size": "20px",
      "z-index": "100",
      "text-align": ""
    },
    "widgetSet": "vis-2-widgets-inventwo",
    "_id": "i000001"
  }
]```