Estoy tratando de proporcionar acceso remoto del navegador titiritero al cliente para poder rastrear las actividades del usuario. Usando Socket.io, capturando eventos del mouse y tomando capturas de pantalla del navegador, pude mostrar el navegador al cliente de esta manera:

 const launchBrowser = async (socket) => { try { browser = await puppeteer.launch({defaultViewport: null, args: minimal_args}); browser.on("disconnected", () => { clearInterval(interval); }); let page = await browser.pages(); page = page[0]; console.log("connected") await page.setViewport({ width: 800, height: 600 }); await page.goto("https://example.com/", {waitUntil: "networkidle0", timeout: 0}); socket.on('MOUSE_MOVE', async ({x, y}) => { await page.mouse.move(x, y); }); socket.on('MOUSE_CLICK', async ({x, y, button}) => { await page.mouse.click(x, y, {button: button}); }); socket.on('KEY_PRESS', async ({key}) => { if (key === "ArrowUp") { await page.mouse.wheel({deltaY: -100}); return } if (key === "ArrowDown") { await page.mouse.wheel({deltaY: 100}); return } await page.keyboard.press(key); }); socket.on('WHEEL', async ({x, y}) => { await page.mouse.wheel({deltaX: x, deltaY: y}); }); //taking continuous screen shots and broadcasting it to the client interval = setInterval(async () => { try { const ss = await page.screenshot({encoding: "base64", captureBeyondViewport: false}); socket.emit("receive-screen", ss); } catch (e) { console.log(e.message); } }, 1); } catch (e) { console.log(e); } }

Sin embargo, esta forma de tomar capturas de pantalla y transmitir no es fluida y no proporciona una buena experiencia de usuario. También intenté grabar el navegador usando el flujo de titiritero y transmitirlo al cliente, pero el video se transmite con un retraso de alrededor de 3-4 segundos.

¿Hay alguna forma de hacer que la transmisión de capturas de pantalla sea fluida o alguna otra forma de mostrar el navegador del titiritero al cliente para proporcionar acceso remoto?