suche fhem-dienst, der sreenshots vom browser annimmt und speichert

[frank]

moin,

ich erstelle mit javascript eine dynamische tabelle im browser. nun möchte ich bei einer änderung der tabelle automatisch ein sreenshot dieser tabelle auf dem fhem server speichern, um diese image datei ggf auf andere anzeigegeräte streamen zu können.

ich suche nun ein fhem dienst, der diese sreenshots entgegennimmt und bestenfalls sogar speichern kann.

irgendwie fehlen mir da gerade die ideen.

[r00t2]

Hm, ich würde vielleicht mal pageres-cli ausprobieren.

Das ist recht mächtig von der Kommandozeile her: https://github.com/sindresorhus/pageres-cli

[rudolfkoenig]

ich suche nun ein fhem dienst, der diese sreenshots entgegennimmt und bestenfalls sogar speichern kann.

Ich wuerde in 99_myUtils.pm eine Perl-Funktion mySaveFile() schreiben, der den Inhalt von $FW_webargs{fileContent} in einer Datei speichert. Diese  Funktion kann ausgeloest werden, indem man

Code Auswählen Erweitern

http:/fhemhost:port/fhem?fileContent=CONTENT,cmd={mySaveFile()}&fwcsrf=geheim&XHR=1 aufruft. Alle (CGI-)Parameter koennen auch via POST uebergeben werden, CONTENT muss url-encoded werden.
Ungetestet, mag Gedankenfehler enthalten

[frank]

danke für die schnellen ideen.

pageres ist ein interessantes tool, aber für mein vorhaben vielleicht etwas "oversized".

ich probiere mal rudis variante.

[andies]

kannst du deine Lösung dann hier einstellen? Interessiert mich.

[frank]

hallo rudi,
die version mit "fileContent=" in der url habe ich zum laufen gebracht.

nun würde ich gern die daten an den request anhängen, also version 2 nutzen.
allerdings habe ich den zugriff auf die daten in fhem noch nicht gefunden.
du hast doch sicherlich noch einen tip.


@andies
hiermit läuft es zur zeit:

Code Auswählen Erweitern

###############################################
# http://html2canvas.hertzen.com/

function HMinfoTools_createScreenshot() {
html2canvas(document.getElementById("hminfotools"), {logging: false}).then(canvas => {
var dataURL = canvas.toDataURL('image/png');
FW_cmd(FW_root+"?fileContent="+encodeURIComponent(dataURL)+
"&cmd={HMinfoTools_saveScreenshot()}&XHR=1");
/*
var cmd = "{HMinfoTools_saveScreenshot()}";
if(HMinfoTools_debug) {log('HMinfoTools: ' + cmd);}
var url = HMinfoTools_makeCommand(cmd);
$.ajax({
url: url,
type: "POST",
data: {imgBase64: dataURL},
contentType: 'image/png',
success: function(data){
if(data) {
}
}
});
*/
});
}


Code Auswählen Erweitern

##############################################
# save screenshot.png from client to server

sub HMinfoTools_saveScreenshot() {
my $fileName = "www/images/hminfoScreenshot.png";
my $png = (defined($FW_webArgs{fileContent}))? $FW_webArgs{fileContent}: "";
if($png) {
open(my $save,">",$fileName) || return("Can't open $fileName: $!");
$png =~ s/^data:image\/png;base64,//;
$png =~ s/\s/+/;
$png = decode_base64($png);
print $save $png;
close($save);
}
}


[rudolfkoenig]

FHEMWEB behandelt GET und POST identisch, die Parameter kommen entweder im URL oder im Body, gleich kodiert.

Laut jQuery doku ist data entweder ein String, oder ein Objekt mit key/Value, wobei mir unklar ist, ob es im letzten Fall ein encode stattfindet.

D.h. entweder gibt man den String aus dem GET ab ? als data an, oder man baut ein Objekt mit dem Schluessel fileContent, cmd, XHR und fwcsrf.

[andies]

@andies
hiermit läuft es zur zeit:

Vielen Dank. Wie löst Du denn HMinfoTools_createScreenshot aus? An sich "erzeugt" FHEM ja seine Webseiten selbst und dann muss diese Funktion intern eingebaut werden (ich habe keine Ahnung von javascript und installiere mir gerade html2canvas, um mir das mal anzuschauen - ich will das in grafana verwenden, das den internen renderer für raspberry eingestellt hat).

[frank]

Vielen Dank. Wie löst Du denn HMinfoTools_createScreenshot aus? An sich "erzeugt" FHEM ja seine Webseiten selbst und dann muss diese Funktion intern eingebaut werden (ich habe keine Ahnung von javascript und installiere mir gerade html2canvas, um mir das mal anzuschauen - ich will das in grafana verwenden, das den internen renderer für raspberry eingestellt hat).

über meine HMinfoTools.js => https://forum.fhem.de/index.php/topic,112825.0.html.
in meiner aktuellen version habe ich hinter zeile 180 eingefügt:

Code Auswählen Erweitern

setTimeout(HMinfoTools_createScreenshot(),10000);


