Puppeteer Page.Screencast 点击页面答案

【问题标题】：Puppeteer Page.Screencast click on pagePuppeteer Page.Screencast 点击页面
【发布时间】：2021-04-19 01:23:03
【问题描述】：

我正在使用 CDP 的截屏视频将 Puppeteer 页面的屏幕传输到我的网站，我想添加一个新功能，您点击传输时也会点击页面。

截屏代码和socket连接都正常，问题是点击坐标好像不对，同步不了

要将图像放在我的网站上，我正在接收截屏帧并通过套接字发送：

await session.send('Page.startScreencast')
session.on('Page.screencastFrame', ({ data: base64, sessionId }) => {
   socket.emit('screencastFrame', { base64 }) // sending base64 image
   session.send('Page.screencastFrameAck', { sessionId }).catch(() => { });
})

在我的网站上显示图像（默认 800x604）和点击事件：

<img
   src={`data:image/png;base64, ${base64}`}
   onClick={({ screenX, screenY }) => {
      socket.emit('click', { coords: { x: screenX, y: screenY } })
   }} />

为了处理点击事件，我这样做：

socket.on('click', ({coords}) => {
   await page.evaluate(({ x, y }) => {
      const element = document.elementFromPoint(x, y);
      console.log((element as HTMLElement))
      element.click() 
   }, coords))
})

正如我之前所说，点击是在错误的地方执行的，我不知道如何解决这个问题

【问题讨论】：

标签： reactjs puppeteer screencast

【解决方案1】：

您需要使用clientX 和clientY 而不是screenX 和screenY。

所以把你的代码改成这个亲爱的就可以解决问题了。

<img
   src={`data:image/png;base64, ${base64}`}
   onClick={({ screenX, screenY }) => {
      socket.emit('click', { coords: { x: clientX, y: clientY } })
   }} />

【讨论】：