Anzeigen von Bildern direkt vom Fritz.NAS (Apple geht/ Android nicht)

Hallo zusammen,

ich habe mir ein Skript gebastelt, mit dem ich vom NAS der Fritzbox die gespeicherten Bilder der IP Cam anzeigen lasse.
Das funktioniert mit iOS IPS Mobile prima und es werden mir die Bilder sortiert nach Aufnahmezeitpunkt angezeigt, mit Android klappt das nicht. Dort werden nur die leeren Rahmen der Bilder dargestellt mit dem typischen Symbol für nicht geladene Bilddateien.
Auch der MPEG Stream in der HTML Box String Variable läuft bei iOS und auch hier bei Android nicht. Wenn ich die Streamadresse im Chrome eingebe, bekomme ich den Stream angezeigt. Irgendwie scheint IPS keine Zugriffsrechte im Android zu bekommen, um Bilder oder Streams innerhalb von IPS anzeigen zu lassen?

Hat jemand schon ähnliche Erfahrungen gesammelt und ist vielleicht schon etwas schlauer?

Grüße,
Felix

Details zu der Art der Einbindung fehlen um dir da helfen zu können.
Wie sind die Bilder eingebunden?
Medienobjekt oder auch HTML-Box?
Und wie sieht der HTML Code für die Einbindung des Streams aus?
Welche IPS Version und welche Version der App?

Ich habe aktuell Medienobjekte Typ Bild und Medienobjekte Typ Stream in IPS und beide funktionieren in der App.

Da meine neue Kamera nun mp4 Streams macht, welche nicht im Medienobjekt Stream funktionieren, teste ich aktuell mit dem Video-Tag, habe es aber noch nicht in der App ausprobiert.
Michael

Sorry

Der Stream bzw. die Bilder sind per Htmlbox eingebunden. <img scr … > <&gt;

Liegt es vielleicht daran, dass Chrome das gern per iFrame haben möchte und Apple nicht?

Grüsse,
Felix

Eher die Frage
a) stimmt die URL im HTML?
b) wie greifen die Apps auf IPS zu? Lokal oder Remote ?
c) haben die Geräte überhaupt Zugriff auf das Nas?
d) Feste IP in der URL oder der Hostname? Vielleicht kann Android das nicht auflösen.
Usw…
Da würde ich zuerst suchen.
HTMLBox und normales img-tag funktioniert bei mir in der App (Android), auch ohne IFrame.
Michael

Danke dir, die Hinweise kann ich heute Abend noch mal durchgehen, fraglich ist trotzdem warum das Webfront Mobile im iOS absolut keine Probleme damit hat?

IP Adressen intern und URL habe ich auch schon ohne Erfolg geprüft.

Zugriff außerhalb der IPS Mobile App auf die Daten funktioniert ja auf dem Android Handy. Somit sind die Daten definitiv lesbar.

IPS und die Apps sind auf dem aktuellsten Stand.

Eventuell HTTPS mit selbst signierten Zertifikat? Das mag eventuell der Browser (mit Ausnahme) aber vielleicht die App nicht.
Ansonsten musst du wirklich den original Code Posten, so dass man es nachstellen kann.
Sonst wird es schwierig.
Michael

So sieht mein Skript aus, wie gesagt, beim iPhone fehlerfrei, beim Sony kommt kein Bild.

<?

$ftp_host = "192.168.178.1";
$ftp_user = "xxx";
$ftp_password = "xxx";

//Connect
//echo "<br />Connecting to $ftp_host via FTP...";
$conn = ftp_connect($ftp_host);
$login = ftp_login($conn, $ftp_user, $ftp_password);

//Alte Biler, älter als 4h, aus dem Ordner löschen

//Enable PASV ( Note: must be done after ftp_login() )
$mode = ftp_pasv($conn, TRUE);

//Login OK ?
if ((!$conn) || (!$login) || (!$mode)) {
   die("FTP connection has failed !");
}
echo "<br />Verbindung zum FRITZ.NAS hergestellt<br />";

