Screen Recorder with System Sound

Core Functionalities Breakdown:

• System Audio Capture: By passing audio: true inside getDisplayMedia, the browser prompts the user to "Share system audio."

• AI Shorts Layout: I implemented a toggle that switches the CSS aspect ratio to 9:16. This crops the preview and sets the logical resolution to a vertical format, perfect for TikTok or YouTube Shorts tutorials.

• MediaRecorder API: This is the engine that encodes the stream into a video file (WebM/MP4) directly in the browser without needing a server.

• Responsive UI: Uses CSS Flexbox and Grid to ensure the controls look great on tablets and desktops.

AI Studio Recorder

Record high-quality tutorials or AI-ready vertical shorts

● REC

00:00