10 ms·

Show HN: Gifcap, a browser based client-side GIF screen recording tool

197 points by joaomoreno 7y ago

joaomoreno 7y ago
Author here. Added some cool features like trimming and cropping, to make it easier for you to nail on the particular area of your screen and keep the recording to a minimum. Let me know what you think!
- jaflo 7y ago
  I like this! It's scoped and does exactly what it should. I didn't know about the cropping until I read this, maybe add some text explaining the feature?
- ryanackley 7y ago
  It's awesome man. Great work! Been looking for something like this. I love that I don't have to install some bloated screen recording tool.
- faitswulff 7y ago
  Hi, macOS / Firefox 74.0 user here. It will ask for permission and then fail with this message: MediaStreamError { name: "NotFoundError", message: "The object can not be found here.", constraint: "", stack: "" } main.js:116:15 oncreate https://gifcap.dev/main.js:116 https://imgur.com/a/2pIsGto https://imgur.com/a/2pIsGto
  - faitswulff 7y ago
    I just figured it out. I have to go to macOS system preferences -> Security & Privacy and permit Firefox to record the desktop. The OS-level permission popup didn't open in focus for me.
- xfalcox 7y ago
  It froze my entire desktop under Firefox on Linux. Has to login to another session to kill Firefox to get control back.
- deleted 7y ago
  [deleted]
axtg 7y ago
Pretty cool Joao, works fluent! Now for instruction videos where e.g. typing is involved, I'll prefer ScreenToGif still (e.g. because of frame speed and export options (webm, mp4), but if it's to record a video on screen or something quick, this works just as easy, if not easier.
- XCSme 7y ago
  I think webm and mp4 support can be easily added to this tool, I submitted a feature request: https://github.com/joaomoreno/gifcap/issues/8 https://github.com/joaomoreno/gifcap/issues/8
VadimPR 7y ago
This is great! Thanks a lot.
davidcollantes 7y ago
Safari is a modern browser, but this doesn't work on it. Perhaps changing the description to the specific browsers supported(Chrome, Firefox, etc.) would be best? ADDENDUM: Thought that maybe just detecting the browser is best, showing a notice that the tool doesn't work with it.
- mcny 7y ago
  Maybe Safari is no longer a modern browser.
  - samstave 7y ago
    I loathe safari. I use Brave and only switch to FF when something doesn’t work in brave.
- gen3 7y ago
  Does it work at all in MacOS? With all of the isolation that the Mac does, I could see this not working without giving it permission in settings.
  - tiborsaas 7y ago
    It does work on MacOS, Chrome
- ryanackley 7y ago
  That is very subjective. I'm on a Mac and when the term "modern web browser" is used, Safari doesn't even come to mind.
capableweb 7y ago
Neat idea but it doesn't work for me. Not sure if it's because of my browsers (Brave Browser) or my operating system (Arch Linux) or because of my window manager (AwesomeWM). No matter if I select record entire window or one window, I end up with a GIF that has the right duration but it's only black.
- ComputerGuru 7y ago
  Probably hardware vs software screen buffer issue.
  - capableweb 7y ago
    Other applications work (at least recordmydesktop, maim and screensharing in zoom). Also tried running compton which used to fix screensharing in zoom before Zoom solved it built-in. Any ideas how I can troubleshoot this "hardware vs software screen buffer issue" so we could track down the issue?
- philbarr 7y ago
  Looks like it depends on WebRTC javascript apis which Brave browser might not support? EDIT: More specifically, it needs to support getDisplayMedia() https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia https://developer.mozilla.org/en-US/docs/Web/API/MediaDevice...
duxup 7y ago
I seriously just was thinking I needed this to send some customer's some demos / examples of changes I'd made to web apps and etc... this is great.
Klathmon 7y ago
This is really cool! I love how simple and straightforward the UX is. It was instantly obvious how to use it, and it worked quickly and perfectly without any modals/banners/ads/whatever. I think a single sentence somewhere on the page after you stop the recording telling you that you can crop by clicking and dragging, and you can trim by moving the little time markers might help with discovery. I didn't realize you could do either of those things until I read your comment here.
- joaomoreno 7y ago
  Thanks, great feedback! Created https://github.com/joaomoreno/gifcap/issues/9 https://github.com/joaomoreno/gifcap/issues/9
