---

Title	My Screen
Author	Sadrita Neogi
Platform	Beest

LIVE URL

My Screen is a super simple, web-based tool that lets you record your screen and camera right in your browser with zero downloads or accounts needed. It’s all about speed and ease, handling everything on your own device so you can start recording in seconds. It’s a lightweight, open-source way for anyone to grab a recording and share it instantly without any extra fuss.

---

Inspo:

My Inspo was some of the best screen recorder like - Loom , OBS Studio , etc and I take inspo from this apps and list the points I want to add in my own Screen Recorder

Why I built it:

The first point is to use such application we need to install it in our computer and we don't really use this application daily , So I built my Screen Recorder in the Web ( No download Required) and the next thing is to record in good quality we need to buy subscription to use those features , So I made my which is open source and free to use and also no - sign up , log in and Ads are therre in the website .

---

Tech Used

Tech Stack
Layer Technology
Frontend Next.js 16, React 19, TypeScript
Styling Tailwind
Build Turborepo, pnpm
Backend Express.js (for MP4 conversion)

---

Features

Purpose	Working
Screen Recording	— Capture screen, window, or browser tab
Camera Overlay	— Picture-in-picture webcam with draggable positioning
Microphone Audio	— Record system audio and microphone
Multiple Layouts	— PiP and circle camera overlay modes
Export Formats	— WebM (native) and MP4 (server-converted)
Keyboard Shortcuts	— Ctrl+P (pause), Ctrl+M (mic), Ctrl+C (camera), Ctrl+S (screen)
No Time Limits	— Record as long as you need

---

Browser Support

Browser	Status
Chrome	✅ Supported
Edge	✅ Supported
Firefox	✅ Supported
Safari	✅ Supported
Mobile	❌ Not supported (getDisplayMedia limitation)

---

Project Structure

My-Screen/
├── apps/
│   ├── web/       
│   └── api/        
├── packages/
│   └── shared/       
└── turbo.json       

---

Ai Use -I have use ai to find out which tech stack I should use for this screen recording purpose and to save the file to the computer.

---

Available Scripts

Command	Description
pnpm dev	Start all apps in development mode
pnpm build	Build all apps for production
pnpm dev:web	Start only the web app

To run it locally

• 1. Fork the repo
• 2. Open the file in your code editor (VS Code )
• 3. Open The Terminal
• 4. Write - pnpm install
• 5. Next write - pnpm dev
• 6. open locallhost:3000

Project Screenshot

---

---

---

---

---

---

---

---

---

---

For contributing to this project, first for the repo and add additional changes to make the website more good can you make a pull request I Will surely check that and merge it.

Under Hack Club