Puppeteer Page.Screencast点击页面
Puppeteer Page.Screencast点击页面
提问于 2021-01-14 08:58:01
我正在使用来自CDP的截屏视频将木偶页面的屏幕传输到我的网站，我想添加一个新功能，在该功能中，您点击传输，页面上的点击也会发生。
screencast代码和socket连接都是有序的，问题是点击坐标似乎是错误的，我无法同步它们
为了把图片放到我的网站上，我正在接收截屏画面，并通过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))
})正如我前面所说的，点击是在错误的地方执行的，我不知道解决这个问题的方法
回答 1
Stack Overflow用户
发布于 2021-01-14 17:51:13
您需要使用clientX和clientY，而不是screenX和screenY。
所以把你的代码改成这个代码就可以解决这个问题了。
<img
src={`data:image/png;base64, ${base64}`}
onClick={({ screenX, screenY }) => {
socket.emit('click', { coords: { x: clientX, y: clientY } })
}} />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65711956
复制相关文章
相似问题
腾讯云开发者