HMinfoTools.js verhält sich eigentlich wie ein virus, den fhem an den browser ausliefert. 
wenn fhem eine bestimmte seite (zb hminfo detailseite) erzeugt hat, wird der virus aktiv und erzeugt eine zusätzliche tabelle, die in die seite eingebaut wird.
nach fertigstellung der tabelle wird der screenshot erzeugt.
über longpoll erkennt HMinfoTools.js, wenn die tabelle neu erstellt werden muss: => neuer screenshot.


der eigentliche zweck der screenshots hat aber noch ein gewaltiges problem:
auf dem pc kann ich die erzeugten screenshots öffnen und sehen, also kein problem.
mein tv, für den die screenshots eigentlich vorgesehen waren, sagt allerdings, dass er die png-files "noch" nicht unterstützt.

das rendern ist also ziehmliche glückssache.


theoretisch gibt es auch bei firefox die möglichkeit einen sreenshot über einen startaufruf von firefox zu erzeugen:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Headless_mode
da der screenshot ziehmlich schnell erzeugt wird, ist meine tabelle aber noch nicht erstellt und somit leider nicht im screenshot.

[frank]

hallo rudi,

es gibt doch noch ein problem mit meiner gezeigten implementierung.

beim restart wird 99_MyUtils.pm nicht mehr geladen.
anschliessendes öffnen und speichern über edit files löst das problem.

muss ich %FW_webArgs am anfang der datei noch irgendwie bekannt machen?

Code Auswählen Erweitern

2020.08.18 14:02:04.045 0: Server shutdown

2020.08.18 14:02:12 1: reload: Error:Modul 99_MyUtils deactivated:
Global symbol "%FW_webArgs" requires explicit package name (did you forget to declare "my %FW_webArgs"?) at ./FHEM/99_MyUtils.pm line 24.
Global symbol "%FW_webArgs" requires explicit package name (did you forget to declare "my %FW_webArgs"?) at ./FHEM/99_MyUtils.pm line 24.

2020.08.18 14:02:12.191 1: Including fhem.cfg
2020.08.18 14:02:12.232 1: PERL WARNING: Subroutine MyUtils_Initialize redefined at ./FHEM/99_MyUtils.pm line 11, <$fh> line 14.
2020.08.18 14:02:12.249 1: reload: Error:Modul 99_MyUtils deactivated:
Global symbol "%FW_webArgs" requires explicit package name (did you forget to declare "my %FW_webArgs"?) at ./FHEM/99_MyUtils.pm line 24, <$fh> line 14.
Global symbol "%FW_webArgs" requires explicit package name (did you forget to declare "my %FW_webArgs"?) at ./FHEM/99_MyUtils.pm line 24, <$fh> line 14.


Code Auswählen Erweitern

##############################################
# $Id: 99_MyUtils.pm 0815 2015-99-99 11:14:10Z test $

package main;

use strict;
use warnings;
use POSIX;
use LWP::Simple;

sub MyUtils_Initialize($$){
my ($hash) = @_;
}

use FritzBoxUtils;
use Mail::IMAPClient;
use MIME::Parser;

##############################################
# save screenshot.png from client to server

sub HMinfoTools_saveScreenshot() {
my $fileName = "www/images/hminfoScreenshot.png";
my $png = (defined($FW_webArgs{fileContent}))? $FW_webArgs{fileContent}: "";
if($png) {
my $save;
open($save,">",$fileName) || return("Can't open $fileName: $!");
$png =~ s/^data:image\/png;base64,//;
$png =~ s/\s/+/;
$png = decode_base64($png);
print $save $png;
close($save);
}
}

###############################################


FHEMWEB behandelt GET und POST identisch, die Parameter kommen entweder im URL oder im Body, gleich kodiert.

Laut jQuery doku ist data entweder ein String, oder ein Objekt mit key/Value, wobei mir unklar ist, ob es im letzten Fall ein encode stattfindet.

D.h. entweder gibt man den String aus dem GET ab ? als data an, oder man baut ein Objekt mit dem Schluessel fileContent, cmd, XHR und fwcsrf.

dh, wenn ich ajax "richtig" baue, sollte ich die daten ebenfalls unter $FW_webArgs{fileContent} finden können.
ok, "fileContent" ist also kein "geschützter" begriff. ich probiere weiter.

macht es technisch überhaupt einen unterschied, ob die daten im body sind?
ich hatte jetzt nur bedenken, dass ab einer bestimmten grösse der daten der body eventuell "besser" geeignet ist.

[rudolfkoenig]

muss ich %FW_webArgs am anfang der datei noch irgendwie bekannt machen?

Klar, z.Bsp. mit "use vars qw(%FW_webArgs);"

ich hatte jetzt nur bedenken, dass ab einer bestimmten grösse der daten der body eventuell "besser" geeignet ist.

Richtig, je nach Browser ist im URL nur 1 oder 2MB zugelassen. Ich habe auch schon drueber nachgedacht, in FHEMWEB bei der HTTP Header eine maximale Laenge zuzulassen, um DOS zu vermeiden.