1

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

截屏代码和套接字连接都是有序的，问题是点击坐标似乎是错误的，我无法同步它们

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

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))
})

正如我之前所说，在错误的地方执行了点击我不知道解决方案

4

1 回答 1

0

您需要使用clientXandclientY而不是screenXand screenY。

因此，将您的代码更改为这个亲爱的将解决问题。

<img
   src={`data:image/png;base64, ${base64}`}
   onClick={({ screenX, screenY }) => {
      socket.emit('click', { coords: { x: clientX, y: clientY } })
   }} />
于 2021-01-14T09:51:12.887 回答