//
$file_list = ftp_nlist($conn,"CAM/TOR");
foreach ($file_list as $file)
{
   $bildinfo = pathinfo("/".$file); 
  

 if ($file != "." && $file != ".."  && $file != "_notes" && $bildinfo['basename'] != "Thumbs.db") { 
}
?>
    <li>
        
		
     	<img src="<?php echo "ftp://".$ftp_user.":".$ftp_password."@".$ftp_host.$bildinfo['dirname']."/".$bildinfo['basename']; ?>" width="950" alt="Aufnahme wird geladen" />
		
       </a> 
		
		
		 <br/>
		 <br/>
		 <br/>
    </li>
<?	




}
    

//close
ftp_close($conn);

//IPS_RunScript(41586 /*[Funktionen\Kamera\Bilder vom FTP Löschen (sofort Tor)]*/);
//
?>

Browser können, müssen aber FTP nicht unterstützen.
Das gilt ebenso für die in den Apps eingebetteten Browsern.
Das größte Problem ist aber die Authentifizierung in der URL. Chrome und darauf basierende Browser unterstützen das nicht mehr.
Keine Ahnung ob welchen Browser die Apps nutzen, aber ich gehe mal von dem vom OS mitgeliefert Stock-Browsern aus.
Würde auch erklären warum es bei IOS mit Safari noch klappt und bei Android mit Chrome nicht.

Eine mögliche Lösung:
Das IMG Tag zeigt auf einen Webhook in IPS. Das hinterlegte Script lädt das Bild und gibt es aus.
Dann hast du keine Probleme, weder mit Protokoll noch Zugangsdaten.
Das Script ist fast ein Einzeiler:
http://php.net/manual/de/function.readfile.php
Vorher musst du allerdings mit header zumindest angeben das hier ein z.b. JPG oder PNG kommt.
Michael

Danke für den Tipp. Wie würde dein Vorschlag konkret aussehen?

Kann das jetzt schlecht komplett schreiben (Handy :wink: )
Aber ich habe da etwas aus meinem Fundus kopiert.
Allerdings fehlt jetzt hier noch in $file der Rest zum FTP-Path auf dem NAS.

Beispiel:
Webhook Control einen Hook
/hook/nas
Ziel-Script des Webhook wird das hier

$file = "ftp://$user:$pass@xxx.xxx.xxx.xxx/";
// hier muss jetzt z.b. über $_GET['Filename'] noch der pfad bzw Dateiname angehängt werden.
header("Content-type: image/png");
header('Content-Transfer-Encoding: binary');
header('Cache-Control: must-revalidate');
header('Pragma: public');

readfile($file);

Dein IMG Tag zeigt dann auf „/hook/nas? Filename=Urlencoded_filename_zum_bild“

Dein Script was die HTML Box mit den ganzen Bildern füllt, muss also nur anstatt auf das Nas auf diesen Webhook zeigen.

Gibt natürlich noch andere Wege, eventuell noch etwas einfacher.
So kannst du in Bilder als Base64 auf direkt in HTML einbinden. Ohne das es erst nachgeladen wird.
Das geht aber nicht über die String-Variable in IPS, da du dann schnell das Limit von 1 MB erreichst.
Also auch wieder Umweg über IFrame + Webhook.


$RAW = file_get_contents("ftp://$user:$pass@xxx.xxx.xxx.xxx/bild1.png");
$html= '<img src="data:image/png;base64,' . base64_encode($RAW) . '" />';

Michael

Hallo Michael,

danke für den Tipp, der war super! Jetzt kann ich mir wenigstens ein Bild meiner Cam auf dem Android Handy anzeigen lassen.
Ich tu mir gerade nur enorm schwer alle Bilder vom Webhook anzeigen zu lassen, ohne über die 1024KB zu kommen.

Ich habe noch mal eine bessere Abfrage gebastelt. Könntest du mir bitte eine sinnvolle und IPS konforme iframe Einbindung zaubern?


 <?

$ftp_server = '192.168.178.1'; // Adresse FTP-Server
$ftp_user_name = "xxx"; // Username
$ftp_user_pass = "xxx"; // Passwort

// Verbindungsaufbau
$conn_id = ftp_connect($ftp_server);