justusthane 7y ago
This is awesome, thanks! I was looking for something like this just yesterday. That said, the GIFs it outputs seem pretty huge in filesize. Have you considered other output formats?
ionwake 7y ago
This is good please set frame rate choice also add webm if you can
- rkeene2 7y ago
  I agree a video codec would be much better -- curious as to why animated gif was chosen in the first place ?
  - Insanity 7y ago
    Because they are everywhere and lots of people still use them. Or that would be my guess anyway, I'm not the author.
XCSme 7y ago
That's neat! I also didn't know about the cropping feature until I read other comments, I thought it didn't support cropping.
- XCSme 7y ago
  I submitted a feature request to convert output to mp4 instead of gif: https://github.com/joaomoreno/gifcap/issues/8 https://github.com/joaomoreno/gifcap/issues/8
Qahlel 7y ago
I don't mean to rain on your parade but... ShareX... enough said.
- Jaruzel 7y ago
  Except you just did. Looking at ShareX it seems to be Windows only though?
renke1 7y ago
Very cool. Is there some kind of library so one can integrate this into one's own application easily? Also, slightly related, Google Mail (and probably other products) has a "Report issue" feature, where I can take a screenshot of the current tab (and even crop it), is that in any way related (technology-wise)?
animalnewbie 7y ago
I know it's not really "amazing" because lots of software allow you to record screen but it's great that you made it too damn simple. That said, a suggestion to consider webm because 5.6mb for 7secs isn't probably justifiable. side note: if you're on windows, win+g is a great new tool for the same.
- LockAndLol 7y ago
  It's a GIF. Hence the name Gifcap...
  - animalnewbie 7y ago
    Thanks, that solves the size problem for me!
    - LockAndLol 7y ago
      You're welcome, maybe you won't demand features from a tool that's obviously not made for your needs. Hell, maybe you'll consider forking the project, renaming it and implementing the feature you seek instead of being passive-aggressive.
oefrha 7y ago
I really loathe GIF for screen recordings: they are huge, they look terrible due to the 8-bit color pallet and low frame rate (in a desperate attempt to make them less huge), encoding is slow (in my experience at least, probably no hwenc available?) and they are expensive to render. There’s hardly any reason to use GIF when you can use a video instead — Imgur did exactly that with their GIFV which is just an H.264 video IIRC. Unfortunately there are still many places where only images are allowed (e,g, GitHub README). HEIF is supposed to solve this problem but support is apparently abysmal.[1] Anyone aware of any progress on a replacement of GIF? [1] https://caniuse.com/#feat=heif https://caniuse.com/#feat=heif
- jchw 7y ago
  In theory h264 or WebM should be a decent alternative already. You can also get larger color palettes in GIF by exploiting the ability of frames to have their own palettes and layer on top of eachother.
- greggman3 7y ago
  I find this particularly annoying. Back in the early 2000s I wrote some small app to generate static webpages for photo collections to be put on CD because OSes couldn't browse jpgs natively but browsers could. Now the problem has gone the other way, my iPhone and Android save HEIF but I can't use those on the web. I have to first go through a manual conversion process. It's like my computers have regressed 20 years.
  - jacobush 7y ago
    GIFs are the new VHS - bad quality, bulky, slow - but truly ubiquitous.
    - jacobush 7y ago
      ... and maybe a certain charm. My VHS collection implies there must be some charm to VHS - and a grainy meme clip with 100% guarantee of no sound has a certain charm too.
- 7y ago
zalo 7y ago
Nice UI; I really like the timeline view! I would highly recommend adding .webm export (since Browser-based .webm encoding strongly correlates with the ScreenCapture API). If you'd like an example, you can reference my take on this: https://gifcorder.com/ https://gifcorder.com/ There's also an Emscripten implementation of Gifsicle which you can use to reduce the size of the .gif (at the cost of color depth and encoding time).
greatgib 7y ago
Very nice tool, but it would be great to be able to control the framerate, or the speed, or the number of frame. Because in my case, when I test, the gif is way too fast. It would be nice that it goes at least at the same speed as the real user. Thanks
kickthellama 7y ago
licecap? https://www.cockos.com/licecap/ https://www.cockos.com/licecap/ Been around for about 10 years, from the guy who created Winamp.
- dominotw 7y ago
  thats not browser based
h43z 7y ago
Shameless plug. I did something similar. https://screenrecord.43z.one https://screenrecord.43z.one (no gif conversion though) but additionally it allows you to share you desktop recording via webrtc if you want. I tried to keep the UI as simple and friendly as possible.
- animalnewbie 7y ago
  Its not shameless, it's webm and hence smaller. Great. EDIT: Any way to record the mouse cursor?
