Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Gifcap, a browser based client-side GIF screen recording tool (gifcap.dev)
197 points by joaomoreno on March 30, 2020 | hide | past | favorite | 49 comments



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!


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


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.


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?


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.


It froze my entire desktop under Firefox on Linux.

Has to login to another session to kill Firefox to get control back.


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.


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


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


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.


GIFs are the new VHS - bad quality, bulky, slow - but truly ubiquitous.


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


In context, gifs have a killer feature over videos in most environments: they auto-play and loop. From twitter to Slack to slides, gifs “just work” in a way that videos are constantly face-planting.


I use .webm files all the time as stand-ins for GIF, and more and more sites/apps have support for inline playback nowadays.

You can strip the audio out completely from those files, and have like 20 second recordings that map out to ~1-2MB vs +10MB for GIF. All in all, it's pretty great.


Additionally you can encode webm within the browser, although it feels a bit dirty to do so: https://github.com/antimatter15/whammy


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.


GitHub issues supports animated webp FYI so I guess README does too.


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


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.


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


Probably hardware vs software screen buffer issue.


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?


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


I agree a video codec would be much better -- curious as to why animated gif was chosen in the first place ?


Because they are everywhere and lots of people still use them. Or that would be my guess anyway, I'm not the author.


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/

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


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?


Shameless plug. I did something similar. 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.


Its not shameless, it's webm and hence smaller. Great.

EDIT: Any way to record the mouse cursor?


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


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.


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


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.


Maybe Safari is no longer a modern browser.


I loathe safari. I use Brave and only switch to FF when something doesn’t work in brave.


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.


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.


It does work on MacOS, Chrome


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.


That's neat!

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


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


This is great! Thanks a lot.


licecap?

https://www.cockos.com/licecap/

Been around for about 10 years, from the guy who created Winamp.


thats not browser based


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.


It's a GIF. Hence the name Gifcap...


Thanks, that solves the size problem for me!


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.


[flagged]


Except you just did.

Looking at ShareX it seems to be Windows only though?




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: