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 installEdit 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:
npm run deployOpen 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:
| Event | Body is extracted from |
|---|---|
| SNS Message Event | .Records[0].Sns.Message |
| SQS Message Event | .Records[0].body |
| API Gateway Message Event | .body |
| CloudWatch Events Message Event | .detail |
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:
