Puppeteer: Screenshots PhantomJS Alternative

liv-in-sky

@je-vi

alle keys sind hier: https://github.com/foxriver76/ioBroker.puppeteer

@liv-in-sky said in Puppeteer: Screenshots PhantomJS Alternative:

@je-vi

also ich nutze javascript - aber schau mal wie die einzelnen werte heißen - nicht filename sondern path - muss dann im blockly auch so sein

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

    url: 'http://192.168.178.59:8082/vis/index.html?handyBildAnzeige#dtaBild',

    path: '/Daten/iobroker1.png', 

    width:450,

    height:850,

    waitForTimeout: 6000,
    fullPage: false,

    clip: {         
        x: 0,
        y: 0,
        width: 450,
        height: 850 
      }

});
    }
})

Danke für deine Hilfe. Ich habe es jetzt per JavaScript mit jsftp Modul Umgesetzt. War etwas Fummelei Funktioniert nun aber wie es soll und ich kann bei Bedarf den PhantomJS ablösen.

bimmi

Jetzt muss ich hier noch einmal fragen, da ich es bis heute nicht hinbekommen habe und einfach nicht checke was falsch daran ist. Puppeteer läuft zu 100%. Wenn ich screenshots über die Objekte erstelle, dann funktioniert das ganze auch jedoch übernimmt er mir folgende keys nicht wenn ich das in mein Blockly einfüge:

clip height
clip width
waitforselector

Ich habe sämtliche Kombinationen versucht mit konvertiere zu Zahl, als Text, als Nummernfeld usw... Ich denke, dass die Übergabe der Keys nicht richtig ist und ja, ich habe das manual gelesen hier: https://github.com/foxriver76/ioBroker.puppeteer#croplefttopheightwidth

Was hingegen funktioniert ist:

path
url
quality

Man sieht im Log, dass der screenshot erstellt wurde und das er auch an der richtigen Stelle erstellt wird. Bei der Info über den Screenshot sehe ich auch, dass er 100% als Qualität übernommen hat (Standard ist 80%).

Ich hoffe nochmal inständig auf ein paar hilfreiche Tipps von euch. Ich weiß auch, dass hier mehr mit JS Programmiert wird, jedoch möchte ich das ganze noch erweitern und in anderen bereits vorhandenen Blocklys einbauen.

Gruß Christoph

liv-in-sky

@bimmi

hast du mal versucht, das file unter dem /opt/iobroker/ ordner zu speichern - iobroker hat evtl keine rechte auf /var/......

bimmi

@liv-in-sky doch, ich sehe ja am Zeitstempel, dass die Datei aktualisiert wurde! ich habe den user iobroker dem Verzeichnis hinzugefügt.

liv-in-sky

@bimmi

hier mal ein beispiel zum import - verstehst du, was ich damit meine ? evtl musst duden parameter so angeben

<block xmlns="https://developers.google.com/blockly/xml" type="sendto_custom" id="b+yzc}s4ouYY:E}r`WrK" x="63" y="-312">
 <mutation xmlns="http://www.w3.org/1999/xhtml" items="clip" with_statement="false"></mutation>
 <field name="INSTANCE">puppeteer.0</field>
 <field name="COMMAND">send</field>
 <field name="LOG"></field>
 <field name="WITH_STATEMENT">FALSE</field>
 <value name="ARG0">
   <shadow type="text" id="z#Yfm!fw[pLKZWJI#h?o">
     <field name="TEXT">{ x: number,y: number, width: number, height: number        }</field>
   </shadow>
 </value>
</block>

liv-in-sky

@bimmi

wenn du dein und mein blockly im scriptmode ansiehst, siehst duden unterschied

bimmi

@liv-in-sky DANKE

Endlich!!!! Als Text direkt eingeben, so ähnlich hatte ich es schon, jedoch ohne x,y,width und heigh.

VIELEN DANK!

liv-in-sky

@bimmi

ich würde es so machen

