Chromda is an AWS Lambda function for serverless capturing screenshots of websites.
- SNS topics
- SQS queues
- CloudWatch scheduled events
- API Gateway proxy
- Capture full page, viewport or specific DOM element
- Exclude DOM elements (useful for ads or other unwanted content)
- Override styles
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 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: