Show HN: Screen.rip – API for capturing web screenshots | Hacker News Reader

Show HN: Screen.rip – API for capturing web screenshots

screen.rip

195 pointslaktek120 comments

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!

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.

$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.

$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

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

I paid 10 times more for years happily.

Now, the question is, did you already charged anyone with these APIs? Do yo want to share any concrete experience since you are bootstrapping?

Yes, I blogged about it on the experience of releasing Page.REST https://www.laktek.com/what-i-learned-from-building-pagerest...

(and people have purchased Screen.rip tokens in the last hour or so :))

I disagree. $7 is extremely cheap. I really like that it's per use and not a monthly charge.

I tried dabbling with [chromeless](https://github.com/graphcool/chromeless) and wasted a bunch of time on some random error that I eventually found out was a bug.

If I had to do it myself I'd use Docker + Selenium, but I'd definitely give this a shot first.

I've just done something like this recently and it's not as easy as you might think. It is easy to make a thing happen quickly with a few lines of code, but making it reliable and repeatable is much more time consuming.

This looks like very favorable pricing if you don't need certain features.

But, if you need support for setting: location, turning on flash, proxies, and https://urlbox.io/ is also very useful.

flash? for screenshots taken at night?

I did this before (manual screenshooting). It'll take 1-2 weeks of full dev work. If you are looking for a quick solution, $7 is less than what I pay at starbucks.

I call this the coffee profitable :) First step to Ramen profitability.

Let me check if I understood correctly. As the same way you may use TeamViewer for remote desktop control, you would like to perform remote debugging on user browser devtools? Could you drop what's the use case you are imagining in a real scenario? Great comment. Thanks.

Real world example would be an "io game". Like slither.io. I need full client stats: CPU and GPU capabilities, rendering and network performance. Instrumenting in javascript while game is max'ed out during runtime is less than ideal ;)

I've been working on something similar with http://www.butterflyfx.io that captures information beyond a screenshot. It's still a work in progress, however.

And I'm interested to talk more about remote debugging use case. Feel free to drop me a DM on Twitter (@laktek) :)

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.

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

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.

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

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

>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).

Mark me down on this list. In particular, I'd like an API that lets me have a more detailed look into the web page - for example, list all images used by the web page (this is a lot harder than it sounds once you consider images can be loaded by CSS, IMG HTML tag, can be delayed loading, etc).

In short, I'd love an API where I can see the same details of a webpage as Chrome's debugger shows. I looked into Chrome headless, but there was some issue with hooking into the debugger (admittedly I know only the basics about Chrome headless).

No affiliation, but I have used Browserling by pkrumins and substack, albeit never for screenshots. https://www.browserling.com/

But WebPageTest is free (and setting up a private instance isn’t hard).

C# api client https://github.com/NicoJuicy/WebsiteAsImageWebService.Api.Cs...

Nodejs api https://github.com/NicoJuicy/WebsiteAsImageWebService

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?

I use LICEcap: https://www.cockos.com/licecap/.

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...

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.

ShareX does mp4 and gif. (Windows only though)

https://getsharex.com

For most gifs, I use licecap for the capture and save to a Dropbox folder. Works well if you're sharing with customers or users, in a one-on-one setting. Quicktime Player has a screen capture mode if you need higher quality videos.

My wife recommends https://www.useloom.com/ for you, though I myself have not used it.

I've used screen to GIF for this http://www.screentogif.com/ it worked pretty well for me.

https://www.screenr.com/ USED to be great for this.

There is also apparently https://screencast-o-matic.com/

Screenflick is the best tool for this. Great UI, loads of export options. Very stable. Love it. https://www.araelium.com/screenflick/how-to-use

Maybe i'm misunderstanding the use case, but would Gyazo Gif be a good solution to your issue? I use it pretty frequently and other than the odd hiccup it works pretty good.

I use cloudapp for this. I have colleagues using recordit too.

What about Screenflow?

