Merge pull request #1 from qrstuff/add-screenshot-feature

Implement screenshot lambda

.dockerignore

@@ -0,0 +1 @@
+.gitignore

.gitignore

@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

Dockerfile

@@ -0,0 +1,13 @@
+FROM public.ecr.aws/lambda/nodejs:20
+
+RUN npm i -g yarn
+
+RUN yarn add @sparticuz/chromium puppeteer-core
+
+COPY package.json yarn.lock ${LAMBDA_TASK_ROOT}
+
+RUN yarn install --frozen-lockfile
+
+COPY . ${LAMBDA_TASK_ROOT}
+
+CMD ["app.handler"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 QR Code Generator Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1 +1,46 @@
 # screenshuttle
+
+This project provides a service to capture screenshots or PDFs of web pages using AWS Lambda and Puppeteer.
+The service can be configured to capture specific elements, hide certain elements, and set custom dimensions and formats for the output.
+
+## Usage
+
+Clone the project and install dependencies (only required for code-completion) using [Yarn](https://yarnpkg.com/):
+
+```shell
+yarn install
+```
+
+Build and run the [Docker](https://www.docker.com/) image:
+
+```shell
+# build Docker image
+docker build -t screenshuttle .
+
+# start a test container
+docker run -it --rm -p 8080:8080 screenshuttle
+```
+
+Test [Lambda](https://aws.amazon.com/lambda/) execution by sending a test event:
+
+```shell
+curl -X POST "http://127.0.0.1:8080/2015-03-31/functions/function/invocations" -H "content-type: application/json" -d '{"url": "http://example.com/"}'
+```
+
+There are more options supported by handler than you can pass as event data e.g., as below:
+
+```json
+{
+    "url": "http://example.com/",
+    "exclude": ["#hide-me", ".hide-me-too"],
+    "format": "jpeg", # one of jpeg, pdf or png
+    "fullpage": true,
+    "selector": "#only-me",
+    "width": 1280,
+    "heigt": 720
+}
+```
+
+## License
+
+See the [LICENSE](LICENSE) file for details. Made with ❤️ at [QRStuff](https://qrstuff.com/).

app.js

@@ -0,0 +1,73 @@
+const capture = require("./capture");
+
+const OUTPUT_FORMATS = ["jpeg", "pdf", "png"];
+
+const createErrorResponse = (statusCode, error) => ({
+  statusCode,
+  headers: {
+    "content-type": "application/json",
+  },
+  body: JSON.stringify({ error }),
+});
+
+const handler = async (event) => {
+  const url = event.url;
+
+  const exclude = event.exclude || [];
+  const format = event.format || OUTPUT_FORMATS[0];
+  const fullpage = !!event.fullpage;
+  const selector = event.selector;
+
+  const width = parseInt(event.width || 1920);
+  const height = parseInt(event.height || 1080);
+
+  if (!url) {
+    return createErrorResponse(422, "URL field is required");
+  }
+
+  if (!OUTPUT_FORMATS.includes(format)) {
+    return createErrorResponse(
+      422,
+      "Format field value must be one of " + OUTPUT_FORMATS.join(","),
+    );
+  }
+
+  if (
+    format !== "pdf" &&
+    (isNaN(width) || isNaN(height) || width <= 0 || height <= 0)
+  ) {
+    return createErrorResponse(
+      422,
+      "Field width and height must be valid dimensions",
+    );
+  }
+
+  try {
+    const buffer = await capture({
+      url,
+      exclude,
+      format,
+      fullpage,
+      selector,
+      width,
+      height,
+    });
+    return {
+      statusCode: 200,
+      headers: {
+        "content-type":
+          format === "pdf" ? "application/pdf" : `image/${format}`,
+        "content-length": buffer.length,
+      },
+      body: buffer.toString("base64"),
+      isBase64Encoded: true,
+    };
+  } catch (err) {
+    return createErrorResponse(
+      422,
+      err.message || "Error encountered while capturing screenshot.",
+    );
+  }
+};
+
+module.exports = { handler };

capture.js

@@ -0,0 +1,77 @@
+const chromium = require("@sparticuz/chromium");
+const puppeteer = require("puppeteer-core");
+
+async function capture({
+  url,
+  exclude,
+  format,
+  fullpage,
+  selector,
+  width,
+  height,
+}) {
+  let browser = null;
+
+  try {
+    browser = await puppeteer.launch({
+      args: chromium.args,
+      defaultViewport: chromium.defaultViewport,
+      executablePath: await chromium.executablePath(),
+      headless: chromium.headless,
+    });
+
+    const page = await browser.newPage();
+
+    await page.setViewport({ width, height });
+    await page.goto(url, { waitUntil: "networkidle0" });
+
+    if (selector) {
+      await page.waitForSelector(selector);
+    }
+
+    if (exclude?.length) {
+      await page.evaluate((selectors) => {
+        selectors.forEach((selector) => {
+          const element = document.querySelector(selector);
+          if (element) {
+            element.style.visibility = "hidden";
+          }
+        });
+      }, exclude);
+    }
+
+    let buffer;
+    if (format === "pdf") {
+      buffer = await page.pdf({
+        format: "A4",
+        printBackground: true,
+      });
+    } else {
+      const options = {
+        type: format,
+        fullPage: fullpage || false,
+      };
+
+      if (format === "jpeg") {
+        options.quality = 80;
+      }
+
+      if (selector) {
+        const element = await page.$(selector);
+        if (!element) {
+          throw new Error(`Element ${selector} could not be found.`);
+        }
+
+        buffer = await element.screenshot(options);
+      } else {
+        buffer = await page.screenshot(options);
+      }
+    }
+
+    return buffer;
+  } finally {
+    await browser?.close();
+  }
+}
+
+module.exports = capture;

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "screenshuttle",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Khushbu Jajal <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "@sparticuz/chromium": "^123.0.1",
+    "puppeteer-core": "^22.10.0",
+    "serverless": "^4.0.35"
+  },
+  "repository": "https://github.com/qrstuff/screenshuttle.git"
+}