deleted 7y ago
[deleted]

197 points by joaomoreno 7y ago

Author here. Added some cool features like trimming and cropping, to make it easier for you to nail on the particular area of your screen and keep the recording to a minimum. Let me know what you think!

jaflo 7y ago
I like this! It's scoped and does exactly what it should. I didn't know about the cropping until I read this, maybe add some text explaining the feature?
ryanackley 7y ago
It's awesome man. Great work! Been looking for something like this. I love that I don't have to install some bloated screen recording tool.
faitswulff 7y ago
Hi, macOS / Firefox 74.0 user here. It will ask for permission and then fail with this message: MediaStreamError { name: "NotFoundError", message: "The object can not be found here.", constraint: "", stack: "" } main.js:116:15 oncreate https://gifcap.dev/main.js:116 https://imgur.com/a/2pIsGto https://imgur.com/a/2pIsGto
- faitswulff 7y ago
  I just figured it out. I have to go to macOS system preferences -> Security & Privacy and permit Firefox to record the desktop. The OS-level permission popup didn't open in focus for me.
xfalcox 7y ago
It froze my entire desktop under Firefox on Linux. Has to login to another session to kill Firefox to get control back.
deleted 7y ago
[deleted]

axtg 7y ago

Pretty cool Joao, works fluent! Now for instruction videos where e.g. typing is involved, I'll prefer ScreenToGif still (e.g. because of frame speed and export options (webm, mp4), but if it's to record a video on screen or something quick, this works just as easy, if not easier.

XCSme 7y ago
I think webm and mp4 support can be easily added to this tool, I submitted a feature request: https://github.com/joaomoreno/gifcap/issues/8 https://github.com/joaomoreno/gifcap/issues/8

VadimPR 7y ago

This is great! Thanks a lot.

davidcollantes 7y ago

Safari is a modern browser, but this doesn't work on it. Perhaps changing the description to the specific browsers supported(Chrome, Firefox, etc.) would be best? ADDENDUM: Thought that maybe just detecting the browser is best, showing a notice that the tool doesn't work with it.

mcny 7y ago
Maybe Safari is no longer a modern browser.
- samstave 7y ago
  I loathe safari. I use Brave and only switch to FF when something doesn’t work in brave.
gen3 7y ago
Does it work at all in MacOS? With all of the isolation that the Mac does, I could see this not working without giving it permission in settings.
- tiborsaas 7y ago
  It does work on MacOS, Chrome
ryanackley 7y ago
That is very subjective. I'm on a Mac and when the term "modern web browser" is used, Safari doesn't even come to mind.

capableweb 7y ago

Neat idea but it doesn't work for me. Not sure if it's because of my browsers (Brave Browser) or my operating system (Arch Linux) or because of my window manager (AwesomeWM). No matter if I select record entire window or one window, I end up with a GIF that has the right duration but it's only black.

ComputerGuru 7y ago
Probably hardware vs software screen buffer issue.
- capableweb 7y ago
  Other applications work (at least recordmydesktop, maim and screensharing in zoom). Also tried running compton which used to fix screensharing in zoom before Zoom solved it built-in. Any ideas how I can troubleshoot this "hardware vs software screen buffer issue" so we could track down the issue?
philbarr 7y ago
Looks like it depends on WebRTC javascript apis which Brave browser might not support? EDIT: More specifically, it needs to support getDisplayMedia() https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia https://developer.mozilla.org/en-US/docs/Web/API/MediaDevice...

duxup 7y ago

I seriously just was thinking I needed this to send some customer's some demos / examples of changes I'd made to web apps and etc... this is great.

Klathmon 7y ago

This is really cool! I love how simple and straightforward the UX is. It was instantly obvious how to use it, and it worked quickly and perfectly without any modals/banners/ads/whatever. I think a single sentence somewhere on the page after you stop the recording telling you that you can crop by clicking and dragging, and you can trim by moving the little time markers might help with discovery. I didn't realize you could do either of those things until I read your comment here.

joaomoreno 7y ago
Thanks, great feedback! Created https://github.com/joaomoreno/gifcap/issues/9 https://github.com/joaomoreno/gifcap/issues/9

justusthane 7y ago

This is awesome, thanks! I was looking for something like this just yesterday. That said, the GIFs it outputs seem pretty huge in filesize. Have you considered other output formats?

ionwake 7y ago

