chromda

by luisfarzati

luisfarzati / chromda

λ 🖼️ Chromda is an AWS Lambda function for capturing screenshots of websites.

469 Stars 15 Forks Last release: Not found MIT License 13 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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: 

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://.s3.amazonaws.com/.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 | | ------------------- | --------------- | | S3BUCKET* | | | S3REGION* | | | S3ACL |

"public-read"
| | CHROMIUMARGS |

"[]"
| | TIMEOUT |
"30000"
| | IGNOREHTTPSERRORS |
"false"
| | VIEWPORTWIDTH |
"1920"
| | VIEWPORT
HEIGHT |
"1200"
| | DEVICESCALEFACTOR |
"1"
| | ISMOBILE |
"false"
| | IS
LANDSCAPE |
"false"
|

Deploy

# serverless.yml

...

custom: s3Bucket:

provider:

...

layers: # Replace 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:

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:

AWS X-Ray screenshot

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.