<xml xmlns="https://developers.google.com/blockly/xml">
 <variables>
   <variable id="=|-HU{v0HPlybOQ*ghcR">mypath</variable>
   <variable id="(O?~p(`|c|(KIhiht#i*">myurl</variable>
   <variable id="Kg9b=20h)E,riQJeDEcb">myheight</variable>
   <variable id="d?/+]%mL0t@pakXBBv]V">mywidth</variable>
   <variable id="ELianL7RIoI]6v](.5H{">clipx</variable>
   <variable id="v7~-E}:`3zaZ=MG;7P=[">clipy</variable>
   <variable id="WKu^.B?9T66xQ_qJgB@2">clipwidth</variable>
   <variable id="$JY/m%d:K3q{;2o7?$9r">clipheight</variable>
 </variables>
 <block type="procedures_defcustomnoreturn" id="{{Bl:d;+8eDTq,0~J9H2" x="237" y="112">
   <mutation statements="false">
     <arg name="mypath" varid="=|-HU{v0HPlybOQ*ghcR"></arg>
     <arg name="myurl" varid="(O?~p(`|c|(KIhiht#i*"></arg>
     <arg name="myheight" varid="Kg9b=20h)E,riQJeDEcb"></arg>
     <arg name="mywidth" varid="d?/+]%mL0t@pakXBBv]V"></arg>
     <arg name="clipx" varid="ELianL7RIoI]6v](.5H{"></arg>
     <arg name="clipy" varid="v7~-E}:`3zaZ=MG;7P=["></arg>
     <arg name="clipwidth" varid="WKu^.B?9T66xQ_qJgB@2"></arg>
     <arg name="clipheight" varid="$JY/m%d:K3q{;2o7?$9r"></arg>
   </mutation>
   <field name="NAME">machePhoto</field>
   <field name="SCRIPT">c2VuZFRvKCdwdXBwZXRlZXIuMCcsICdzY3JlZW5zaG90JywgeyANCg0KICAgIHVybDogbXl1cmwgLA0KDQogICAgcGF0aDogbXlwYXRoICwgDQoNCiAgICB3aWR0aDpteXdpZHRoLA0KDQogICAgaGVpZ2h0Om15aGVpZ2h0LA0KDQogICAgd2FpdEZvclRpbWVvdXQ6IDUwMDAsDQogICAgZnVsbFBhZ2U6IGZhbHNlLA0KDQogICAgY2xpcDogeyAgICAgICAgIA0KICAgICAgICB4OiBjbGlweCwNCiAgICAgICAgeTogY2xpcHksDQogICAgICAgIHdpZHRoOiBjbGlwd2lkdGgsDQogICAgICAgIGhlaWdodDogY2xpcGhlaWdodA0KICAgICAgfQ0KDQp9KTs=</field>
   <comment pinned="false" h="80" w="160">Beschreibe diese Funktion …</comment>
 </block>
 <block type="procedures_callcustomnoreturn" id="a8y(c@2xKnJ~R;]2^j%W" x="238" y="162">
   <mutation name="machePhoto">
     <arg name="mypath"></arg>
     <arg name="myurl"></arg>
     <arg name="myheight"></arg>
     <arg name="mywidth"></arg>
     <arg name="clipx"></arg>
     <arg name="clipy"></arg>
     <arg name="clipwidth"></arg>
     <arg name="clipheight"></arg>
   </mutation>
   <value name="ARG0">
     <block type="text" id="M;V!K{lzb0v+Suf3#:h#">
       <field name="TEXT">/opt/iobroker/iobrokerSonder.png</field>
     </block>
   </value>
   <value name="ARG1">
     <block type="text" id="]1VeRv!bUZ%*eY/@f|qo">
       <field name="TEXT">http://192.168.178.59:8082/vis/index.html?handyBildAnzeige#sonderfahrt</field>
     </block>
   </value>
   <value name="ARG2">
     <block type="math_number" id="pJ;U)F%hQSRoloOZ6~/8">
       <field name="NUM">430</field>
     </block>
   </value>
   <value name="ARG3">
     <block type="math_number" id="piulWX_fca8nyM2RvyJt">
       <field name="NUM">645</field>
     </block>
   </value>
   <value name="ARG4">
     <block type="math_number" id="%D9jOfghJtgT{T{T7_sd">
       <field name="NUM">0</field>
     </block>
   </value>
   <value name="ARG5">
     <block type="math_number" id="AZ5@9Rh4%Q*{L9y9]_nY">
       <field name="NUM">0</field>
     </block>
   </value>
   <value name="ARG6">
     <block type="math_number" id="6dhDISS~rt[_YD@OY@5e">
       <field name="NUM">430</field>
     </block>
   </value>
   <value name="ARG7">
     <block type="math_number" id="+c`W$l4gL{m}q3cozn]*">
       <field name="NUM">645</field>
     </block>
   </value>
 </block>
</xml>

Image 138.png

so kann man seine settings besser eingeben

bimmi

@liv-in-sky ja so sieht es auch echt gut aus. dann hab ich wenigstens meine Datenpunkte Verwenden