This is good please set frame rate choice also add webm if you can

rkeene2 7y ago
I agree a video codec would be much better -- curious as to why animated gif was chosen in the first place ?
- Insanity 7y ago
  Because they are everywhere and lots of people still use them. Or that would be my guess anyway, I'm not the author.

XCSme 7y ago

That's neat! I also didn't know about the cropping feature until I read other comments, I thought it didn't support cropping.

XCSme 7y ago
I submitted a feature request to convert output to mp4 instead of gif: https://github.com/joaomoreno/gifcap/issues/8 https://github.com/joaomoreno/gifcap/issues/8

Qahlel 7y ago

I don't mean to rain on your parade but... ShareX... enough said.

Jaruzel 7y ago
Except you just did. Looking at ShareX it seems to be Windows only though?

renke1 7y ago

Very cool. Is there some kind of library so one can integrate this into one's own application easily? Also, slightly related, Google Mail (and probably other products) has a "Report issue" feature, where I can take a screenshot of the current tab (and even crop it), is that in any way related (technology-wise)?

animalnewbie 7y ago

I know it's not really "amazing" because lots of software allow you to record screen but it's great that you made it too damn simple. That said, a suggestion to consider webm because 5.6mb for 7secs isn't probably justifiable. side note: if you're on windows, win+g is a great new tool for the same.

LockAndLol 7y ago
It's a GIF. Hence the name Gifcap...
- animalnewbie 7y ago
  Thanks, that solves the size problem for me!
  - LockAndLol 7y ago
    You're welcome, maybe you won't demand features from a tool that's obviously not made for your needs. Hell, maybe you'll consider forking the project, renaming it and implementing the feature you seek instead of being passive-aggressive.

oefrha 7y ago

I really loathe GIF for screen recordings: they are huge, they look terrible due to the 8-bit color pallet and low frame rate (in a desperate attempt to make them less huge), encoding is slow (in my experience at least, probably no hwenc available?) and they are expensive to render. There’s hardly any reason to use GIF when you can use a video instead — Imgur did exactly that with their GIFV which is just an H.264 video IIRC. Unfortunately there are still many places where only images are allowed (e,g, GitHub README). HEIF is supposed to solve this problem but support is apparently abysmal.[1] Anyone aware of any progress on a replacement of GIF? [1] https://caniuse.com/#feat=heif https://caniuse.com/#feat=heif

jchw 7y ago
In theory h264 or WebM should be a decent alternative already. You can also get larger color palettes in GIF by exploiting the ability of frames to have their own palettes and layer on top of eachother.
greggman3 7y ago
I find this particularly annoying. Back in the early 2000s I wrote some small app to generate static webpages for photo collections to be put on CD because OSes couldn't browse jpgs natively but browsers could. Now the problem has gone the other way, my iPhone and Android save HEIF but I can't use those on the web. I have to first go through a manual conversion process. It's like my computers have regressed 20 years.
- jacobush 7y ago
  GIFs are the new VHS - bad quality, bulky, slow - but truly ubiquitous.
  - jacobush 7y ago
    ... and maybe a certain charm. My VHS collection implies there must be some charm to VHS - and a grainy meme clip with 100% guarantee of no sound has a certain charm too.
7y ago

zalo 7y ago

Nice UI; I really like the timeline view! I would highly recommend adding .webm export (since Browser-based .webm encoding strongly correlates with the ScreenCapture API). If you'd like an example, you can reference my take on this: https://gifcorder.com/ https://gifcorder.com/ There's also an Emscripten implementation of Gifsicle which you can use to reduce the size of the .gif (at the cost of color depth and encoding time).

greatgib 7y ago

Very nice tool, but it would be great to be able to control the framerate, or the speed, or the number of frame. Because in my case, when I test, the gif is way too fast. It would be nice that it goes at least at the same speed as the real user. Thanks

kickthellama 7y ago

licecap? https://www.cockos.com/licecap/ https://www.cockos.com/licecap/ Been around for about 10 years, from the guy who created Winamp.

dominotw 7y ago
thats not browser based

h43z 7y ago

Shameless plug. I did something similar. https://screenrecord.43z.one https://screenrecord.43z.one (no gif conversion though) but additionally it allows you to share you desktop recording via webrtc if you want. I tried to keep the UI as simple and friendly as possible.

animalnewbie 7y ago
Its not shameless, it's webm and hence smaller. Great. EDIT: Any way to record the mouse cursor?

deleted 7y ago

[deleted]