Überwachungsvideos vom NAS im VIS abspielen - Widget Problem

[Matz]

Hallo,

ich möchte die Aufzeichnungen meiner Überwachungskamera im vis auf meinem Wand-Display angezeigt bekommen.

Als Überwachungssoftware benutze ich das Video Surveillance Tool auf meinem Synology-NAS.

Das NAS-Verzeichniss mit den gespeicherten .mp4 Videos habe ich auf meinem iobroker-Raspberry gemountet.

Mittels Shell-Script wandle ich die Videos in ein einheitliches Format (Dateinamen) mit fortlaufender Nummer je nach Anzahl der aufgezeichneten Videos.

(sieht dann so aus: video_1.mp4, video_2.mp4, video_3.mp4 usw…) Anschließend kopiere ich die Videos in das Verzeichniss :/opt/iobroker/iobroker-data/files/vis.0/

(Vorher wird alles mit Endung .mp4 in diesem Verzeichniss gelöscht)

Im Vis habe ich nun mehrere "metro dialog widgets" angelegt, unter dem Reiter Dialog in der Config unter HTML habeich folgendes eingetragen:

<video src="/opt/iobroker/iobroker-data/files/vis.0/video_1.mp4" width="950" height="543" <br="">poster="video.jpg" autobuffer autoplay

controls>

Schade – hier käme ein Video, wenn Ihr

Browser HTML5 Unterstützung hätte, wie z.B. der

aktuelle Firefox</video>

Im nächsten Widget dann /video_2.mp4 usw.. insgesammt 20 Stück.

Ein Klick auf das Widget öffnet mir ein Dialog-Fenster und spielt das Video sauber und flüssig ab.

Wenn mein Script die Videos im vis.0 Verzeichniss löscht und durch neue ersetzt (gleiche Dateinamen) werden trotzem im Vis im Dialog noch die alten Videos angezeigt.

Ich verstehe das nicht, die Videos wurden ja explizit gelöscht. Auch den Browser Cache habe ich bereits gelöscht.

Hat jemand eine Idee? Ich weiss hier nicht mehr weiter..

Wenn das funktionieren würde, dann wäre das für mich ein Meilenstein um das ganze noch zu optimieren (Zeitstempel mit anzeigen, Anzahl der Widgets entsprechend der vorhandenen Videos usw..)

Viele Grüße,

Matthias

[PrinzEisenherz1]

Hi Matz!

Ich hatte mal n ähnliches Problem und zwar mit Bildern und da hat mir Nobody n Bash-Script erstellt dass das VIS auch aktualisiert

#!/bin/bash
# Konfiguration
# Verzeichnisse, State und Source-Datei müssen existieren
# Simple-API muss aktiviert sein

# Verzeichnis, in dem die Source-Datei liegt
SOURCEDIR=/tmp

# Absoluter Pfad bis zu dem Verzeichnis, in dem sich der Ordner vis.0 befindet
DATADIRECTORY=/opt/iobroker/iobroker-data/files

# Pfad unterhalb des DATADIRECTORY bis zum Bildverzeichnis. Wichtig: in diesem Unterverzeichnis dürfen sich keine weitere Dateien befinden, da diese automatisch gelöscht werden
VISIMAGEDIRECTORY=vis.0/main/floatingimage

# Dateiname der Quelldatei
SOURCEFILENAME=myimage.png

# In der Admin-Oberfläche angelegter State für die Bild-URL. Im VIS-View ist ein basic string image src Widget einzufügen, das auf diesen State verweist.
STATE=vis.0.main.floatingimage

# URL für den Zugriff auf die Simple-API. Kann eine im Web-Adapter aktivierte Simple-API sein.
SIMPLEAPIURL=http://127.0.0.1:8082

# Die externe URL für den Zugriff auf VIS. Falls erforderlich auch mit Angabe des Ports. Absoluter Pfad nur für App erforderlich, ansonsten reicht /
EXTERNALVISURL=https://yourdomain.dyndns.com

# Kommandos