was ich aber auch nicht hinbekomme ist das waitforselector. das hab ich eingefügt wie die anderen Einträge und wird nicht übernommen...

bimmi

mein script sieht inzwischen so aus:

<xml xmlns="https://developers.google.com/blockly/xml">
  <variables>
    <variable id="=|-HU{v0HPlybOQ*ghcR">mypath</variable>
    <variable id="(O?~p(`|c|(KIhiht#i*">myurl</variable>
    <variable id="Kg9b=20h)E,riQJeDEcb">myheight</variable>
    <variable id="d?/+]%mL0t@pakXBBv]V">mywidth</variable>
    <variable id="ELianL7RIoI]6v](.5H{">clipx</variable>
    <variable id="v7~-E}:`3zaZ=MG;7P=[">clipy</variable>
    <variable id="WKu^.B?9T66xQ_qJgB@2">clipwidth</variable>
    <variable id="$JY/m%d:K3q{;2o7?$9r">clipheight</variable>
    <variable id="*^L*3Kju!MAP#u`QL(gE">myselector</variable>
    <variable id="8,q0AR=qke3-k-JCj-2U">quality</variable>
  </variables>
  <block type="procedures_defcustomnoreturn" id="{{Bl:d;+8eDTq,0~J9H2" x="938" y="113">
    <mutation statements="false">
      <arg name="mypath" varid="=|-HU{v0HPlybOQ*ghcR"></arg>
      <arg name="myurl" varid="(O?~p(`|c|(KIhiht#i*"></arg>
      <arg name="myheight" varid="Kg9b=20h)E,riQJeDEcb"></arg>
      <arg name="mywidth" varid="d?/+]%mL0t@pakXBBv]V"></arg>
      <arg name="clipx" varid="ELianL7RIoI]6v](.5H{"></arg>
      <arg name="clipy" varid="v7~-E}:`3zaZ=MG;7P=["></arg>
      <arg name="clipwidth" varid="WKu^.B?9T66xQ_qJgB@2"></arg>
      <arg name="clipheight" varid="$JY/m%d:K3q{;2o7?$9r"></arg>
      <arg name="myselector" varid="*^L*3Kju!MAP#u`QL(gE"></arg>
      <arg name="quality" varid="8,q0AR=qke3-k-JCj-2U"></arg>
    </mutation>
    <field name="NAME">macheScreenshot</field>
    <field name="SCRIPT">c2VuZFRvKCdwdXBwZXRlZXIuMCcsICdzY3JlZW5zaG90JywgeyANCg0KICAgIHVybDogbXl1cmwgLA0KDQogICAgcGF0aDogbXlwYXRoICwgDQoNCiAgICB3aWR0aDpteXdpZHRoLA0KDQogICAgcXVhbGl0eTpxdWFsaXR5LA0KDQogICAgaGVpZ2h0Om15aGVpZ2h0LA0KDQogICAgd2FpdEZvclNlbGVjdG9yOm15c2VsZWN0b3IsDQoNCiAgICBmdWxsUGFnZTogZmFsc2UsDQoNCiAgICBjbGlwOiB7ICAgICAgICAgDQogICAgICAgIHg6IGNsaXB4LA0KICAgICAgICB5OiBjbGlweSwNCiAgICAgICAgd2lkdGg6IGNsaXB3aWR0aCwNCiAgICAgICAgaGVpZ2h0OiBjbGlwaGVpZ2h0DQogICAgICB9DQp9KTs=</field>
    <comment pinned="false" h="80" w="160">Beschreibe diese Funktion …</comment>
  </block>
  <block type="procedures_callcustomnoreturn" id="a8y(c@2xKnJ~R;]2^j%W" x="938" y="163">
    <mutation name="macheScreenshot">
      <arg name="mypath"></arg>
      <arg name="myurl"></arg>
      <arg name="myheight"></arg>
      <arg name="mywidth"></arg>
      <arg name="clipx"></arg>
      <arg name="clipy"></arg>
      <arg name="clipwidth"></arg>
      <arg name="clipheight"></arg>
      <arg name="myselector"></arg>
      <arg name="quality"></arg>
    </mutation>
    <value name="ARG0">
      <block type="get_value" id="@$eoRt:vgP2{$;eeUch0">
        <field name="ATTR">val</field>
        <field name="OID">00-ZUHAUSE.0.EPS.Test.Display-Bildpfad</field>
      </block>
    </value>
    <value name="ARG1">
      <block type="get_value" id="xlb5GgfuCSWL[Aergw[6">
        <field name="ATTR">val</field>
        <field name="OID">00-ZUHAUSE.0.EPS.Test.Display-Ziel-URL</field>
      </block>
    </value>
    <value name="ARG4">
      <block type="math_number" id="%D9jOfghJtgT{T{T7_sd">
        <field name="NUM">0</field>
      </block>
    </value>
    <value name="ARG5">
      <block type="math_number" id="AZ5@9Rh4%Q*{L9y9]_nY">
        <field name="NUM">0</field>
      </block>
    </value>
    <value name="ARG6">
      <block type="get_value" id="s$Lxum-=aMz`$(5TWW3%">
        <field name="ATTR">val</field>
        <field name="OID">00-ZUHAUSE.0.EPS.Test.Display-Breite</field>
      </block>
    </value>
    <value name="ARG7">
      <block type="get_value" id="P%oRRt;f$Ke}@s`ANY}B">
        <field name="ATTR">val</field>
        <field name="OID">00-ZUHAUSE.0.EPS.Test.Display-Höhe</field>
      </block>
    </value>
    <value name="ARG8">
      <block type="text" id="{3cIh]jtoaLdIe)!9Vp+">
        <field name="TEXT">#w00098</field>
      </block>
    </value>
    <value name="ARG9">
      <block type="math_number" id="|nkrAt*)GrI|sQV(?^Bz">
        <field name="NUM">100</field>
      </block>
    </value>
  </block>
