Skip to content

JakubKoralewski/cursor-recorder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

81 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

cursor-recorder 🎬 + 🎥 + 💻 + 🐭 = 🎇

Records mouse movement to a file and opens it in After Effects. Use with OBS Studio as an external Python script or if you prefer a more manual approach, using the standalone Python script. Then use the After Effects script to import the generated cursor movement data.

How to use

With OBS

  1. Download the files:

    1. cursor_recorder_for_obs.py
      1. from obsproject.com
      2. or this repository.
    2. Cursor Recorder for After Effects.jsx
      1. from this repository
  2. Import the cursor_recorder_for_obs.py in OBS. (You need to do this just once).

    1. Go to Tools -> Scripts.
    2. Make sure you have a Python (3.6.x) interpreter installed and its path set in OBS' settings (Scripts -> Python Settings).
    3. Click the ➕ icon (Add Scripts) and select the cursor_recorder_for_obs.py.
    4. Make sure the script is enabled. (It is by default).
    5. Click Install Python modules if you don't have pyautogui and/or keyboard packages installed.
  3. You're ready to start recording. The *.txt will be saved in the same place as your video with the same name.

  4. Stop the recording.

  5. Import the Cursor Recorder for After Effects.jsx in After Effects. (You need to do this just once).

    1. Go to the folder you installed After Effects.
    2. To be exact, go here (e.g.:Adobe After Effects CC 2019)\Support Files\Scripts\ScriptUI Panels.
    3. Place the Cursor Recorder for After Effects.jsx file in the ScriptUI Panels folder.
  6. Run the Cursor Recorder for After Effects.jsx script.

    1. Open After Effects.
    2. Go to Window -> scroll down to the Cursor Recorder for After Effects.jsx script and click it.
    3. Click the help buttons for more info.
  7. Checkout the Add Expressions section in the Cursor Recorder for After Effects script to quickly add predefined effects.

  8. Do whatever you want with it from here. Check out the Examples section below!

Standalone

  1. Use the cursor_recorder_standalone.py.
  2. Specify refresh_rate variable inside the code for your needs.
  3. File with the cursor movement should get saved to the same directory as your script.
  4. Import to After Effects.

Examples (with After Effects expressions):

SMOOTH FOLLOW (that's from the demo)

thisLayerScale = transform.scale;
cursorX = thisComp.layer("cursor-recorder-movement").transform.position[0];
cursorY = thisComp.layer("cursor-recorder-movement").transform.position[1];
xvalue = linear(thisLayerScale[0], 100, 200, cursorX + 960, 1920);
yvalue = linear(thisLayerScale[0], 100, 200, cursorY + 540, 1080);
[xvalue - cursorX, yvalue - cursorY];

CURSOR IN CENTER

// Expression set on video's anchor point
thisComp.layer("cursor-recorder-movement").transform.position;

Weird things you can do with this

The images are links to streamable.com

You can do this:

This can give you some ideas:

This may seem like an overkill but I'm supposed to advertise a product so here you go:

BTW this is from this browser extension of mine (I'm really selling out right now)

Development

I encourage you to fork, open issues and pull requests! ❤️

After Effects script

The script is developed using TypeScript. There are following commands available:

  "scripts": {
    "watch": "tsc -w",
    "build": "tsc && cd .. && sed -i '/\\$/d' 'Cursor Recorder for After Effects.jsx' && cat afterfx/license.txt > temp.jsx && cat 'Cursor Recorder for After Effects.jsx' >> temp.jsx && mv temp.jsx 'Cursor Recorder for After Effects.jsx'"
  },

Your current directory being scripts\afterfx:

Run npm run watch for auto-reload. The file will get saved to scripts\Cursor Recorder for After Effects.jsx. Copy it to the ExtendScript Toolkit and run it or copy the whole file to the ScriptUI Panels in your After Effects installation.

Run npm run build to have a production friendly version. The "build" script compiles the TypeScript file, removes comments and adds a copyright notice.

Python script

Currently OBS supports only 3.6.x Python interpreters!

Debugging

You can debug the Python script inside PyCharm following the instructions for "Python Remote Debug" as shown below:

You need these packages

The script requires: pyautogui and keyboard. Install them yourself or using this command:

$ pip install -r requirements.txt

Take a look at these resources:

License

Mozilla Public License Version 2.0