Agentdvr-Aufnahmen in der Visualisierung darstellen

David G.

Ich habe schon länger eine Möglichkeit gesucht die Aufnahmen von AgendDVR in meiner Visualisierung darstellen.

Das Livebild meiner Cams hab ich schon länger eingebunden.

Das Thema habe aber lange nicht angepackt, da es für AgendDVR keinen Adapter gibt der einem die benötigten Daten liefert.
Jedoch habe ich jetzt gesehen, dass AgentDVR eine sehr gut dokumentierte Rest-API hat und habe in Blockly eine Tabelle erstellt.

Die Tabelle ist respoive und passt sich dem Bildschirm an.

Auf Wunsch kann man sich über den Icons die Tags zu den Aufnahmen anzeigen lassen.

Screenshot_20250322_100054_Fully Kiosk Browser.jpg

Un sich eine Aufnahme anzuschauen, muss man einfach auf eines der Icons drücken.

Hier gibt es 2 Varianten:

Download des Videos
Öffnen des Videos in einem neuen Tab mit Webplayer (allerdings klappen hier nicht die Videos aller Kameras)

Wie funktioniert das Script?

Folgende Variablen müssen im Blockly ausgefüllt werden:

groesse_icons_klein_mittel_gross
- Wie groß die Icons dargesgezwerden sollen, wenn einem keine Größe zusagt kann man es recht weit unten hier anpassen
show_tags
- Ob man die Tags der Aufnahmen über die Bilder gelegt bekommen möchte
tag_abstand_seitlich
- Abstand der Tags seitlich
tag_abstand_hoehe
- Abstand der Tags in der Höhe
tag_top_bottom
- Tag oben oder unten ausgerichtet
tag_right_left
- Tag links oder rechts ausgerichtet
download_tab
- Ob das Video runtergeladen werden soll oder im
  Webplayer geöffnet
anzahl
- Anzahl der anzuzeigenden Aufnahmen
ip_agentdvr
- IP von AgendDVR
oid
- Oid der Kamera aus AgendDVR
ip_iobroker
- IP Iobroker

Die HTML Tabelle wird unten im Script in einen DP geschrieben (nach belieben anpassen) , diesen könnt ihr dann in die Visualisierung eurer Wahl (ich hab es in Lovelace gemacht, da wird die custom:html-template-card benötigt) einbinden.

Falls ihr die Option gewählt habt, dass das Video in einem neuen Tab im Webpalyer starten soll, sind noch 1-2 Schritte nötig.

Ihr müsst eine Datei mit dem Namen player.htm über http in eurem Netzwerk freigeben. Ich nutze dazu den Proxy Adapter, jeder andere Weg geht aber auch.

Ich habe die Datei unter opt/iobroker/html abgelegt und im Proxy Adapter folgende Freigabe angelegt:

Die htm Datei benötigt folgenden Inhalt:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Video Player</title>
   <script>
       function getUrlParams() {
           const urlParams = new URLSearchParams(window.location.search);
           return {
               videoUrl: urlParams.get("videoUrl"),
               date: urlParams.get("date"),
               time: urlParams.get("time"),
               tags: urlParams.get("tags"),
               duration: urlParams.get("duration"),
               size: urlParams.get("size")
           };
       }

       function setVideoSource() {
           const params = getUrlParams();
           const videoElement = document.getElementById("videoPlayer");
           const sourceElement = document.getElementById("videoSource");
           const infoText = document.getElementById("infoText");

           if (params.videoUrl) {
               const decodedUrl = decodeURIComponent(params.videoUrl);
               sourceElement.src = decodedUrl;
               videoElement.load();  

               // Automatisch starten
               videoElement.play().catch(error => {
                   console.warn("Autoplay wurde blockiert:", error);
               });

               infoText.innerHTML = `
                   <strong>Datum:</strong> ${params.date || "Nicht angegeben"}<br>
                   <strong>Uhrzeit:</strong> ${params.time || "Nicht angegeben"}<br>
                   <strong>Tags:</strong> ${params.tags || "Keine Tags"}<br>
                   <strong>Dauer:</strong> ${params.duration ? params.duration + " Sekunden" : "Nicht angegeben"}<br>
                   <strong>Dateigröße:</strong> ${params.size ? params.size + " MB" : "Nicht angegeben"}<br>
                   <strong>Video URL:</strong> <a href="${decodedUrl}" target="_blank">${decodedUrl}</a>
               `;
           } else {
               infoText.textContent = "Keine gültige Video-URL gefunden!";
               console.error("Keine gültige Video-URL gefunden!");
           }
       }

       window.onload = setVideoSource;

       function goBack() {
           window.history.back();  
       }
   </script>
   <style>
       #infoText {
           font-weight: bold;
           color: black;
       }
   </style>
</head>
<body>
   <video id="videoPlayer" width="80%" controls autoplay muted>
       <source id="videoSource" src="" type="video/mp4">
       Dein Browser unterstützt dieses Videoformat nicht.
   </video>
   
   <!-- Info-Text zur Anzeige der Video-Details -->
   <p id="infoText"></p>

   <!-- Zurück-Button -->
   <button onclick="goBack()" style="margin-top: 20px; padding: 10px; font-size: 16px;">⬅ Zurück</button>
</body>
</html>

Falls ihr die Freigabe anders benennt oder die Datei anders freigebt, sucht die URL im Blockly und ändert diese nach euren Vorgaben ab.

Trigger:
Ich lasse die Tabelle aktuell von AgendDVR über SimpleApi triggern.
Dazu habe ich in AgentDVR eine Aktion erstellt, die nach einer Aufnahme eine SimpleApi URL aufruft.

Bei Aktualisierung des DP (legt euch irgend einen an, am besten im selben Ordner wie der DP für die Tabelle) trigger das Script dann (Trigger im Script anpassen).

Alternativ könnt ihr natürlich auch einen anderen Trigger nehmen.
Zu einer bestimmten Uhrzeit, Intervall etc

Anbei nun das Blockly:
Eigene_Scripte.VIS.Tabelle_AgentDVR.xml

Ich bin gespannt, ob bei euch alles klappt.

EDIT
Falls noch jemand eine bessere Idee kennt, als das Video im neuen Tab über <video> einzubinden immer her damit. Vom Format her scheint man recht eingeschränkt zu sein. Das motion jpeg meiner billig Kamera klappt Zb nicht (Ich zeichne RAW ohne konvertiung auf, man kann jedoch in AgendDVR auch zu mp4 konvertieren was dann klappt).

NEWS

Agentdvr-Aufnahmen in der Visualisierung darstellen

Support us

1.1k
Online

31.5k
Users

79.3k
Topics

1.3m
Posts

NEWS

Agentdvr-Aufnahmen in der Visualisierung darstellen

Support us

1.1kOnline

31.5kUsers

79.3kTopics

1.3mPosts

1.1k
Online

31.5k
Users

79.3k
Topics

1.3m
Posts