Project Goal

Develop a proof-of-concept MacOS native screen recording tool using Electron.JS, designed to integrate with Montra - a browser-based video creation platform similar to Google Slides. The tool will enable content capture for further editing and post-processing within Montra projects.

Figma Wireframes

https://www.figma.com/design/4fzE5fvl023etccudy3HxU/Haseeb----Montra-Native-Screen-Recorder?t=GQWQdjqbHPRRPchk-1

Video Walkthrough

https://www.loom.com/share/498ccf7ceb734208ae21cd4f47a6d6b0?sid=d0d391a5-b74c-4c58-9506-786c8a0cbc3a

Captured Data

• Video stream capture at 30 FPS - 1080p Quality
• Screen stream capture 60 FPS - 4k Quality
• Mouse movement data capture at 60fps, including:

  • Cursor coordinates as the user records

  • Cursor state/style (hover, text selection, drag, etc.)

  • Cursor clicks

    macOS Cursors

Technical Implementation

The screen capture functionality will be implemented using RecordKit, an Electron.js library that enables native-level screen recording quality through AVFoundation. RecordKit manages core recording features including:

• High-quality native screen recording
• Mouse cursor visibility control
• Specific window recording capabilities
• Quality and framerate

UI/UX Requirements

• Configuration window (Loom-inspired) featuring:
  • Camera settings
  • Microphone settings
  • Start/stop controls
• Recording controls and video bubble should be hidden during capture and should not appear in final recording
• Ensure the mouse cursor is hidden during recording, as it will be replaced with high-quality synthetic cursor during post-processing