</xml>

liv-in-sky

@bimmi

zum einem - du solltest keine variablen am function-aufruf weglassen bzw leer lassen - zur not mache :

Image 139.png

@bimmi sagte in Puppeteer: Screenshots PhantomJS Alternative:

waitforselector

habe ich noch nicht genutzt - da wird er wohl ein element der html seite abwarten - ich nehme anstatt waitForTimeout - einfach mal die seite öffnen und schauen wie lange sie braucht. du gibst da ein widget id an -weiß nicht, ob das so funktioniert - wie stellst du das eigentlich fest, das puppeteer nict auf das widget wartet

wenn ich zeit habe teste ich mal waitForSelector - oder evtl kann uns @foxriver76 ein paar tipps geben

liv-in-sky

@bimmi

habe gerade auch bei mir einen fehler gesehen - so sollten die waitoption angegeben werden:

Image 142.png

webseite:

Image 143.png

blockly:

Image 144.png

habe jetzt keine fehler mehr - scheint so zu funktionieren

bimmi

@liv-in-sky vielen Dank! Ich teste das heute Abend. ich mag den selector. das ist aus der Vis immer das letzte hinzugefügte Widget. Bei mir wäre es für #w00098. dann macht er einen Screenshot sobald der da ist.

Mein Webserver ist zwar echt schnell aber manchmal muss man auf Werte warten. daher ist der selector schon gut.

liv-in-sky

@bimmi
da gebe ich dir recht - habe ehrlich gesagt nie darauf geachtet - aber jetzt habe ich es mal eingestellt - heute morgen hat es funktioniert und konnte bild immer auf dem handy im auto anzeigen

bimmi

@liv-in-sky funktioniert perfekt! Genau wie ich es haben will! Im Prinzip ging es mir um die Qualität. Die kleinen E-INK Displays zeigen die Grafik besser an mit 100% Qualität bei der JPG Generierung!

dwm

Nachdem ich auch gern VIS und Grafana screens in Status-Reports verwenden würde, hab ich heute mal puppeteer ausprobiert:
Puppeteer startet nicht, und liefert folgende Fehler im log:

eteer.0
2023-10-27 11:26:04.506	error	Failed to launch the browser process![1027/112604.128429:FATAL:zygote_host_impl_linux.cc(127)] No usable sandbox! Update your kernel or see https://chromium.googlesource.com/chromium/src/+/main/docs/linux/suid_sandbox_development.md for more information on developing with the SUID sandbox. If you want to live dangerously and need an immediate workaround, you can try using --no-sandbox.#0 0x564aa1039f72 base::debug::CollectStackTrace()#1 0x564aa10264b3 base::debug::StackTrace::StackTrace()#2 0x564aa0f78fbf logging::LogMessage::~LogMessage()#3 0x564a9f795c16 content::ZygoteHostImpl::Init()#4 0x564aa04cfb23 content::ContentMainRunnerImpl::Initialize()#5 0x564aa04cd427 content::RunContentProcess()#6 0x564aa04cd606 content::ContentMain()#7 0x564aa0ab71fa headless::HeadlessShellMain()#8 0x564a9cbee255 ChromeMain#9 0x7fbbe3716d0a __libc_start_main#10 0x564a9cbee02a _startTROUBLESHOOTING: https://pptr.dev/troubleshooting

