Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[BananaJoe]

Hallo an euch,

Ich hab in VIS in einer View den Videostream meiner Haustürkamera eingebunden. Die Kamera kann nur RTSP - weshalb ich nicht den Stream direkt von der Kamera nehmen sondern von meinem BlueIris Server.
Eingebunden ist das Live-Bild per HTML Widget (Basic HTML) mit folgendem Inhalt:

<img src="http://192.168.1.80:4481/mjpg/Cam215/video.mjpg" width="981" height="734">

Das funktioniert super, das Bild ist sofort da, klappt auch auf dem Tablet mit dem Fully Kiosk Browser ...

Nun ist mir aufgefallen warum: Sobald das Projekt (nicht die View) in VIS gestartet ist, wird das Bild gestreamt - egal ob die Seite mit dem View sichtbar ist oder nicht.

Nun ja, mein BlueIris Server dümpelt mit all seinen Nebenaufgaben so bei 10% rum ... in dem Moment wo der Videostream abgerufen wird sind es 30 bis 40% mehr da BlueIris dann das Video passend kodiert und sendet.

Wenn ich dann wie geplant meinen anderen 8 Kameras anbinde geht das ganze in die Knie.

Ich hätte gerne das der Videostream erst startet wenn ich auch die Seite mit dem View aufrufe - und wenn ich die Seite wechsele soll der Stream bitte wieder enden.

Ich meine das ich mal in einer Demo gesehen habe das es mit einem Dialog gelöst wurde - der nur das Vorschaubild zeigt und bei einem Klick das Live-Bild.

Aber - ich habe auch hinbekommen das wenn es an der Haustür klingelt mein Tablet den Bildschirm anzeigt und auf die View wechselt und das Live-Bild zeigt. Das hätte ich gern weiter so, sprich mit "sichtbarwerden" des Views soll auch das Bild zu sehen sein. Ich fände es blöd wenn man dann erst noch klicken muss.

Danke für jeden Tipp,
Joe

[BananaJoe]

Ich hab nun noch diverses ausprobiert - von ausblenden über andere Widgets - es ist immer das gleiche.
Auch wenn das Video / der Stream nicht sichtbar ist läuft er schon im Hintergrund.

Das ist nun auch doof weil dadurch natürlich auf meinem Tablet die ganze Zeit ein Datenstrom über WLAN läuft der völlig unnötig ist.

Testweise habe ich auf die "Standbild was ich alle 3 Sekunden aktualisiere" Methode umgestellt. Die funktioniert wiederum mit BlueIris sofort - aber es "blinkt" dann immer da der Bereich mit dem Bild beim laden kurz den Hintergrund zeigt.
Das Bild kann ich mir auch direkt von der Kamera holen - aber dann klappt das mit dem Aktualisieren nicht (warum auch immer).

Ich müsste also VIS dazu bringen, das Widget erst zu starten wenn die View auch zu sehen ist - und zu beenden wenn der View wieder gewechselt wurde.

[BananaJoe]

Ich habe es nun auf folgendem Weg selbst gelöst bekommen,
hier meine Lösung als Proof-of-Concept:

Teil 1: Datenpunkte

Zunächst habe ich unter Objekte in der Admin-Oberfläche 3 Datenpunkte angelegt:

javascript.0.zTEST.Cam215-LiveView enthält als Text den Link zum Live-Video-Stream:

http://192.168.1.80:4481/mjpg/Cam215/video.mjpg width="981" height="734"

javascript.0.zTEST.Cam215-StaticPicture enthält als Text den Link zum Standbild:

http://192.168.1.80:4481/image/Cam215?h=732&w=983

javascript.0.zTEST.Cam215-Link4VIS hat als Startwert ebenfalls den vorherigen Link zum Standbild

Teil 2: VIS Widget

Ich habe eine View erstellt, diese heißt TEST_CameraV2 und gehört zum Projekt main.
Im VIS-Editor habe ich auf meiner View ein basic - HTML Widget eingefügt. Unter Allgemein - HTML habe ich folgendes eingetragen:

<img src="{javascript.0.zTEST.Cam215-Link4VIS}">

Also auf den Wert des Datenpunktes verwiesen.
Im VIS-Editor wird da erst einmal nichts angezeigt - wenn Ihr die View aber dann betrachtet wird das Bild eingefügt.

Teil 3: Skript

Nun kommt noch ein Blocky-Skript zum Einsatz:

on({id: "vis.0.control.data"/*Data for control vis*/, change: "ne"}, function (obj) {
  var value = obj.state.val;
  var oldValue = obj.oldState.val;
  if (value == 'main/TEST_CameraV2') {
    setState("javascript.0.zTEST.Cam215-Link4VIS"/*Cam215-Link4VIS*/, getState("javascript.0.zTEST.Cam215-LiveView").val, true);
  } else {
    setState("javascript.0.zTEST.Cam215-Link4VIS"/*Cam215-Link4VIS*/, getState("javascript.0.zTEST.Cam215-StaticPicture").val, true);
  }
});

Erklärung:

In der View ist zunächst immer nur ein Standbild der Kamera.
Und das Skript hängt am Datenpunkt

vis.0.control.data

und reagiert sobald dieser sich verändert. In diesem Datenpunkt steht nämlich immer die aktuell aktive View.
Stellt das Skript nun fest das die aktive View main/TEST_CameraV2 ist so ändert es den Datenpunkt für das HTML-Widget und setzt dort die URL des Live-Video-Streams ein - worauf VIS auch sofort reagiert.
Wird die Ansicht wieder verlassen ändert sich ja auch der Wert des aktiven Views - das Skript springt wieder an und setzt wieder den Wert des statischen Bildes ein.

Das funktioniert bei mir - wenn ich die View anzeigen lassen so geht die CPU-Last auf meinem BlueIris-Server hoch, wenn ich die View wieder wechsle so dauert es etwa 10 Sekunden und die Last geht wieder runter. Ich nehme an der BlueIris-Webserver braucht einen Moment bis er merkt das keiner mehr zuhört.
Aber damit kann ich gut leben.
Zudem kann ich mir auf Basis dieser Lösung eine View mit allen IP-Kameras bauen.