screenshot as a service
TRANSCRIPT
SCREENSHOT AS A SERVICE
HELLO!I am Cage Chung
I am here because I like to share my experiences. You can find me at https://kaichu.io / QNAP 雲端應用部資深工程師
https://www.facebook.com/groups/GCPUG.TW/
https://plus.google.com/u/0/communities/116100913832589966421
[您知道”GCPUG”要怎麼唸嗎？為什麼會有一隻狗在 Logo裡面呢？ ]
Google Cloud Platform User Group的縮寫是GCPUGGCPUG直接唸成G.C.P.U.G？當然可以！
但它也可以分開來，唸成 G.C. PUG喔～
Pug，指的是巴哥犬，所以 GCPUG的Logo中間才會有一隻可愛的巴哥犬喲。
下次聽到別人說G.C. PUG 的時候，您就可以大聲說：「我也是G.C. PUG社團成員！」
Outline
◉ Waldo-gcp◉ How to Screenshot◉ Screenshot as service via GAE custom runtime◉ Demo◉ Study Info
Waldo-gcpLet’s start with the first set of slides 1
queue
MetadataWaldo Server
App Engine
Task Queues
Cloud Storage
Optimal-waypoints
managed VMs(python27)
...
endpoints API(OAuth 2)
Object Notific
ation
CloudeDatastore
snapshot
custom runtim(nodejs)
Android App
CSV
upload waypoints
Store/retrieve metadata
waypoint map
snapshot
optimal road trip
RESTful APIs for waypoints list, upload
waypoints
How to ScreenshotLet’s start with the second set of slides 2
Phamtonjs
// yahoo.com.tw.js
var page = require('webpage').create();
page.viewportSize = { width: 1440, height: 900 };
page.clipRect = { top: 0, left: 0, width: 1440, height: 900 };
page.open('http://yahoo.com.tw', function() {
page.render('yahoo.com.tw.png');
phantom.exit();
});
// execute
$ phantomjs yahoo.com.tw.js
[Screen Capture | PhantomJS](http://phantomjs.org/screen-capture.html)
Chromeless on AWS Lambda
const chromeless = new Chromeless({ remote: true })
const screenshot = await chromeless
.goto('http://yahoo.com.tw')
.scrollTo(0, 2000)
.screenshot()
console.log(screenshot)
await chromeless.end()
[graphcool/chromeless: � Chrome automation made simple. Runs locally or headless on AWS Lambda.](https://github.com/graphcool/chromeless)
puppeteer
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({width: 1440, height: 900});
await page.goto('http://yahoo.com.tw',
{ waitUntil: 'networkidle' });
await page.screenshot({
path: 'yahoo.com.tw.png'
});
browser.close();
})();
[GoogleChrome/puppeteer: Headless Chrome Node API](https://github.com/GoogleChrome/puppeteer)
Screenshot as service via GAE custom runtime
Let’s start with the third set of slides 3
“GAE screenshot service powered by
Express and PhantomJS.
app.yaml
runtime: custom
env: flex
service: screenshot
resources:
cpu: 1
memory_gb: 1
disk_size_gb: 10
manual_scaling:
instances: 1
handlers:
- url: /.*
script: app.js
DockerfileFROM launcher.gcr.io/google/debian8
RUN DEBIAN_FRONTEND=noninteractive apt-get update -y && apt-get install --no-install-recommends -y -q curl apt-utils
build-essential ca-certificates libfreetype6 libfontconfig1
RUN echo "deb http://http.debian.net/debian jessie-backports main" > /etc/apt/sources.list.d/backports.list && \
apt-get update -y && \
apt-get install -y --no-install-recommends fonts-noto fonts-noto-cjk locales-all && \
apt-get clean && \
apt-get autoclean && \
apt-get autoremove && \
rm -rf /var/lib/apt/lists/*
RUN mkdir /nodejs && curl http://nodejs.org/dist/v0.12.1/node-v0.12.1-linux-x64.tar.gz | tar xvzf - -C /nodejs
--strip-components=1
ENV PATH $PATH:/nodejs/bin
WORKDIR /app
ADD package.json /app/
RUN npm install
ADD . /app
ENTRYPOINT ["/nodejs/bin/npm", "start"]
package.json
{
"name": "screenshot-as-a-service",
"description": "Website screenshot service powered by node.js and phantomjs for Waldo-gcp",
"version": "1.1.0",
"repository": "https://github.com/cage1016/screenshot-as-a-service",
"engines": {
"node": ">=0.8.4"
},
"scripts": {
"start": "node app.js"
},
"dependencies": {
"phantomjs": "^1.9.16",
"express": "3.x",
"config": "0.4.15",
"request": "2.9.153"
}
}
dispatch.yaml
dispatch:
- url: "*/favicon.ico"
service: default
- url: "*/_ah/api/*"
service: default
- url: "*/waypoints/*"
service: waypoints
- url: "*/screenshot/*"
service: screenshot
- url: "*/googleae8f4bcce8bec00c.html"
service: ownership
- url: "*/*"
service: frontend
DEMOLet’s start with the fourth set of slides 4
https://goo.gl/vDHH1o
Waldo-gcp
Trips and TipsLet’s start with the fifth set of slides 5
“Puppeteer is more easier to build
screenshot as a service than phantomjs
Study info
◉ GoogleChrome/puppeteer: Headless Chrome Node API - https://github.com/GoogleChrome/puppeteer
◉ graphcool/chromeless: � Chrome automation made simple. Runs locally or headless on AWS Lambda. - https://github.com/graphcool/chromeless
◉ cage1016/screenshot-as-a-service: Website screenshot service powered by node.js and phantomjs - https://github.com/cage1016/screenshot-as-a-service
◉ Screen Capture | PhantomJS - http://phantomjs.org/screen-capture.html
