λ 🖼️ Chromda is an AWS Lambda function for capturing screenshots of websites.
MIT License
Chromda is an AWS Lambda function for serverless capturing screenshots of websites.
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:
npm run deploy
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"
}
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 |
{
// 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
}
}
}
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" |
# 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}
AWS X-Ray support is provided and there are segments for Puppeteer navigation and screenshot: