Building an interactive screen-sharing app with Puppeteer and React

mkdir screen-sharing-appcd screen-sharing-appmkdir client server

cd clientnpx create-react-app ./

npm install socket.io-client react-router-dom

function App() {    return (        <div>            <p>Hello World!</p>        </div>    );}export default App;

cd server & npm init -y

npm install express cors nodemon socket.io

touch index.js

//index.jsconst express = require("express");const app = express();const PORT = 4000;app.use(express.urlencoded({ extended: true }));app.use(express.json());app.get("/api", (req, res) => {    res.json({        message: "Hello world",    });});app.listen(PORT, () => {    console.log(`Server listening on ${PORT}`);});

const express = require("express");const app = express();const PORT = 4000;app.use(express.urlencoded({ extended: true }));app.use(express.json());//New importsconst http = require("http").Server(app);const cors = require("cors");app.use(cors());app.get("/api", (req, res) => {    res.json({        message: "Hello world",    });});http.listen(PORT, () => {    console.log(`Server listening on ${PORT}`);});

//New imports.....const socketIO = require('socket.io')(http, {    cors: {        origin: "http://localhost:3000"    }});//Add this before the app.get() blocksocketIO.on('connection', (socket) => {    console.log(`: ${socket.id} user just connected!`);    socket.on('disconnect', () => {      console.log(': A user disconnected');    });});

//In server/package.json"scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "start": "nodemon index.js"  },

npm start

cd client/srcmkdir componentstouch Home.js Modal.js

