Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
novu
🔥 The open-source notification infrastructure with fully functional embedded notification center 🚀🚀🚀
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
const { join } = require("path"); const fs = require("fs").promises; const emptyFunction = async () => {}; const defaultAfterWritingNewFile = async (filename) => console.log(`${filename} was written`); class PuppeteerMassScreenshots { /* page - represents the web page socket - Socket.io options - Chrome DevTools configurations */ async init(page, socket, options = {}) { const runOptions = { //👇🏻 Their values must be asynchronous codes beforeWritingImageFile: emptyFunction, afterWritingImageFile: defaultAfterWritingNewFile, beforeAck: emptyFunction, afterAck: emptyFunction, ...options, }; this.socket = socket; this.page = page; //👇🏻 CDPSession instance is used to talk raw Chrome Devtools Protocol this.client = await this.page.target().createCDPSession(); this.canScreenshot = true; //👇🏻 The frameObject parameter contains the compressed image data // requested by the Page.startScreencast. this.client.on("Page.screencastFrame", async (frameObject) => { if (this.canScreenshot) { await runOptions.beforeWritingImageFile(); const filename = await this.writeImageFilename(frameObject.data); await runOptions.afterWritingImageFile(filename); try { await runOptions.beforeAck(); /*👇🏻 acknowledges that a screencast frame (image) has been received by the frontend. The sessionId - represents the frame number */ await this.client.send("Page.screencastFrameAck", { sessionId: frameObject.sessionId, }); await runOptions.afterAck(); } catch (e) { this.canScreenshot = false; } } }); } async writeImageFilename(data) { const fullHeight = await this.page.evaluate(() => { return Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight ); }); //Sends an event containing the image and its full height return this.socket.emit("image", { img: data, fullHeight }); } /* The startOptions specify the properties of the screencast 👉🏻 format - the file type (Allowed fomats: 'jpeg' or 'png') 👉🏻 quality - sets the image quality (default is 100) 👉🏻 everyNthFrame - specifies the number of frames to ignore before taking the next screenshots. (The more frames we ignore, the less screenshots we will have) */ async start(options = {}) { const startOptions = { format: "jpeg", quality: 10, everyNthFrame: 1, ...options, }; try { await this.client?.send("Page.startScreencast", startOptions); } catch (err) {} } /* Learn more here 👇🏻: https://github.com/shaynet10/puppeteer-mass-screenshots/blob/main/index.js */ async stop() { try { await this.client?.send("Page.stopScreencast"); } catch (err) {} } } module.exports = PuppeteerMassScreenshots;
So far, you've learned how to set up a real-time connection with React.js and Socket.io, take screenshots of webpages with Puppeteer and Chrome DevTools Protocol, and make them interactive.
For this article I will use Puppeteer and ReactJS. Puppeteer is a Node.js library that automates several browser actions such as form submission, crawling single-page applications, UI testing, and in particular, generating screenshot and PDF versions of web pages.
Just a quick background about us. Novu is the first open-source notification infrastructure. We basically help to manage all the product notifications. It can be In-App (the bell icon like you have in the Dev Community - Websockets), Emails, SMSs and so on.
Express.js is a fast, minimalist framework that provides several features for building web applications in Node.js. CORS is a Node.js package that allows communication between different domains.