NEWFILE=img$(date +%Y%m%d_%H%M%S).png
cp $SOURCEDIR/$SOURCEFILENAME $DATADIRECTORY/$VISIMAGEDIRECTORY/$NEWFILE
curl -I $SIMPLEAPIURL/set/$STATE?value=$EXTERNALVISURL/$VISIMAGEDIRECTORY/$NEWFILE
current_dir=$PWD
cd $DATADIRECTORY/$VISIMAGEDIRECTORY
shopt -s extglob
rm !($NEWFILE)
cd $current_dir

Vielleicht kannst de damit was anfangen

Gruß

Johnny

[Matz]

Hallo Johnny,

vorab vielen Dank für deine Hilfe!

Ich habe mir dein script mal angeschaut.

1. Es wird ein Dateiname mit einem Zeitstempel erzeugt z.B.: img20161128_210913.png

2. Das neue Bild (myimage.png) wird aus /tmp in das Verzeichniss /opt/iobroker/iobroker-data/files/vis.0/main/floatingimage kopiert und gleichzeitig auf den neuen zuvor erstellten Dateinamen umbenannt. Also nun: img20161128_210913.png

3. Dann wird anscheinend der Pfad incl. neuem Dateinamen (/vis.0/main/floatingimage/img20161128_210913.png) in einem vis.0 State geschrieben.

Auf diesen State schaut dann schließlich ein Widget und bekommt seine Bildquelle zum anzeigen.

Die weiteren Schritte mit dem löschen usw. sind mir soweit auch klar..

Der Unterschied zu meiner bisherigen Methode ist, dass hier aufgrund des Zeitstempels im Dateinamen niemals der gleiche Dateiname verwendet wird. Bei mir funktioniert ein Dateiname z.B. video_1.mp4 nur genau einmal. Wenn ich dieses Video lösche und durch ein neues Video ersetzte mit gleichem Namen (video_1.mp4) zeigt er immer das vorherige nicht mehr existierende Video an. Woher auch immer er das noch hat, ist mir immer noch nicht klar..

Wie ist das hier genau gemeint:

In der Admin-Oberfläche angelegter State für die Bild-URL. Im VIS-View ist ein basic string image src Widget einzufügen, das auf diesen State verweist.

STATE=vis.0.main.floatingimage

Muss ich im ioBroker.admin unter dem vis.0 ein neues Objekt einfügen? Habe hier schon probiert, ist der Typ "String" richtig?

Diesem teile ich dann aus meinem Script über Simple-API den Dateinamen mit…?

Sorry, viel Text.. möchte das nur gerne möglichst genau verstehen :roll:

Viele Grüße

Matthias

[PrinzEisenherz1]

Sorry, wenn ich mich jetzt erst melde.

Also das Skript holt sich quasi die Datei und schiebt die in Dein ioBrokerverzeichnis und benennt die um.

Zusätzlich wird im State (den wo de vorher anlegst) die Url z.B http://xxx.xxx.xxx.xxx:8082/vis.0/main/ … 142144.mp4 erzeugt.

Diese ändert sich mit jeder Aktualisierung Deiner Datei. Somit weiß auch VIS das sich die Datei geändert hat.

Nimm einfach folgendes Skript zum erzeugen der State

function CreateAllStates(){
// Anlegen State für Video-URL zum Darstellen auf VIS
    createState("vis.0.main.GartenVideo");

// Anlegen State zum Triggern ob neue Video-Datei
    createState("javascript.0.Kameraaufnahmen.Garten");
}
CreateAllStates();

Bei mir werden die Videoaufnahmen auf der Syno über ein PHP-Skript (Ausgelöst wird das PHP-Skript von nem Bewegungsmelder) erzeugt, da ich von ALDI welche ich habe nur über Umweg HD-Aufnahmen machen kann.

Diese Verzeichnis hab ich mit dem Pi gemountet. Diese PHP-Skript (liegt auf der Syno im Webserver-Ordner) setzt in ioBroker einen weiteren State (es wird der Dateiname des erzeugten Videofiles hineingeschrieben)

den ich dann zum Triggern für das Kopier-Skript nutze.

Hier das PHP-Skript

 /dev/null 2>&1 ';
  $ausgabeA = $StringA . $videodateiname . $StringA2;

  $StringB = 'curl -s http://xxx.xxx.xxx.xxx:8082/set/javascript.0.Kameraaufnahmen.Garten?value=';
  $StringB2 = ' > /dev/null 2>&1 &';
  $ausgabeB = $StringB . $videodateiname . $StringB2;

  $last_line = system($ausgabeA, $retval);
  $last_line2 = system($ausgabeB, $retval2);

  system('rm -f lock-g.txt');
} else {
	    echo "Couldn't get the lock!";
}
?>