puppeteer.0
2023-10-27 11:26:04.505	error	Error: Failed to launch the browser process![1027/112604.128429:FATAL:zygote_host_impl_linux.cc(127)] No usable sandbox! Update your kernel or see https://chromium.googlesource.com/chromium/src/+/main/docs/linux/suid_sandbox_development.md for more information on developing with the SUID sandbox. If you want to live dangerously and need an immediate workaround, you can try using --no-sandbox.#0 0x564aa1039f72 base::debug::CollectStackTrace()#1 0x564aa10264b3 base::debug::StackTrace::StackTrace()#2 0x564aa0f78fbf logging::LogMessage::~LogMessage()#3 0x564a9f795c16 content::ZygoteHostImpl::Init()#4 0x564aa04cfb23 content::ContentMainRunnerImpl::Initialize()#5 0x564aa04cd427 content::RunContentProcess()#6 0x564aa04cd606 content::ContentMain()#7 0x564aa0ab71fa headless::HeadlessShellMain()#8 0x564a9cbee255 ChromeMain#9 0x7fbbe3716d0a __libc_start_main#10 0x564a9cbee02a _startTROUBLESHOOTING: https://pptr.dev/troubleshooting at Interface.onClose (/opt/iobroker/node_modules/@puppeteer/browsers/lib/cjs/launch.js:262:24) at Interface.emit (node:events:526:35) at Interface.close (node:internal/readline/interface:533:10) at Socket.onend (node:internal/readline/interface:259:10) at Socket.emit (node:events:526:35) at endReadableNT (node:internal/streams/readable:1359:12) at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

puppeteer.0
2023-10-27 11:26:04.503	error	unhandled promise rejection: Failed to launch the browser process![1027/112604.128429:FATAL:zygote_host_impl_linux.cc(127)] No usable sandbox! Update your kernel or see https://chromium.googlesource.com/chromium/src/+/main/docs/linux/suid_sandbox_development.md for more information on developing with the SUID sandbox. If you want to live dangerously and need an immediate workaround, you can try using --no-sandbox.#0 0x564aa1039f72 base::debug::CollectStackTrace()#1 0x564aa10264b3 base::debug::StackTrace::StackTrace()#2 0x564aa0f78fbf logging::LogMessage::~LogMessage()#3 0x564a9f795c16 content::ZygoteHostImpl::Init()#4 0x564aa04cfb23 content::ContentMainRunnerImpl::Initialize()#5 0x564aa04cd427 content::RunContentProcess()#6 0x564aa04cd606 content::ContentMain()#7 0x564aa0ab71fa headless::HeadlessShellMain()#8 0x564a9cbee255 ChromeMain#9 0x7fbbe3716d0a __libc_start_main#10 0x564a9cbee02a _startTROUBLESHOOTING: https://pptr.dev/troubleshooting

Die Umgebung ist ein buanet/iobroker Docker container, Version 8.1.0, also ein Debian 11.
Die package-installation ist durchgelaufen, die sind alle installiert.

Kleine Anmerkung zu den Packages: In dem Image wird standardmäßig die apt package Liste gelöscht, vermutlich um Platz im Filesystem zu sparen. Deswegen muss man vor der puppeteer Installation manuell ein

apt-get update

aufrufen, dann werden die Listen wieder installiert, und apt-get install ... funktioniert.

Aber zum jetzigen "no useable sandbox" Fehler fällt mir grad nix ein ... gibts eventuell Ideen?
Dank
Werner

Neuschwansteini

@dwm

da hatte ich mich letztes Jahr auch mal mit befasst... es gab n Parameter den man setzen konnte.. aber bei mir half das auch nicht..
Denke, das geht nicht im Docker.

arteck

da müsste doch @andre was zu sagen können

dwm

Muss da mal bisschen damit experimentieren, möglichst nicht auf dem "Production" System ;), aber dafür ist Docker ja perfekt.

Es gibt auf jeden Fall mal das puppeteer-troubleshooting als Ansatzpunkt:
https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#setting-up-chrome-linux-sandbox

NEWS

Puppeteer: Screenshots PhantomJS Alternative

Support us

821
Online

31.7k
Users

79.8k
Topics

1.3m
Posts

NEWS

Puppeteer: Screenshots PhantomJS Alternative

Support us

821Online

31.7kUsers

79.8kTopics

1.3mPosts

821
Online

31.7k
Users

79.8k
Topics

1.3m
Posts