Show HN: Chromda – Serverless Website Screenshots

Chromda – Serverless screenshots

Chromda is an AWS Lambda function for serverless capturing screenshots of websites.

Multiple sources

• SNS topics
• SQS queues
• CloudWatch scheduled events
• API Gateway proxy

Configurable

• Capture full page, viewport or specific DOM element
• Exclude DOM elements (useful for ads or other unwanted content)
• Override styles

Quick start

Provided you already have AWS credentials for Serverless, do:

git clone https://github.com/luisfarzati/chromda cd chromda git submodule update --init npm install

Edit the serverless.yml file and change the example bucket name with one of your own:

# serverless.yml custom: s3Bucket: <your bucket name>

Deploy the function into your AWS account:

Open the AWS Lambda Console and create the following test event:

{ "source": "aws.events", "time": "1970-01-01T00:00:00Z", "detail": { "url": "https://www.nytimes.com" } }

Click Test, wait a few seconds (it might take around 8-10 secs), then you should see a response like:

{ "url": "https://<your bucket name>.s3.amazonaws.com/<uuid>.png" }

Usage

Invocation

The function accepts different kind of events, extracting the data from the proper body attribute as follows:

Options

{ // required "url": "https://google.com", // optional - valid options: page, viewport, element // default: viewport "capture": "page", // selector of element to capture // required if capture: element "selector": ".container", // optional - S3 key for the image file // default: uuid() "s3key": "test.png", // optional - selectors of elements to exclude "exclude": [".ad", "video"], // optional - styles to override // see Puppeteer.addStyleTag "styles": [ { "content": "body { color: #f00; }" } ], // optional - puppeteer options "puppeteer": { // see Puppeteer.goto options "navigation": { "timeout": 30000, "waitUntil": ["domcontentloaded", "networkidle2"] }, // see Puppeteer.screenshot options "screenshot": { "type": "jpeg", "quality": 50, "omitBackground": false }, // viewport size, overrides env defaults "viewport": { "width": 1200, "height": 2000 } } }

Environment Variables

Name	Default
S3_BUCKET*
S3_REGION*
S3_ACL	"public-read"
CHROMIUM_ARGS	"[]"
TIMEOUT	"30000"
IGNORE_HTTPS_ERRORS	"false"
VIEWPORT_WIDTH	"1920"
VIEWPORT_HEIGHT	"1200"
DEVICE_SCALE_FACTOR	"1"
IS_MOBILE	"false"
IS_LANDSCAPE	"false"

Deploy

# serverless.yml # ... custom: s3Bucket: <your bucket name> provider: # ... layers: # Replace <version> with the latest version of chrome-aws-lambda-layer # It depends on the region you are deploying. # https://github.com/shelfio/chrome-aws-lambda-layer#available-regions - arn:aws:lambda:${self:provider.region}:764866452798:layer:chrome-aws-lambda:<version> functions: captureScreenshot: # ... environment: # configure the environment variables VIEWPORT_WIDTH: "1920" VIEWPORT_HEIGHT: "1200" # ... events: # add any of the supported event source(s) you want to use # the provided example uses SNS - sns: arn: !Ref chromdaTopic topicName: ${self:custom.snsTopic} resources: # following the example, we provision an SNS topic chromdaTopic: Type: AWS::SNS::Topic Properties: TopicName: ${self:custom.snsTopic}

X-Ray

AWS X-Ray support is provided and there are segments for Puppeteer navigation and screenshot:

from Hacker News https://ift.tt/39rfNky