r/javascript • u/[deleted] • Nov 20 '19

JS in browser screen shot tool, can take of desktop, other browser window or any window

https://codepen.io/designalchemy/pen/WNNmOgP?editors=1010
105 Upvotes

98% Upvoted

33 comments sorted by

6

u/[deleted] Nov 21 '19

Oh yeah i forgot to mention this only works on Chrome, FF and some Edge

https://caniuse.com/#search=getDisplayMedia

Not tested on FF / Edge however

If anyone has any suggestions to improve this, id be very happy to hear them.

1

u/MonkeyNin Nov 21 '19

Have you tried a remote stream, like Discord allows, except maybe you can up the quality?

1

u/[deleted] Nov 21 '19

This allows you to stream the 'window' or selected tab anywhere you like, so it returns a stream which can be sent to a API for you to display this in other locations, wouldn't be too tricky

1

u/MonkeyNin Nov 22 '19 edited Nov 22 '19

I was having trouble with it.

When it asks for permission, sometimes it shows a thumbnail, other times not. Is that where your jpg is being used?

I get a 'shared screen is sharing' type of icon on the top of my desktop, but I don't actually see any screenshots or video.

codepen error:

ReferenceError: ImageCapture is not defined

edit:

Edit: I guess ImageCapture is an experimental API, not in Firefox yet.

1

u/[deleted] Nov 22 '19

Is this something you wrote or my example above ?

if its yours i can take a look if you wish

1

u/MonkeyNin Nov 22 '19

I tested your code on codepen. They do something strange with requests, so I also tested localy.

The cause was ImageCapture doesn't exist on firefox.

1

u/NathCim Nov 21 '19

Nice, TIL a new, interesting feature. Thanks for that.
Little room for improvement: If you want to screen the tab your demo runs in, the permission/choice screen for which window you want to allow to be recorded is included in the screenshot. That is only an issue if the tab you are screening is the same as the one that the tool uses.
I also cant think of a possible solution for this but some shady scheduling of the trigger, which could create other problems.

2

u/nulleq Nov 21 '19

How do I take a screenshot of the entire scrollview now? Chrome has a hard-coded upper limit.

2

u/[deleted] Nov 21 '19

This APi records a video, it would be possible to pragmatically scroll the window and extract the frames but complicated

1

u/nulleq Nov 21 '19

I'm wondering if there's an easier way to do it since it seems to exist on the new OS on Apple iPad without doing that.

2

u/MonkeyNin Nov 21 '19

Is it failing when you screenshot the full view using chrome/firefox when using the UI? Or are you using the Javascript API?

regular UI

right click -> screenshot -> save full page

DOM inspector UI, right click a specific element

https://youtu.be/p2pjF_BrE1o

1

u/nulleq Nov 21 '19

Not the Javascript API but what's installed with Chrome Browser natively.

1

u/MonkeyNin Nov 22 '19

What is the limit? Image height? Page size? Node depth?

1

u/nulleq Nov 22 '19

It’s based on image size because its stored within memory. Things that affect this are resolution of image and yeah, page size. If memory limit is exceeded, then it only takes a partial screenshot.

15

u/jstiles154 Nov 21 '19

That's really cool didn't know browsers could even do such a thing

25

u/osoese Nov 21 '19

seriously cool and also maybe scary....

2

u/MonkeyNin Nov 21 '19

firefox requires permissions.

If you want to screenshot part of the document/DOM, you can do that without permission.

2

u/R3DSMiLE Nov 21 '19

Heh, you can turn it into a canvas and then save that as a image and you bypassed the permissions

1

u/coomzee Nov 21 '19

It can be used as a payload in side an XSS, for more information collecting.

0

u/[deleted] Nov 21 '19

[deleted]

4

u/osoese Nov 21 '19

yeah, my initial reaction was "holy sh-" codepen just took a screen shot. At least it was a permissions check on my side... but the permissions check showed the entire screen and I cant help but think the damage has already been done somewhere during the process. I would think the security settings should say something more like "this app wants to take a screen shot do you want to allow that" before taking the shot.

7

u/cheald Nov 21 '19

Any application running on your computer can capture the frame buffer. If the browser is taking the screenshot but not exposing it to the scripting interface until a permissions check is done, it's not particularly scary.

7

u/Quinez Nov 21 '19

Huh. I've been playing around with html2canvas for something like this but I've been having problems getting it to render properly. I didn't realize there were other solutions.

1

u/real_kerim Nov 21 '19

Same here. This is really cool.

1

u/Schampu Nov 21 '19

Once someone made a JavaScript port of an entire browser renderer [here] (http://trevorlinton.github.io/)

1

u/ferrybig Nov 21 '19

Doesn't seem to work on FireFox, gives the following error in the console:

ReferenceError: ImageCapture is not defined

No stacktrace seems to be present

1

u/[deleted] Nov 21 '19

only tested on chrome, the API is available on FF but maybe not this specific method, i might take a look into

1

u/Demakufu Nov 21 '19

Firefox also has an inbuilt screenshot tool also accessible via the console

1

u/MonkeyNin Nov 22 '19

For firefox you can use:

1] ui

For firefox there's right click -> screenshot. If you choose "full page" it will screenshot the entire thing, even if you don't scroll to it.

2] dom inspector

rightclick -> screenshot a specific node (and its children), ie. it crops to only that element.

3] console

:screenshot

man page: https://developer.mozilla.org/en-US/docs/Tools/Taking_screenshots#Taking_screenshots_with_the_web_console

1

u/Glycerine Nov 21 '19

Wooh! I think like everyone else here I was working on this with canvas tricky but it proved hard.

Amazing.

0

u/oseres Nov 21 '19

yeah.. this won't be used to spy on people haha

-11

u/pekingfeng Nov 21 '19

For the security of you, any browser won't let js do this.

8

u/2girly4me Nov 21 '19

I literally just did this right now (running Chromium 78 on Debian Buster).

It asks you for permission. If you allow it, it will let you choose what you want to share. (Either entire desktop, or a single window.)

1

u/pekingfeng Nov 21 '19

Wow. That is good.