Puppeteer: Screenshots PhantomJS Alternative

[foxriver76]

@negalein sudo apt update && sudo apt install libnss3 installiert er es da. Beim install Log hat er schon gesagt, dass er es nicht findet.. mal sehen woran das liegt

[Negalein]

@foxriver76 sagte in Puppeteer: Screenshots PhantomJS Alternative:

mal sehen woran das liegt

Danke, ist jetzt grün.

Screenshot wird nicht erstellt und DP sind leer.

[foxriver76]

@negalein DPs sind nur zur Konfiguration. Schreibt er was im Log? Evtl. auf Debug wenn du sendTo ausführst?

[Negalein]

@foxriver76 sagte in Puppeteer: Screenshots PhantomJS Alternative:

Schreibt er was im Log? Evtl. auf Debug wenn du sendTo ausführst?

puppeteer.0 2022-08-12 11:33:32.075	debug	Checking path "../wetterstation.png"
puppeteer.0 2022-08-12 11:33:32.075	debug	Message: {"command":"screenshot","message":{"url":"http://10.0.1.203:3000/d/14q2Khmnz/wetterstation-copy?orgId=1&refresh=1m&kiosk","clip":{"x":0,"y":0,"width":1920,"height":757},"path":"../wetterstation.png"},"from":"system.adapter.javascript.0","_id":48278577}
puppeteer.0 2022-08-12 11:33:19.946	debug	Checking path "../wetterstation.png"
puppeteer.0 2022-08-12 11:33:19.946	debug	Message: {"command":"screenshot","message":{"url":"http://10.0.1.203:3000/d/14q2Khmnz/wetterstation-copy?orgId=1&refresh=1m&kiosk","clip":{"x":0,"y":0,"width":1920,"height":757},"path":"../wetterstation.png"},"from":"system.adapter.javascript.0","_id":48278576}
puppeteer.0 2022-08-12 11:32:57.012	info	Ready to take screenshots
puppeteer.0 2022-08-12 11:32:56.815	info	starting. Version 0.2.1 in /opt/iobroker/node_modules/iobroker.puppeteer, node: v16.15.1, js-controller: 4.0.23

[foxriver76]

@negalein sagte in Puppeteer: Screenshots PhantomJS Alternative:

"../wetterstation.png"

hm gib mal als path im Skript /opt/iobroker/node_modules/iobroker.puppeteer/wetterstation.png an

[Negalein]

@foxriver76 sagte in Puppeteer: Screenshots PhantomJS Alternative:

hm gib mal als path im Skript /opt/iobroker/node_modules/iobroker.puppeteer/wetterstation.png an

puppeteer.0 2022-08-12 11:38:01.009	error	Could not take screenshot of "http://10.0.1.203:3000/d/14q2Khmnz/wetterstation-copy?orgId=1&refresh=1m&kiosk": Screenshots cannot be stored inside a node_modules folder
puppeteer.0 2022-08-12 11:38:01.009	debug	Checking path "/opt/iobroker/node_modules/iobroker.puppeteer/wetterstation.png"
puppeteer.0 2022-08-12 11:38:01.008	debug	Message: {"command":"screenshot","message":{"url":"http://10.0.1.203:3000/d/14q2Khmnz/wetterstation-copy?orgId=1&refresh=1m&kiosk","clip":{"x":0,"y":0,"width":1920,"height":757},"path":"/opt/iobroker/node_modules/iobroker.puppeteer/wetterstation.png"},"from":"system.adapter.javascript.0","_id":48278587}

hmmm, muss es woanders speichern. Was würdest du empfehlen?

[foxriver76]

@negalein Stimmt ja, schlechter Stil wird ja vom Adapter verhindert

Sauber ist es im ioBroker storage, mach path weg und dafür das rein:

      ioBrokerOptions: {
        storagePath: 'wetterstation.png';
      }

[Negalein]

@foxriver76 sagte in Puppeteer: Screenshots PhantomJS Alternative:

path weg und dafür das rein:

was brauch ich da wieder nach }

sendTo('puppeteer.0', 'screenshot', { 
    url: 'http://10.0.1.203:3000/d/14q2Khmnz/wetterstation-copy?orgId=1&refresh=1m&kiosk',
    clip: {
        x: 0,
        y: 0,
        width: 1920,
        height: 757
    },
    ioBrokerOptions: {
        storagePath: 'wetterstation.png';
      },
});

Edit:
so gehts

sendTo('puppeteer.0', 'screenshot', { 
    url: 'http://10.0.1.203:3000/d/14q2Khmnz/wetterstation-copy?orgId=1&refresh=1m&kiosk',
    clip: {
        x: 0,
        y: 0,
        width: 1920,
        height: 757
    },
    ioBrokerOptions: {
        storagePath: 'wetterstation.png',
      },
});