// Login mit Username und Passwort
$login_result = ftp_login($conn_id, $ftp_user_name, $ftp_user_pass);

// Schalte passiven Modus ein
ftp_pasv($conn_id, true);

// Verbindung überprüfen
if ((!$conn_id) || (!$login_result))
{
    echo "FTP Verbindung ist fehlgeschlagen!";
     echo "Verbindungsaufbau zu $ftp_server mit Username $ftp_user_name versucht.";
    return;
}
else
{
    echo "Verbunden zu $ftp_server mit Username $ftp_user_name"."
";
}


// Dateiliste erstellen und ausgeben
function rawlist_dump()
{
    global $conn_id;
      $ftp_rawlist = ftp_rawlist($conn_id, "CAM/TUER");
      foreach ($ftp_rawlist as $v)
    {
       $info = array();
        $vinfo = preg_split("/[\s]+/", $v, 9);
        if ($vinfo[0] !== "total")
        {
          $info['chmod'] = $vinfo[0];
          $info['num']   = $vinfo[1];
          $info['owner'] = $vinfo[2];
          $info['group'] = $vinfo[3];
          $info['size']  = $vinfo[4];
          $info['day']   = $vinfo[5];
          $info['month'] = $vinfo[6];
          $info['time']  = $vinfo[7];
          $info['name']  = $vinfo[8];
          $rawlist[$info['name']] = $info;
        }
      }
      $dir = array();
      $file = array();
      foreach ($rawlist as $k => $v)
    {
       if ($v['chmod']{0} == "d")
        {
           $dir[$k] = $v;
       }
        elseif ($v['chmod']{0} == "-")
        {
           $file[$k] = $v;
       }
    }
    foreach ($dir as $dirname => $dirinfo)
    {
        echo "[ $dirname ] " . $dirinfo['chmod'] . " | " . $dirinfo['owner'] . " | " . $dirinfo['group'] . " | "  . $dirinfo['day'] . " " . $dirinfo['month'] . " " . $dirinfo['time'] . "
";
   
	}
    foreach ($file as $filename => $fileinfo)
    {
        echo "$filename" . $fileinfo['chmod'] . " | " . $fileinfo['owner'] . " | " . $fileinfo['group'] . " | " . $fileinfo['size'] . " Byte | ". $fileinfo['num'] . "  " . $fileinfo['day'] . " " . $fileinfo['month'] . " " . $fileinfo['time'] . "
";
		 
    }


$RAW = file_get_contents("ftp://xxx:xxx@192.168.178.1/CAM/TUER/$filename");
$html= '<img src="data:image/png;base64,' . base64_encode($RAW) . '" />';  
SetValueString(33836 /*[Funktionen\Kamera\Testordner\Tür]*/,$html); 
           
}

rawlist_dump();

// FTP Verbindung schließen
ftp_close($conn_id);


?> 

Danke dir.

Grüße Felix

Nimm das hier :wink:
[Library] IPSNetwork (WebSocket Client & Server, DHCPSniffer, JSON-Parser uvm) - Seite 4
Ups, das geht ja nicht; weil du ja dynamische Dateinamen hast.
Mal überlegen.

Du nutzt gar keinen Webhook, sondern schreibst das Bild jetzt direkt in eine IPS Variable.

Mach es doch anders:
Das Script welches die Dateiliste ausliest, baut den HTML Tag mit src="/hook/Nas?File=$filename" zusammen.
Dann ein Script in IPS erstellen die http Header und das Bild mit fpassthru ausgibt.
Den Dateinamen hast du in $_GET[‚File‘]
Damit alles klappt im Webhook Control einen Hook mit /Hook/Nas erstellen und auf das Ausgabe-Script verlinken.

IFrame braucht es nicht.
Michael

Hallo Michael,

danke für den weiteren Hinweis aber ich stell mich einfach zu blöde an.

Den Webhook habe ich im Control eingerichtet, bei den beiden anderen Skripten betreibe ich sukzessive Approximation.
Hier schlagen nun mit voller Härte die fehlenden PHP Kenntnisse zu. :banghead:

Viele Grüße,
Felix