1. PhantomJS Screenshot Server
on Heroku
Shinichi Tomita
@stomita

2. PhantomJS Screenshot Server
with Node.js, Socket.IO, and AWS S3
connect
enqueue
wait
(page_url)
dispatch
(page_url, sign)
open(page_url)
Web Page
to Capture
(page) (page)
Socket.IO
render
upload
(image_file) (image_file, sign)
notify
(page_url, image_url)
(image_url)
wait
.
.
.

3. Web Server (Node.js)
• Socket.IO server
• request channel (clients: browsers)
- enqueue screenshot page URL
• render channel (clients: PhantomJS)
- dispatch page rendering work
- receive rendering result image URL
• Create S3 signature for browser post upload

4. Screenshot Server (PhantomJS)
• “Screenshot Server” => “Socket.IO Client”
• Run on PhantomJS buildpack
(https://github.com/stomita/heroku-buildpack-phantomjs)
• Procfile:
renderer: phantomjs screenshot.js $PUSH_SERVER_URL
• Scaling server instance
$ heroku ps:scale renderer=4

5. Image Server (AWS S3)
• Storing rendered screenshot image file
• Directly uploaded from PhantomJS
- Browser Post upload
(http://aws.amazon.com/articles/1434)

6. Reference
• Source:
- https://github.com/stomita/heroku-screenshot
• Deployed:
- http://heroku-screenshot-nodejs.herokuapp.com