Edith 2:
hmmm, wo speichert er jetzt?

[foxriver76]

@negalein geh mal im admin auf Dateien und dann Benutzerdaten

Auf dem Filessystem ist das defaultmäßig /opt/iobroker/iobroker-data/files/0_userdata.0/

[Negalein]

@foxriver76 sagte in Puppeteer: Screenshots PhantomJS Alternative:

geh mal im admin auf Dateien und dann Benutzerdaten

gefunden in /opt/iobroker/iobroker-data/files/0_userdata.0/

Jetzt muss ich noch an der Auflösung basteln

So ist es original.

Puppeteer quetscht es irgendwie.

[foxriver76]

@negalein Mom.. ich bastel kurz was. Defaultmäßig macht Puppeteer Browser 800x600 Auflösung statt die maximal Mögliche.

[foxriver76]

Bitte mal 0.2.4 probieren, ist in 5 Minuten auf npm

[Negalein]

@foxriver76 sagte in Puppeteer: Screenshots PhantomJS Alternative:

Bitte mal 0.2.4 probieren

eingestellt auf 1600x800

[foxriver76]

@negalein Schade, dann mach mal zusätzlich mit in die Message

viewportOptions: {
 width: 1600,
height: 1000
}

Entsprechen angepasst, bin nur am Handy.

[Negalein]

@foxriver76 sagte in Puppeteer: Screenshots PhantomJS Alternative:

Entsprechen angepasst, bin nur am Handy.

schon viel besser.

Jetzt muss ich nur noch den rechten schwarzen Rand weg bekommen.

[foxriver76]

@negalein das sollte mit den Clip Optionen gehen.

[Negalein]

@foxriver76 sagte in Puppeteer: Screenshots PhantomJS Alternative:

das sollte mit den Clip Optionen gehen.

muss das später in Ruhe testen.
Umso mehr ich mit Clip probiere, umso komischer wird es.

So wie oben (trotz identen Settings) bekomm ich es nicht mehr hin.

[foxriver76]

@negalein Gerne die exakten Settings posten, falls du noch daran hängst.

[Negalein]

@foxriver76 sagte in Puppeteer: Screenshots PhantomJS Alternative:

Gerne die exakten Settings posten, falls du noch daran hängst.

Merci

Hier ein paar Beispiele.
Original schaut es so aus:

So wie hier (paar Beiträge weiter oben) schaff ich es nicht mehr.
Das war mit exakt dem Code aus "Test 2", das jetzt allerdings anders erstellt wird (siehe Test 2).

Test 1

sendTo('puppeteer.0', 'screenshot', { 
    url: 'http://10.0.1.203:3000/d/14q2Khmnz/wetterstation-copy?orgId=1&refresh=1m&kiosk',
    clip: {
        x: 0,
        y: 0,
        width: 1920,
        height: 757
    },
    ioBrokerOptions: {
        storagePath: 'wetterstation.png',
      },
    viewportOptions: {
 width: 1200,
height: 800
}
});

Test 2

sendTo('puppeteer.0', 'screenshot', { 
    url: 'http://10.0.1.203:3000/d/14q2Khmnz/wetterstation-copy?orgId=1&refresh=1m&kiosk',
    clip: {
        x: 0,
        y: 0,
        width: 1920,
        height: 757
    },
    ioBrokerOptions: {
        storagePath: 'wetterstation.png',
      },
    viewportOptions: {
 width: 1600,
height: 1000
}
});

Test 3

sendTo('puppeteer.0', 'screenshot', { 
    url: 'http://10.0.1.203:3000/d/14q2Khmnz/wetterstation-copy?orgId=1&refresh=1m&kiosk',
    clip: {
        x: 0,
        y: 0,
        width: 1920,
        height: 757
    },
    ioBrokerOptions: {
        storagePath: 'wetterstation.png',
      },
    viewportOptions: {
 width: 1800,
height: 1000
}
});

Test 4

sendTo('puppeteer.0', 'screenshot', { 
    url: 'http://10.0.1.203:3000/d/14q2Khmnz/wetterstation-copy?orgId=1&refresh=1m&kiosk',
    clip: {
        x: 0,
        y: 0,
        width: 1000,
        height: 757
    },
    ioBrokerOptions: {
        storagePath: 'wetterstation.png',
      },
    viewportOptions: {
 width: 1600,
height: 1000
}
});

[foxriver76]

@negalein sagte in Puppeteer: Screenshots PhantomJS Alternative:

sendTo('puppeteer.0', 'screenshot', {

Ah ich mache gleich eine neue Version. Ich vermute es ist schlauer den Viewport im Code zu ändern, bevor man die Seite lädt, manche Seiten kommen nicht klar wenn man die Auflösung später ändert.

Bitte 0.2.5 probieren.