Das Kopier-Skript habe ich auf m Pi unter /usr/local/bin liegen.

Das Skript sieht dann so aus

video_garten.sh

#!/bin/bash
# Konfiguration
# Verzeichnisse, State und Source-Datei müssen existieren
# Simple-API muss aktiviert sein
# set -x
# Verzeichnis, in dem die Source-Datei liegt
SOURCEDIR=/mnt/NAS/Garten

# Absoluter Pfad bis zu dem Verzeichnis, in dem sich der Ordner vis.0 befindet
DATADIRECTORY=/opt/iobroker/iobroker-data/files

# Pfad unterhalb des DATADIRECTORY bis zum Bildverzeichnis. Wichtig: in diesem Unterverzeichnis dürfen sich keine weitere Dateien befinden, da diese automatisch gelöscht werden
VISIMAGEDIRECTORY=vis.0/main/garten-video

# Dateiname der Quelldatei
# zuerst Dateiname der Videodatei auslesen
out=$(wget -O - -q -t 1 http://xxx.xxx.xxx.xxx:8082/getPlainValue/javascript.0.Kameraaufnahmen.Garten | sed 's/^["]*//;s/["]*$//')
SOURCEFILENAME=$out

# In der Admin-Oberfläche angelegter State für die Bild-URL. Im VIS-View ist ein basic string image src Widget einzufügen, das auf diesen State verweist.
STATE=vis.0.main.GartenVideo

# URL für den Zugriff auf die Simple-API. Kann eine im Web-Adapter aktivierte Simple-API sein.
SIMPLEAPIURL=http://xxx.xxx.xxx.xxx:8082

# Die externe URL für den Zugriff auf VIS. Falls erforderlich auch mit Angabe des Ports. Absoluter Pfad nur für App erforderlich, ansonsten reicht /
# EXTERNALVISURL=https://yourdomain.dyndns.com
EXTERNALVISURL=http://xxx.xxx.xxx.xxx:8082

# Kommandos
NEWFILE=$SOURCEFILENAME
cp $SOURCEDIR/$SOURCEFILENAME $DATADIRECTORY/$VISIMAGEDIRECTORY/$NEWFILE
curl -I $SIMPLEAPIURL/set/$STATE?value=$EXTERNALVISURL/$VISIMAGEDIRECTORY/$NEWFILE
current_dir=$PWD
cd $DATADIRECTORY/$VISIMAGEDIRECTORY
shopt -s extglob
rm !($NEWFILE)
cd $current_dir
exit

Das Shell-Skript lasse ich bei ioBroker mit folgendem Skript auslösen

// Aufruf der Funktion bei Änderung
on({id: 'javascript.0.Kameraaufnahmen.Garten', change: 'any'}, function(dp) {
idKamerabild = getState('javascript.0.Kameraaufnahmen.Garten').val;
	if (logging) log('=> Kameravideo Garten :  '+ idKamerabild);
    exec('sh /usr/local/bin/video_garten.sh');
});

In VIS Hab ich dann "basic string image src Widget" zum darstellen eines Snapshots und darüber hab ich dann transparent ein Metro-Widget (metro-title Dialog/iFrame) liegen.

Transparenz und url für Video wie folgt einbinden

Das zeigt beim draufdrücken das Video

Ich hoffe, ich hab es einigermaßen verständlich geschrieben

Johnny

P.S.

Ich habe auch noch eine FOSCAM fi8919w am laufen, aber da wird das Video nicht im ioBroker VIS-App dargestellt. Da wird leider n art Fake-Mpeg erzeugt die das App nicht kennt

[Matz]

Hallo Johnny,

war eine Weile verhindert, deswegen nun verspätet meine Reaktion auf deine Antwort.

Ich bin z.Zt. dabei das ganze fertig stellen, die Dinge die Du gepostet hast helfen mir dabei sehr weiter!

Ich werde bescheid geben wenn ich das ganze am laufen habe.

Danke für deine ausführliche Antwort!

Viele Grüße,

Matthias