You can use snagit from techsmith for this. It supports saving as an animated gif and can upload to number of places like screencast.com directly from the product which generates a URL that you can share.

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

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...

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

wow ngrok is nice...

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.

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.

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

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.

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)

$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

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

Yeah. Slightly annoying for small private use cases that it's limited to a year, but it might still be worth it.

How different is from this free tool?

https://wkhtmltopdf.org/

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.

but the site itself says it "runs headless".

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

One is a hosted service and one isn't.

I know but if I need to use an API to an external server I can also launch a command locally. 7$ is not much but I don't see any real benefit unless you want to capture a subsection of a website.

The clip to a specific DOM element seems unique to this.

Also with screen.rip, you can run a custom JS before capturing the screenshot and also can wait for certain elements to appear (which is quite important today with client-side rendered sites)

Disclaimer: I created screen.rip

> Disclaimer: I created screen.rip

No need for a disclaimer, after all, this is your Show HN ;)

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 :-(

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.

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.

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)

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.

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

Yeah, based on Puppeteer and Headless Chrome. You can set it up on your own VPS. That would mean you are paying at least $5 a month plus your time to maintain it. I believe it's not worth the hassle, especially if it's for a non-primary feature in your app.

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.

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

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!')
    })

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.

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.

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.

Don't run this on EC2; you'll probably get your metadata stolen. Also:

    if (!validUrl.isUri(url)) { // Also protects against file://...

It does?

    ▶ cat valid.js
    var validUrl = require('valid-url');

    if (validUrl.isUri("file:///etc/passwd")){
        console.log('Looks like a URI');
    }

    ▶ node valid.js
    Looks like a URI

Perhaps the problem requires a little more than 15 minutes to do well :)

Yeah, like 15 minutes more. Ergo my original statement - 30 minutes. As a bonus I would also stream binary data directly to client without creating an image file.

ok. congrats! While I would spend a few hours you would spend 30 minutes. However, this guy just published something to start making money, and it's working for him, no matter who is able to create what in how much time.

> Took me around 15 minutes in total.

So assuming a rate of $80/hr (which is on the low-side), it cost you $20 in time to do what you could have for $7.

A CTO worth 500k/year would probably realise that paying $7 is more cost effective.

5 mins would be enough with puppeteer https://github.com/GoogleChrome/puppeteer

Basically you just need to read up on how chrome-headless works.. I do have this complicated chrome-remote-protocol script that does the same as the command line version, so I guess it's all about priorities

Basically:

  1. sign up for droplet 10 min
  2. install google-chrome and webserver 10 min
  3. call google headless from a CGI script 10 min

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

img: https://imgur.com/a/ULr4I

page: http://www.juliendesrosiers.com/

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

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

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

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.

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.

The opposite is true - I wonder every day how Mac OSX users are unable to see how bad the font rendering is on their screens - the fonts are garbled like a bad jpeg. On the same hardware with any decent Linux distro like Ubuntu I get perfectly rendered fonts!

I guess there's a "different strokes" aspect here, as I have heard similar complaints (and in both directions). I must be in the Steve Jobs camp of aesthetics :-D

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?

To be fair, I am being very picky :-D Given that most people will be using this for testing or scaling the images down, the differences will likely be hard to pick out in everyday use.

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

Checkout https://www.macincloud.com/

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

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

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

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

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

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

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

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

He's using the Google Noto library for handling fonts: https://github.com/googlei18n/noto-emoji

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

Quick note on the welcome page of browserless.io: "then browserless if for you" should read "then browserless is for you".

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

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/

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

In Screen.rip, generated PDF is a real PDF, which you can select and annotate. Check https://screen.rip/#pdf

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.

We're 'powered' by Drift.

I'm an idiot. Thanks.

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

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

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

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.

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.

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

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

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

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

Yes https://screen.rip/#pdf

Any consideration towards bulk pricing?

100's of millions?

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

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

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

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();

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.

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

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

Time to Google.

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

Reply on news.ycombinator.com