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.
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 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.
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.
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.
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.
>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).
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?
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.
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.
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.
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.
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)
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.
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.
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)
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.
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.
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.
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.
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
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
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.
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
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
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.
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.
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.
I thought of offering this as a service too. Of course you'll never see my comment because the bitches behind hackernews think they are more righteous than me.
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!
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.
I love this.
https://www.prerender.cloud/docs/api
(and people have purchased Screen.rip tokens in the last hour or so :))
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.
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.
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.
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
Disclosure: I know the creator.
Disclosure: I know the parent commenter. And the creator. :)
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).
Nodejs api https://github.com/NicoJuicy/WebsiteAsImageWebService
:)
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?
[0]: https://chrome.google.com/webstore/detail/chrome-capture/gga...
https://getsharex.com
My wife recommends https://www.useloom.com/ for you, though I myself have not used it.
There is also apparently https://screencast-o-matic.com/
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:
Not sure how to connect to localhost 8000 from the web though...I'm a cheapskate, though, and don't mind spending the time to write my own screenshot script via Selenium.
I'd suggest adding some kind of Stripe branding to your payment form to make it a little more trustworthy.
Get it for $0.000365 per screenshot from me (shameless)
[1]: https://www.prerender.cloud/docs/api
https://wkhtmltopdf.org/
Disclaimer: I created screen.rip
No need for a disclaimer, after all, this is your Show HN ;)
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 :-(
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)
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.
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.
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.
Basically:
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 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?
Next step: animated screengrabs (gif/webp)? :)
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
[0]: https://github.com/styfle/magnemite
https://capture.techulus.in/
100's of millions?
$7 per 10k stops being cost effective at that scale.
It's literally 3 lines of code. Or even a one-liner if you really want.
So yeah, in my case casper is a no-go.
Time to Google.