wulkano / Kap

An open-source screen recorder built with web technology
https://getkap.co
MIT License
17.79k stars 819 forks source link

Change the look of the click highlight #458

Open kisin opened 6 years ago

kisin commented 6 years ago

great app. I'm using it daily.

is there an option to change the look of the click highlight? the black circle is not very ui friendly

sindresorhus commented 6 years ago

The click highlight is not in our control. We just call a system API. We could track the cursor clicks during recording and add it ourselves to the finished recording, but that’s a lot of work.

skllcrn commented 6 years ago

For what it's worth I love the cursor and click/tap highlight style in Principle and particularly Framer:

5 Steps to GIF inline cursors

Image from How to Create High‑Quality GIFs.

karaggeorge commented 4 years ago

@sindresorhus I went with the solution you mentioned above. So I start a script before aperture, it runs a timer with a 1/fps interval and tracks the cursor position along with whether it's clicked or not. Then, after recording is done, it uses those values to generate an image for each one, transparent background and adds that cursor image to the right position based on the values. After creating all the frames, I used ffmpeg to generate a video with transparent background matching the fps. Then, I overlay the two videos and synchronize them (was challenging at first, but I've been able to get it to work consistently).

It works well, but it does take a bit of processing time, like you mentioned. We can note that and warn people so they can pick whether or not it's worth it. It's especially slower when working on retina screens since it has to generate 2x size images to match the recording.

However, after seeing the cursor pro app you linked, I got a new idea. I mean, cursor pro works easily because it doesn't replace the cursor, just adds to it. We could do that as well. I could have the script basically render that other cursor and follow the cursor's position through the recording. If we disable the track cursor option when recording, it should result to having the custom cursor in the final recording, with no extra processing. The only downside to that one, is that when you are recording, you would be seeing both cursors on top of each other (system one would be hidden in the recording)

What do you think for moving forward? They both have pros and cons, but neither seems like a clear choice to me

Other solution I considered, was changing the system cursor itself, same as Mousecape does, but the change takes a noticeable .5 seconds to change the cursor and displays a spinner when it does, so we would be able to do it at the start/end but we wouldn't be able to change the image to show when there is a click.

sindresorhus commented 4 years ago

I prefer the Cursor Pro approach. It's easier to implement and faster for the user as it requires no transcoding.

sindresorhus commented 4 years ago

For what it's worth I love the cursor and click/tap highlight style in Principle and particularly Framer:

That one is great for touch screen devices, but for desktop, it's too large to be able to accurately see what was clicked.

karaggeorge commented 4 years ago

I like the click effect of it, also the size is adjustable, but I agree it mimics more of a "tap" style. What would you recommend for desktop? Do we have an example?

Especially if we're going with the Cursor Pro approach, it'll have to be something that won't be obstructive when recording, when both cursors show up at the same time

cc @skllcrn

sindresorhus commented 4 years ago

when both cursors show up at the same time

What do you mean by this? If we do the "Cursor Pro" approach, it would only be one cursor with a ring around it.

karaggeorge commented 4 years ago

I like the cursor pro idea, but I think that's separate from this issue. That's more of a highlight, versus this issue is for changing the default cursor in the recording along with the click effect

sindresorhus commented 4 years ago

I guess I just don't see the point of replacing the cursor when we can just something to it, like Cursor Pro does.