
Show HN: Screen.rip – API for capturing web screenshots - laktek
http://screen.rip
======
indescions_2017
The Catch-22: set of folks with the skills to use a security token to call an
API and archive screen dumps for visual regression testing, roughly equals the
one that already knows how to automate via headless Chrome ;)

laktek, I'd be interested in hearing how you would turn this into a consumer
product? For myself, I'd like an API that wraps devtools for remote debugging
(on users machines). Am able to extract useful info via performance counters
and computed styles. But the entire process can be made much more friendly I
imagine.

Good luck, and keep building!

~~~
laktek
Thanks for the comment! So both Screen.rip and Page.REST are my way of
validating the market. I don't expect these API services to be the end product
(but rather the building blocks for bigger ideas).

However, APIs do seem to arouse curiosity among people. Lot of the emails I've
been getting follows the theme of "I saw your API and was wondering how we can
use to solve X". This way I get a more focused set of real problems (and their
potential value), rather than I try to hypothesis problem spaces.

PS: Another cool thing about releasing API first is I can start charging
people sooner, rather than having to wait till I build a finished product. It
helps since I'm bootstrapping.

~~~
rokhayakebe
$7 is cheap imo. I paid for a service similar to yours for years. Their price
point was close to 10 times as high as yours, yet I happily paid my monthly
subscription.

I love this.

~~~
jotto
$7 for 10,000 is not that cheap ($0.0007 per screenshot). I'm charging
$0.000365 per screenshot and I thought that was on the higher end.

[https://www.prerender.cloud/docs/api](https://www.prerender.cloud/docs/api)

    
    
      curl http://service.prerender.cloud/screenshot/https://google.com/ > out.jpg

~~~
rokhayakebe
I paid 10 times more for years happily.

------
kylecordes
Incidentally over the last few weeks I've been looking around the tools to
monitor the appearance of websites; think of this as a step up from "is my
site still online?" services, over toward "does my stride still look roughly
correct". The latter is super important for sites whose functioning is
critical to (for example) business happening, cash flowing, salaries being
paid.

What I found is that this market is relatively crowded at the low end, with
services that either don't state what browser they are using to render a site
for a visual check, or which state and only support one browser.

It looks like screen.rip is also aiming at this low-end. I don't see anything
on there about what browser uses, and nothing about choosing a browser. And it
is only $7 (for 10000 images).

It seems to me that there may also be a market for people happy to pay $70 for
the same thing, with the ability to specify which browser, and have the list
of available browsers include the ones that are kind of inconvenient to
support (older IE). Sure, it's a lot more of a technical slog, but I imagine
someone facing the sort of troubles and trying to monitor the appearance of
their site across all the major browsers would find that 10 X the stated price
is a relatively good deal compared to the misery of setting all that up
locally.

~~~
thecodemonkey
I’ve been having the same sort of frustrations and needs for a while, and
recently launch something to scratch that itch [1]

It’s tangently similar to screen.rip, but it’s much more focused on getting up
and started quickly and making it easy to monitor sides that require
authentication. Let me know what you think.

[1] [https://pixelbug.io](https://pixelbug.io)

~~~
scotchio
I've been using this for about month and like the email notifications when
changes happen. Pretty nice to have in my inbox for what I do.

Disclosure: I know the creator.

~~~
dabernathy89
I was going to mention Pixelbug in the comments as a possible alternative.

Disclosure: I know the parent commenter. And the creator. :)

------
NicoJuicy
C# api client
[https://github.com/NicoJuicy/WebsiteAsImageWebService.Api.Cs...](https://github.com/NicoJuicy/WebsiteAsImageWebService.Api.Csharp)

Nodejs api
[https://github.com/NicoJuicy/WebsiteAsImageWebService](https://github.com/NicoJuicy/WebsiteAsImageWebService)

:)

------
aidos
Good timing — though slightly OT.

For training our customers we often record little demos of how to achieve
something in our app, and then send it to them as an animated GIF in Intercom.
We've been using Giphy but it's pretty clumsy. The app itself is always in the
way, especially on a laptop screen and then you need to record the clip, save
it to disk and then drag it from disk into an Intercom conversation.

After trying a few other solutions there doesn't seem to be a pain-free way of
recording a clip and then having it available as an animated GIF ready to
paste into the browser. I'm not sure if some of the issue is that it's just
not possible to but an animated GIF in the clipboard on OSX (it just comes
through as a single still shot).

Does anyone have any recommendations for this workflow?

~~~
marvinpinto
I use this Chrome extension[0] for capturing animated gifs. It's worked pretty
well for me so far!

[0]: [https://chrome.google.com/webstore/detail/chrome-
capture/gga...](https://chrome.google.com/webstore/detail/chrome-
capture/ggaabchcecdbomdcnbahdfddfikjmphe)

~~~
aidos
Seems pretty good. It doesn't show the mouse movement / clicks, which is a
shame (and probably rules it out). At least it's a little slicker to use
though.

------
ivan_ah
Screenshots are useful, but diffs of screenshots are even more useful.

You could maybe immitate the workflow used by wraith? [https://github.com/bbc-
news/wraith](https://github.com/bbc-news/wraith)

For example to setup screenshot diffs between an existing production site and
local dev, use:

    
    
        # (required) The domains to take screenshots of.
        domains:
          current:  "https://prod.yoursite.com"
          new:      "http://localhost:8000"
    
        paths:
          home:     /pageyouareworkingon.html
    
    

Not sure how to connect to localhost 8000 from the web though...

~~~
laktek
Yeah, that'd something nice to build. To connect localhost to web, maybe
Ngrok?

~~~
ivan_ah
wow ngrok is nice...

------
catacombs
This is a great single-line tool that can make taking screenshots easy.

I'm a cheapskate, though, and don't mind spending the time to write my own
screenshot script via Selenium.

------
andys627
Very cool! Useful to keep tabs on competitors and your own sites.

I'd suggest adding some kind of Stripe branding to your payment form to make
it a little more trustworthy.

~~~
laktek
Thanks! Will try to add the Stripe's new Payment Request API buttons, so
payments are carried out from the Apple / Google pay.

------
lewisj489
This seems like a great idea and I don't think $7 is steep. There are free
options about but it's still cool none the less.

~~~
paulgb
I haven't looked around but the first competitor that comes up on Google
charges 29/month for 5000 screenshots so I'd gladly pay $7 if the results are
good (I'd rather pay $7 than $0 if I were building a product on top of this,
because I'd rather be a customer than a disposable user)

~~~
jotto
$7 per 10,000 is $0.0007 per screenshot

Get it for $0.000365 per screenshot from me (shameless)

[1]:
[https://www.prerender.cloud/docs/api](https://www.prerender.cloud/docs/api)

    
    
      curl http://service.prerender.cloud/screenshot/https://google.com/ > out.jpg

------
lucapinello
How different is from this free tool?

[https://wkhtmltopdf.org/](https://wkhtmltopdf.org/)

~~~
mpetrovich
If it’s using Chrome headless, it’s superior to wkhtmltopdf. The latter has
lots of little gotchas and things that may render fine in a browser but not in
wkhtmltopdf. Chrome headless doesn’t suffer from those issues, obviously.

~~~
gotrecruit
but the site itself says it "runs headless".

~~~
htgb
Running headless does not imply that it's running _Chrome_ headless, just that
it runs without a GUI.

------
Gys
A lot of talk about pricing here, so I add my favorite www.thum.io - charging
$2 for 10.000 with first 1.000 for free.

What I like about them in particular is their buffering: once a screenshot is
made, it can be served from their server 'unlimited' times without counting as
a new screenshot.

A real improvement on their service (worth paying extra for me !) would be a
way to dismiss the banner on github projects for new visitors. Obviously their
browser is not logged into Github at the moment of the screenshot, so those
screenshots mainly shows a general Github welcome banner :-(

------
cabaalis
So one perspective is that a lot of development these days is combining
existing libraries with glue code to meet a need. I wonder how much of the
future will be combining microservice APIs with affordable micro transactions
to meet a need.

~~~
laktek
This is what I want to have too! Machine payable web. Hopefully, something
like Ethereum / Lightning network would make the micro-transactions viable in
the future.

------
steve-benjamins
What does auto-updating mean?

I run a website builders review website and have always wanted to write a
script that captures every pricing page so that my readers could scan them all
at once.

Two problems have kept me from this:

1) Scrolling (which it looks like you've fixed— haven't seen other screenshot
APIs do this— awesome!) 2) Pricing pages change often— so manual screenshots
don't make sense. Does your auto-updating take care of this? (ie: captures a
new screenshot each time the page is updated)

~~~
laktek
I mean to evolve the product screenshots as you ship more features or make
cosmetic changes to the app. I assume it's PITA to keep the screenshots
consistent with the actual app UI.

------
davidpelayo
I guess it's using headless chrome, am I right?

~~~
romanovcode
Yeah, you can implement this in-house for your needs in less then 30 minutes
using 512mb DO droplet or other in-house devops tool server for free.

~~~
davidpelayo
in less than 30 minutes? Let's do it, I wanna see it

~~~
romanovcode
Took me around 15 minutes in total. Can I be CTO at your silicon valley
company now with 500k salary?

    
    
        const express = require('express')
        const app = express()
        const puppeteer = require('puppeteer')
        const uuidv1 = require('uuid/v1')
        const fs = require('fs')
        const validUrl = require('valid-url')
    
        app.get('/', function (req, res) {
          (async () => {
            const url = req.query.url;
    
            if (!url) {
              return res.send({error: 'Need to specify url param e.g. ?url=https://google.com/'});
            }
    
            if (!validUrl.isUri(url)) { // Also protects against file://...
              return res.send({error: 'url not valid'})
            }
    
            const id = uuidv1();
            const browser = await puppeteer.launch();
            const page = await browser.newPage();
            await page.setViewport({ width: 1920, height: 1080})
                
            await page.goto(url)
            const buffer = await page.screenshot({path: id + '.png'})
    
            const fullPath = __dirname + '/' + id + '.png';
    
            res.sendFile(fullPath, function () {
              fs.unlink(fullPath)
            })
    
            await browser.close()
          })();
        })
    
        app.listen(3000, function () {
          console.log('Example app listening on port 3000!')
        })

~~~
dvt
Apart from the smugness, I hope you realize that technology != success. It
doesn't _matter_ that I can replicate Tinder with a few weeks of coding.

In fact, the two are often inversely correlated because engineers can be _so
worried_ about what technology, what stack, what language, instead of worrying
about the _real_ deal: getting the users.

~~~
romanovcode
I know that you can build twitter and tinder and getting the users is hard.
But my point was very different -- People will probably need this for some
internal tooling (devops) and it is simple enough to just build it on your own
without paying someone or relying on 3rd party.

IMO there should be a line of what to outsource and what to build yourself. In
my mind simple things like this go into second category.

~~~
dvt
I see your point but I'm not fully convinced. Companies outsource simple stuff
all the time. To wit, I think that line you drew might vary from company to
company.

------
juliend2
How come "Arimo" is the default font for sans-serif, though?

img: [https://imgur.com/a/ULr4I](https://imgur.com/a/ULr4I)

page: [http://www.juliendesrosiers.com/](http://www.juliendesrosiers.com/)

Edit: I know I should've used @font-face for my logo, but still, it bugs me.

~~~
laktek
I was tweaking the font-setup to support full unicode ranges. Maybe a result
of it.

------
csomar
Any chance you implement bitcoin/blockchain payments. So I can pay you through
code and then programmatically get my token?

~~~
laktek
I want that on all APIs but I don't think Bitcoin or Ethereum is suitable for
such micro-payments. Waiting for something like lightning network to be
adopted.

------
petercooper
Well pitched and put together IMO but the thing that always irritates me about
services like these is the so-so font rendering. Screenshots taken on macOS
just look better for some reason. As an aside, I've always found it weird no
other OS has got text rendering quite as right, it's a key part of why I stick
with it.

~~~
laktek
Thanks Peter (I'm big fan of Cooper Press).

I actually tried to make the font rendering better. Installed few custom fonts
and also tweaked few system options. I agree it might not be crisp as macOS.

Wonder if hardcore Linux desktop enthusiasts have any tips here?

~~~
iampims
Rent a Mac mini in a colo and charge more for OS X screenshots?

~~~
imron
Checkout [https://www.macincloud.com/](https://www.macincloud.com/)

------
dvt
Awesome product, awesome landing page, awesome pricing scheme. I wish you only
success!

Next step: animated screengrabs (gif/webp)? :)

~~~
laktek
Thanks a lot David! Yeah, Screencasts seems like a natural progression to the
API. Will explore.

------
wallzz
The api is just perfect, I wonder if I can use it in a commercial project to
address some niche market ?!

~~~
laktek
Yes absolutely! You just have to pay for an API token.

------
mrskitch
Does it work with emojis and other interesting characters? If not then we
should talk since I'm working on a project that helps solve the browser part
of the equation [https://browserless.io](https://browserless.io)

~~~
laktek
It does! check emojipedia.com and popular non US sites like taobao.com. I did
that heavy lifting ;)

~~~
jonmb
Any advice for where I can learn more about proper handling of emojis in my
front-end and database?

~~~
mrskitch
He's using the Google Noto library for handling fonts:
[https://github.com/googlei18n/noto-emoji](https://github.com/googlei18n/noto-
emoji)

EDIT: This is also a really nice font library as well:
[https://www.emojione.com/](https://www.emojione.com/) though you have to pay
for a commercial license if that's your end game

------
styfle
I am working on a tool[0] to record a video of a website or web app. Instead
of A/B testing, I am using it to capture Repro Steps.

[0]:
[https://github.com/styfle/magnemite](https://github.com/styfle/magnemite)

------
arjunkomath
I build a similar tool but with few more capabilities like CDN, analytics and
PDF support. Feel free to check it out.

[https://capture.techulus.in/](https://capture.techulus.in/)

~~~
rokhayakebe
Question: How does your PDF version of web pages work? Is it an image turned
into PDF or?

~~~
laktek
In Screen.rip, generated PDF is a real PDF, which you can select and annotate.
Check [https://screen.rip/#pdf](https://screen.rip/#pdf)

------
pc86
I'm curious what the "We're ::lightning:: by Drift" means in the contact box.
What verb is supposed to be conveyed by ::lightning::? Fast? It's just the
chat box.

~~~
bgdam
We're 'powered' by Drift.

~~~
pc86
I'm an idiot. Thanks.

------
pdfparty
Check out [https://www.pdfparty.com](https://www.pdfparty.com) as well - some
similar and different capabilities

------
_ao789
I like the "capture an area" feature. Very nice!

------
voltagex_
The 365 day expiry time is a little frustrating - but you probably don't want
customers stretching out the quota over 2+ years.

~~~
laktek
Felt 365 days is ok in terms of security as well. For example, if you lose the
token (aka dead project) and someone get hold of the key starts using it for
abuse. This way we have at least an annual check of the keys.

------
etoykan
Looks cool! Maybe you can add an option to record the screen / area for x
seconds as a gif, it might be useful in some cases.

~~~
laktek
Thanks for the idea, was thinking of exploring screencasting possibility as a
next step.

------
jpetersonmn
I've tried 7 different pages from our setup and not one of them worked.

~~~
laktek
Can you share more details of your setup? (my contact details are on profile)

------
slig
Can you make it save the page as PDF as well?

~~~
laktek
Yes [https://screen.rip/#pdf](https://screen.rip/#pdf)

------
RhodesianHunter
Any consideration towards bulk pricing?

100's of millions?

~~~
laktek
100s of millions over a time period? You can keep buying more tokens as you
run out of request quotas.

~~~
RhodesianHunter
Bulk pricing generally implies a reduced price for a larger purchase.

$7 per 10k stops being cost effective at that scale.

------
mechazawa
why? Why not just use casperjs or something and use the built-in method?

It's literally 3 lines of code. Or even a one-liner if you really want.

    
    
      require('casper')
        .create()
        .start('https://rms.sexy')
        .then(function() {
          this.capture('test.png');
        }).run();

~~~
Posibyte
I have a little design for a Cortex based platform with enough memory to hold
these images, but there's no way I could run an entire webkit instance for
capturing images. This is a perfect solution me.

So yeah, in my case casper is a no-go.

~~~
mechazawa
Writing and hosting this yourself on a different machine is very little work.

------
dogruck
I've never heard of several proper nouns in these threads: Intercom, Selenium,
Drift.

Time to Google.

~~~
mpetrovich
Drift is a cheaper (read: free) version of Intercom

