4 ms·

Show HN: Screen recording with JavaScript

87 points by own3r 12y ago

wingerlang 12y ago
Chrome Version 35.0.1916.114 OSX 10.9 I get an error then a blank modal. On both buttons. Nothing in the console to tell me more or anything like that.
- ioseph 12y ago
  Chrome 34.0.1847.137m on Win7, getting an alert: "Error, while recording your screen"
  - eskimobloood 12y ago
    Seems the app is a test to verify that people don't read the README.
- sync 12y ago
  From the readme: Currently the API for screen capturing is supported only by Google Chrome, Canary and Chromium by enabling an experimental flag. In order to enable the flag: Go to chrome://flags Enable - "Enable screen capture support in getUserMedia()" Restart your browser https://github.com/mgechev/jscapture#how-to-use https://github.com/mgechev/jscapture#how-to-use
dshankar 12y ago
Please do not do this. You should not instruct users to change flags in order to use this. This opens up fairly serious security loopholes as malicious websites can start screensharing without being instantiated by the user. Instead of using the getUserMedia API directly, you should use Chrome's chooseDesktopMedia API to get a desktop capture source (the screen, a tab, or any application window). The chooseDesktopMedia API is available in Chrome 34+ and can be used to do desktop screen capture/share without asking the user to enable flags. As of 6 hours ago, the flag (#enable-usermedia-screen-capture) has been removed and will not be present in Chrome 35 Stable. [Ref: https://codereview.chromium.org/270353002 https://codereview.chromium.org/270353002 & https://code.google.com/p/chromium/issues/detail?id=347641 https://code.google.com/p/chromium/issues/detail?id=347641] In any case, cool hack!
- dshankar 12y ago
  Another benefit of using cDM: more visitors to your site would be able to use your app right now instead of posting "Chrome vers. doesn't work" :-) 20% of the world (and likely an even larger percentage of HN users) already have cDM support! [http://caniuse.com/usage_table.php http://caniuse.com/usage_table.php]
  - gk1 12y ago
    I was excited about this at first. I don't know of any simple way to record my screen without having to download decade-old software. A web-based solution like this would be amazing... Until I realized I'd have to follow a list of work-arounds just to get it working. Hoping this is just the first trial run and the next iteration will get this resolved.
    - dshankar 12y ago
      The getUserMedia API is still fairly early. If the OP used the chooseDesktopMedia API in concert with getUserMedia and built a Chrome Extension, you wouldn't have to do any of these work-arounds. I expect an enormous number of Chrome Extensions that do all sorts of web-based screen recording & sharing in the coming months.
- randall 12y ago
  (yo Darshan!) Correct me if I'm wrong but isn't that api an extension only api? https://developer.chrome.com/extensions/desktopCapture https://developer.chrome.com/extensions/desktopCapture
  - cpncrunch 12y ago
    It does look like it is only for extensions. Does this mean it will now be impossible for users to use desktop sharing from web apps? I don't really see the security problem. Right now there is a popup asking if you want to share your screen, and there is also a permanent warning at the bottom of the screen while the screen is being shared. Also it is only available on https sites. What possible security risk is there?
MasterScrat 12y ago
It would be really nice to be able to record a portion of my browser window, convert the sequence to a GIF and upload it to imgur. That would make some bug reports much clearer, rather than describing each step.
- scraplab 12y ago
  Yes, this would be brilliant. I'd really like it as an always available app with a hotkey to activate recording, and Dropbox integration for upload + sharing. Even limited to a few seconds it'd be very useful for developing complex UI interactions with a remote team.
- gk1 12y ago
  > ...convert the sequence to a GIF and upload it to imgur. I would even pay for a tool like this.
- xhrpost 12y ago
  Trying to think how you could build this. Unless there's some fancy new feature in the browsers, I think you'd have to do something complicated like run WebKit.JS and capture from the canvas output.
- petercooper 12y ago
  It's not browser based but such a thing exists for Windows and OS X: http://www.cockos.com/licecap/ http://www.cockos.com/licecap/
- MattBearman 12y ago
  Shameless plug: My app BugMuncher (http://bugmuncher.com http://bugmuncher.com) allows you to submit screenshots with bug reports, without needing any browser plugins or experimental APIs. The ability to take a sequence of screenshots for each bug report is on the road map.
- Jonovono 12y ago
  I am working on a project to do that for the Mac: https://github.com/Jonovono/cutter https://github.com/Jonovono/cutter. I originally wanted to do it in JS for the web but didn't find away. May revisit that now!
hsx 12y ago
This is cool but video should scale to screensize. Yes, I do understand that this is more of a proof of concept.
SimeVidas 12y ago
Why is Firefox not supported? https://github.com/mgechev/jscapture/issues/5 https://github.com/mgechev/jscapture/issues/5
- gcp 12y ago
  FWIW Firefox for Android supports sharing Tabs via getUserMedia.
frozenport 12y ago
"With great power comes great responsibility"
yaronn01 12y ago
I recently did something similar with official javascript APIs: http://s3-us-west-2.amazonaws.com/anigif100/pacman/index.html http://s3-us-west-2.amazonaws.com/anigif100/pacman/index.htm...

87 points by own3r 12y ago

Chrome Version 35.0.1916.114 OSX 10.9 I get an error then a blank modal. On both buttons. Nothing in the console to tell me more or anything like that.

ioseph 12y ago
Chrome 34.0.1847.137m on Win7, getting an alert: "Error, while recording your screen"
- eskimobloood 12y ago
  Seems the app is a test to verify that people don't read the README.
sync 12y ago
From the readme: Currently the API for screen capturing is supported only by Google Chrome, Canary and Chromium by enabling an experimental flag. In order to enable the flag: Go to chrome://flags Enable - "Enable screen capture support in getUserMedia()" Restart your browser https://github.com/mgechev/jscapture#how-to-use https://github.com/mgechev/jscapture#how-to-use

dshankar 12y ago

Please do not do this. You should not instruct users to change flags in order to use this. This opens up fairly serious security loopholes as malicious websites can start screensharing without being instantiated by the user. Instead of using the getUserMedia API directly, you should use Chrome's chooseDesktopMedia API to get a desktop capture source (the screen, a tab, or any application window). The chooseDesktopMedia API is available in Chrome 34+ and can be used to do desktop screen capture/share without asking the user to enable flags. As of 6 hours ago, the flag (#enable-usermedia-screen-capture) has been removed and will not be present in Chrome 35 Stable. [Ref: https://codereview.chromium.org/270353002 https://codereview.chromium.org/270353002 & https://code.google.com/p/chromium/issues/detail?id=347641 https://code.google.com/p/chromium/issues/detail?id=347641] In any case, cool hack!

dshankar 12y ago
Another benefit of using cDM: more visitors to your site would be able to use your app right now instead of posting "Chrome vers. doesn't work" :-) 20% of the world (and likely an even larger percentage of HN users) already have cDM support! [http://caniuse.com/usage_table.php http://caniuse.com/usage_table.php]
- gk1 12y ago
  I was excited about this at first. I don't know of any simple way to record my screen without having to download decade-old software. A web-based solution like this would be amazing... Until I realized I'd have to follow a list of work-arounds just to get it working. Hoping this is just the first trial run and the next iteration will get this resolved.
  - dshankar 12y ago
    The getUserMedia API is still fairly early. If the OP used the chooseDesktopMedia API in concert with getUserMedia and built a Chrome Extension, you wouldn't have to do any of these work-arounds. I expect an enormous number of Chrome Extensions that do all sorts of web-based screen recording & sharing in the coming months.
randall 12y ago
(yo Darshan!) Correct me if I'm wrong but isn't that api an extension only api? https://developer.chrome.com/extensions/desktopCapture https://developer.chrome.com/extensions/desktopCapture
- cpncrunch 12y ago
  It does look like it is only for extensions. Does this mean it will now be impossible for users to use desktop sharing from web apps? I don't really see the security problem. Right now there is a popup asking if you want to share your screen, and there is also a permanent warning at the bottom of the screen while the screen is being shared. Also it is only available on https sites. What possible security risk is there?

MasterScrat 12y ago

It would be really nice to be able to record a portion of my browser window, convert the sequence to a GIF and upload it to imgur. That would make some bug reports much clearer, rather than describing each step.

scraplab 12y ago
Yes, this would be brilliant. I'd really like it as an always available app with a hotkey to activate recording, and Dropbox integration for upload + sharing. Even limited to a few seconds it'd be very useful for developing complex UI interactions with a remote team.
gk1 12y ago
> ...convert the sequence to a GIF and upload it to imgur. I would even pay for a tool like this.
xhrpost 12y ago
Trying to think how you could build this. Unless there's some fancy new feature in the browsers, I think you'd have to do something complicated like run WebKit.JS and capture from the canvas output.
petercooper 12y ago
It's not browser based but such a thing exists for Windows and OS X: http://www.cockos.com/licecap/ http://www.cockos.com/licecap/
MattBearman 12y ago
Shameless plug: My app BugMuncher (http://bugmuncher.com http://bugmuncher.com) allows you to submit screenshots with bug reports, without needing any browser plugins or experimental APIs. The ability to take a sequence of screenshots for each bug report is on the road map.
Jonovono 12y ago
I am working on a project to do that for the Mac: https://github.com/Jonovono/cutter https://github.com/Jonovono/cutter. I originally wanted to do it in JS for the web but didn't find away. May revisit that now!

hsx 12y ago

This is cool but video should scale to screensize. Yes, I do understand that this is more of a proof of concept.

SimeVidas 12y ago

Why is Firefox not supported? https://github.com/mgechev/jscapture/issues/5 https://github.com/mgechev/jscapture/issues/5

gcp 12y ago
FWIW Firefox for Android supports sharing Tabs via getUserMedia.

frozenport 12y ago

"With great power comes great responsibility"

yaronn01 12y ago

I recently did something similar with official javascript APIs: http://s3-us-west-2.amazonaws.com/anigif100/pacman/index.html http://s3-us-west-2.amazonaws.com/anigif100/pacman/index.htm...