import React from "react";import { BrowserRouter, Route, Routes } from "react-router-dom";import Home from "./components/Home";const App = () => {    return (        <BrowserRouter>            <Routes>                <Route path='/' element={<Home />} />            </Routes>        </BrowserRouter>    );};export default App;

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");body {    margin: 0;    padding: 0;    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",        "Helvetica Neue", sans-serif;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}* {    font-family: "Space Grotesk", sans-serif;    box-sizing: border-box;}.home__container {    display: flex;    min-height: 55vh;    width: 100%;    flex-direction: column;    align-items: center;    justify-content: center;}.home__container h2 {    margin-bottom: 30px;}.createChannelBtn {    padding: 15px;    width: 200px;    cursor: pointer;    font-size: 16px;    background-color: #277bc0;    color: #fff;    border: none;    outline: none;    margin-right: 15px;    margin-top: 30px;}.createChannelBtn:hover {    background-color: #fff;    border: 1px solid #277bc0;    color: #277bc0;}.form {    width: 100%;    display: flex;    align-items: center;    justify-content: center;    flex-direction: column;    margin-bottom: 30px;}.form__input {    width: 70%;    padding: 10px 15px;    margin: 10px 0;}.popup {    width: 80%;    height: 500px;    background: black;    border-radius: 20px;    padding: 20px;    overflow: auto;}.popup-ref {    background: white;    width: 100%;    height: 100%;    position: relative;}.popup-ref img {    top: 0;    position: sticky;    width: 100%;}@media screen and (max-width: 768px) {    .login__form {        width: 100%;    }}

import React, { useCallback, useState } from "react";import Modal from "./Modal";const Home = () => {    const [url, setURL] = useState("");    const [show, setShow] = useState(false);    const handleCreateChannel = useCallback(() => {        setShow(true);    }, []);    return (        <div>            <div className='home__container'>                <h2>URL</h2>                <form className='form'>                    <label>Provide a URL</label>                    <input                        type='url'                        name='url'                        id='url'                        className='form__input'                        required                        value={url}                        onChange={(e) => setURL(e.target.value)}                    />                </form>                {show && <Modal url={url} />}                <button className='createChannelBtn' onClick={handleCreateChannel}>                    BROWSE                </button>            </div>        </div>    );};export default Home;

import { useState } from "react";import socketIO from "socket.io-client";const socket = socketIO.connect("http://localhost:4000");const Modal = ({ url }) => {    const [image, setImage] = useState("");    return (        <div className='popup'>            <div className='popup-ref'>{image && <img src={image} alt='' />}</div>        </div>    );};export default Modal;

npm start

cd servernpm install puppeteer

import { useState, useEffect } from "react";import socketIO from "socket.io-client";const socket = socketIO.connect("http://localhost:4000");const Modal = ({ url }) => {    const [image, setImage] = useState("");    useEffect(() => {        socket.emit("browse", {            url,        });    }, [url]);    return (        <div className='popup'>            <div className='popup-ref'>{image && <img src={image} alt='' />}</div>        </div>    );};export default Modal;

socketIO.on("connection", (socket) => {    console.log(`: ${socket.id} user just connected!`);    socket.on("browse", async ({ url }) => {        console.log("Here is the URL >>>> ", url);    });    socket.on("disconnect", () => {        socket.disconnect();        console.log(": A user disconnected");    });});

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;

// Add the following importsconst puppeteer = require("puppeteer");const PuppeteerMassScreenshots = require("./screen.shooter");socketIO.on("connection", (socket) => {    console.log(`: ${socket.id} user just connected!`);    socket.on("browse", async ({ url }) => {        const browser = await puppeteer.launch({            headless: true,        });        // creates an incognito browser context        const context = await browser.createIncognitoBrowserContext();        // creates a new page in a pristine context.        const page = await context.newPage();        await page.setViewport({            width: 1255,            height: 800,        });        // Fetches the web page        await page.goto(url);        // Instance of PuppeteerMassScreenshots takes the screenshots        const screenshots = new PuppeteerMassScreenshots();        await screenshots.init(page, socket);        await screenshots.start();    });    socket.on("disconnect", () => {        socket.disconnect();        console.log(": A user disconnected");    });});

import { useState, useEffect } from "react";import socketIO from "socket.io-client";const socket = socketIO.connect("http://localhost:4000");const Modal = ({ url }) => {    const [image, setImage] = useState("");    const [fullHeight, setFullHeight] = useState("");    useEffect(() => {        socket.emit("browse", {            url,        });        /*         Listens for the images and full height              from the PuppeteerMassScreenshots.           The image is also converted to a readable file.        */        socket.on("image", ({ img, fullHeight }) => {            setImage("data:image/jpeg;base64," + img);            setFullHeight(fullHeight);        });    }, [url]);    return (        <div className='popup'>            <div className='popup-ref' style={{ height: fullHeight }}>                {image && <img src={image} alt='' />}            </div>        </div>    );};export default Modal;

const mouseMove = useCallback((event) => {    const position = event.currentTarget.getBoundingClientRect();    const widthChange = 1255 / position.width;    const heightChange = 800 / position.height;    socket.emit("mouseMove", {        x: widthChange * (event.pageX - position.left),        y:            heightChange *            (event.pageY - position.top - document.documentElement.scrollTop),    });}, []);const mouseClick = useCallback((event) => {    const position = event.currentTarget.getBoundingClientRect();    const widthChange = 1255 / position.width;    const heightChange = 800 / position.height;    socket.emit("mouseClick", {        x: widthChange * (event.pageX - position.left),        y:            heightChange *            (event.pageY - position.top - document.documentElement.scrollTop),    });}, []);

socket.on("browse", async ({ url }) => {    const browser = await puppeteer.launch({        headless: true,    });    const context = await browser.createIncognitoBrowserContext();    const page = await context.newPage();    await page.setViewport({        width: 1255,        height: 800,    });    await page.goto(url);    const screenshots = new PuppeteerMassScreenshots();    await screenshots.init(page, socket);    await screenshots.start();    socket.on("mouseMove", async ({ x, y }) => {        try {            //sets the cursor the position with Puppeteer            await page.mouse.move(x, y);            /*             This function runs within the page's context,                calculates the element position from the view point                and returns the CSS style for the element.            */            const cur = await page.evaluate(                (p) => {                    const elementFromPoint = document.elementFromPoint(p.x, p.y);                    return window                        .getComputedStyle(elementFromPoint, null)                        .getPropertyValue("cursor");                },                { x, y }            );            // sends the CSS styling to the frontend            socket.emit("cursor", cur);        } catch (err) {}    });    // Listens for the exact position the user clicked    //   and set the move to that position.    socket.on("mouseClick", async ({ x, y }) => {        try {            await page.mouse.click(x, y);        } catch (err) {}    });});

import { useCallback, useEffect, useRef, useState } from "react";import socketIO from "socket.io-client";const socket = socketIO.connect("http://localhost:4000");const Modal = ({ url }) => {    const ref = useRef(null);    const [image, setImage] = useState("");    const [cursor, setCursor] = useState("");    const [fullHeight, setFullHeight] = useState("");    useEffect(() => {        //...other functions        // Listens to the cursor event        socket.on("cursor", (cur) => {            setCursor(cur);        });    }, [url]);    //...other event emitters    return (        <div className='popup'>            <div                ref={ref}                className='popup-ref'                style={{ cursor, height: fullHeight }} // cursor is added            >                {image && (                    <img                        src={image}                        onMouseMove={mouseMove}                        onClick={mouseClick}                        alt=''                    />                )}            </div>        </div>    );};export default Modal;

const Modal = ({ url }) => {    //...other functions    const mouseScroll = useCallback((event) => {        const position = event.currentTarget.scrollTop;        socket.emit("scroll", {            position,        });    }, []);    return (        <div className='popup' onScroll={mouseScroll}>            <div                ref={ref}                className='popup-ref'                style={{ cursor, height: fullHeight }}            >                {image && (                    <img                        src={image}                        onMouseMove={mouseMove}                        onClick={mouseClick}                        alt=''                    />                )}            </div>        </div>    );};

socket.on("browse", async ({ url }) => {    //....other functions    socket.on("scroll", ({ position }) => {        //scrolls the page        page.evaluate((top) => {            window.scrollTo({ top });        }, position);    });});