title: Puppeteer Page.Screencast click on page
body: <p>I'm using the screencast from CDP to transmit the screen of the Puppeteer page to my website and I want to add a new function, where you click on the transmission the click on the page happens too.</p>
  <p>The screencast code and socket connections are all in order, the problem is the click coordinates that seem to be wrong and I can't sync them</p>
  <p>To put the image on my website I am receiving the screencast frame and sending it via socket:</p>
  <pre><code>await session.send('Page.startScreencast')
  session.on('Page.screencastFrame', ({ data: base64, sessionId }) =&gt; {
     socket.emit('screencastFrame', { base64 }) // sending base64 image
     session.send('Page.screencastFrameAck', { sessionId }).catch(() =&gt; { });
  })
  </code></pre>
  <p>on my website the image (800x604 default) is shown and the click event:</p>
  <pre><code>&lt;img
     src={`data:image/png;base64, ${base64}`}
     onClick={({ screenX, screenY }) =&gt; {
        socket.emit('click', { coords: { x: screenX, y: screenY } })
     }} /&gt;
  </code></pre>
  <p>to handle the click event I do this:</p>
  <pre><code>socket.on('click', ({coords}) =&gt; {
     await page.evaluate(({ x, y }) =&gt; {
        const element = document.elementFromPoint(x, y);
        console.log((element as HTMLElement))
        element.click() 
     }, coords))
  })
  </code></pre>
  <p>As I said earlier, clicks are being performed in the wrong places I don't know a solution for this</p>