🎬 Teaching Studio

A Windows-first desktop recording studio for educators, trainers and creators — screen capture, always-on-top webcam, background replacement, audio controls and MP4 export in one workflow.

⬇️ Download · ▶️ Watch demo · 🐛 Report a bug · 💡 Request a feature

⚡ See the system move

Animated Teaching Studio recording pipeline

Repository-hosted visual pipeline: the animation assets live inside the repository so the README does not depend on a placeholder demo URL.

🧭 Navigation

Explore

✨ Highlights
🎞️ Animated pipeline
🎥 Real-world demo
🧠 Architecture
🔁 Recording Lifecycle
🧩 Features
🛠️ Stack
🚀 Development
📦 Build & Release
🎬 Usage
⌨️ Hotkeys
📁 Project Structure
🧪 Verification
🗺️ Roadmap
⚠️ Limitations
🤝 Contributing
⭐ Star History

✨ Highlights

Capability	Implementation
🖥️ Desktop capture	`getDisplayMedia()`
🎥 Floating camera	Transparent always-on-top Electron window
🎨 Background replacement	MediaPipe Tasks Vision segmentation
🎙️ Audio	Microphone + system audio controls
⚡ Encoding	FFmpeg with hardware → software fallback
💾 Recovery	Incremental recording chunks
⌨️ Hotkeys	F7 / F8 / F9 / F10
🪟 Platform	Windows x64 Electron desktop app

Less setup. More teaching.

🧠 Architecture

Teaching Studio separates the dashboard, native overlay and recording finalization responsibilities instead of forcing everything into one renderer.

flowchart LR
    U[Teacher] --> D[Dashboard]
    D --> P[Preload / IPC]
    P --> M[Electron Main Process]
    M --> O[Transparent Webcam Overlay]
    W[Windows Desktop] --> C[getDisplayMedia]
    O --> W
    C --> R[MediaRecorder]
    R --> CH[WebM Chunks]
    CH --> F[FFmpeg Finalizer]
    F --> E[MP4 H.264/AAC]

🔬 Why the overlay approach matters

The webcam bubble is a real transparent, always-on-top desktop window. Windows composes that overlay into the desktop, allowing the screen-capture path to capture a composed desktop view that already includes the camera bubble.

🔁 Recording Lifecycle

A closer look at what actually happens between pressing F9 and getting an MP4 — including the crash-recovery path.

stateDiagram-v2
    [*] --> Idle
    Idle --> FirstRun: First launch
    FirstRun --> Idle: Setup complete
    Idle --> Recording: Press F9
    Recording --> Recording: Toggle mic (F7) / camera (F8)
    Recording --> Finalizing: Press F10
    Finalizing --> Saved: FFmpeg mux → MP4
    Saved --> Idle: Ready for next take
    Recording --> Interrupted: Unexpected exit
    Interrupted --> Recoverable: Incremental WebM chunks found
    Recoverable --> Finalizing: Resume finalize

🔄 Recording Pipeline

Select display → getDisplayMedia() → MediaRecorder → WebM chunks → FFmpeg → final MP4

💾 Crash-aware media flow

Incremental chunks keep temporary media recoverable when a recording is interrupted before finalization.

🧩 Features

🖥️ Full desktop recording

Capture YouTube, browsers, PDFs, PowerPoint, VS Code and other Windows applications.

🎥 Floating webcam bubble

A transparent, always-on-top camera window stays visible while you teach.

🎨 Background replacement

Use segmentation-based removal with presets and custom backgrounds.

🎙️ Microphone + system audio

Configure lecture audio directly from the dashboard.

⚡ Hardware-aware encoding

The FFmpeg finalization pipeline tries available hardware encoders before software fallback.

💾 Crash-safe chunks

Recording data is written incrementally so interrupted sessions can leave recoverable temporary media.

⌨️ Global hotkeys

Control core recording actions without returning to the dashboard.

🛠️ Technology Stack

Layer	Technology
🖥️ Desktop runtime	Electron 30
🎨 UI	React 18
🧠 Language	TypeScript 5
⚙️ Build	electron-vite + Vite
💅 Styling	Tailwind CSS
🧍 Segmentation	MediaPipe Tasks Vision
🎥 Capture	`getDisplayMedia()` + `MediaRecorder`
🎞️ Processing	FFmpeg via `ffmpeg-static`
💾 Persistence	`electron-store`
📦 Packaging	electron-builder
🪟 Target	Windows x64 / NSIS

📦 Download

Current release

v1.0.0 — Windows portable release

Teaching-Studio-1.0.0-win-x64-portable.zip

Portable install

1. Download the portable ZIP
2. Extract it
3. Launch Teaching Studio.exe
4. Complete first-run setup
5. Press F9 and start teaching

No separate Python, Node.js or Electron runtime is required for the packaged portable build.

🚀 Development Setup

Animated Teaching Studio development workflow

Requirements

Windows 10 or Windows 11 for real device testing
Node.js 18+
npm
Git

Clone

git clone https://github.com/RICK2814/teaching-studio.git
cd teaching-studio

Install

npm install

Run

npm run dev

🧰 Project Commands

Command	Purpose
`npm run dev`	Development mode with hot reload
`npm run typecheck`	TypeScript validation
`npm run build`	Build main, preload and renderer bundles
`npm run dist`	Build a Windows x64 distributable
`npm run dist:dir`	Build an unpacked Windows app for smoke testing

📦 Build & Release

Animated Teaching Studio build and release workflow

Standard build

npm run dist

Unpacked build

npm run dist:dir

Output:

release/win-unpacked/

The Windows packaging configuration targets x64 and uses NSIS. Current binaries are unsigned by default.

🎬 Usage

Real teaching flow

1. FIRST RUN → Camera · Microphone · Quality · Background
2. OVERLAY  → Shape · Size · Position · Border · Shadow
3. RECORD   → Dashboard → F9
4. TEACH    → Bubble stays on top of the desktop content
5. CONTROL  → F7 mic · F8 camera
6. FINISH   → F10 → MP4

What the real demo shows

Teaching Studio is designed for exactly this kind of session: a PDF, browser, presentation or code editor can remain the main teaching surface while the floating webcam bubble stays visible above it.

▶️ Watch the real-world demo on YouTube

Default output location:

Videos/Teaching Studio/

⌨️ Hotkeys

Key	Action
`F9`	Start recording
`F10`	Stop and save
`F8`	Toggle camera
`F7`	Toggle microphone

A full in-app hotkey editor is planned.

📁 Project Structure

src/
├── main/
│   ├── main.ts
│   ├── overlayWindow.ts
│   ├── recorder.ts
│   ├── store.ts
│   ├── hotkeys.ts
│   ├── env.ts
│   ├── preload-dashboard.ts
│   └── preload-overlay.ts
│
├── renderer/
│   ├── dashboard/
│   │   ├── App.tsx
│   │   ├── ui.tsx
│   │   ├── RecordingHistory.tsx
│   │   ├── FirstRunWizard.tsx
│   │   └── recordingEngine.ts
│   │
│   ├── overlay/
│   │   ├── App.tsx
│   │   └── compositor.ts
│   │
│   └── globals.css
│
└── shared/
    └── types.ts

🧪 Verification

Before shipping a Windows build, validate it on an actual Windows 10/11 machine.

Recording

Camera ON/OFF during recording
Microphone ON/OFF during recording
Repeated start/stop cycles
5+ minute continuous session
Audio/video synchronization

Overlay

Always visible above teaching content
Smooth dragging
Lock Position works
Resize behavior works
No unwanted rectangular background

Background replacement

Every preset
Custom image
Hair / shoulder / clothing edges

Export

MP4 opens in a standard player
Audio is present
Audio/video stays synchronized
Webcam bubble appears in captured frames
No unexpected green fringing

📴 Offline MediaPipe Model

The segmentation runtime/model can be loaded from Google's CDN on first use and may subsequently benefit from cache.

For fully offline first-run environments, bundle the MediaPipe WASM runtime and selfie_segmenter.tflite under resources/mediapipe/, then update the corresponding local paths in src/renderer/overlay/compositor.ts.

🛡️ Windows Defender / SmartScreen

Current Windows packaging is unsigned. Unsigned Windows applications may trigger SmartScreen warnings on first launch.

For wider distribution, sign the Windows package with an Authenticode certificate and configure the corresponding electron-builder signing settings.

⚠️ Limitations

Multi-monitor presets currently target the primary display work area, although dragging onto another display is supported.
Hotkeys have stored settings, but there is not yet a complete in-app key-rebinding editor.
Crash recovery data can be detected, but a one-click recovery UI remains on the roadmap.
Hardware-specific capture, transparency and encoder behavior should be validated on target Windows machines.

🗺️ Roadmap

Status	Item
🔜	In-app hotkey editor
🔜	One-click recording recovery UI
🔜	Improved multi-monitor presets
🔜	Automated Windows release builds
🔜	Code signing for production distribution
🔜	More webcam shapes and layout presets
🔜	More recording quality/export profiles
🔜	Richer animated product demo assets

🐛 Troubleshooting

See TROUBLESHOOTING.md for common problems and fixes.

🤝 Contributing

Contributions, bug reports and feature ideas are welcome.

1. Fork the repository
2. Create a feature branch    → git checkout -b feature/my-improvement
3. Make your changes          → npm run typecheck && npm run build
4. Commit with a clear message
5. Open a Pull Request against main

⭐ Star History

If Teaching Studio saves you setup time, consider dropping a ⭐ — it helps other educators find it.

📄 License

Licensed under the MIT License.

Teaching Studio

Capture. Teach. Export. Repeat.

_{Built for teachers who'd rather be teaching than debugging OBS scenes.}

⬆ Back to top

Name		Name	Last commit message	Last commit date
docs		docs
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
TROUBLESHOOTING.md		TROUBLESHOOTING.md
electron-builder.yml		electron-builder.yml
electron.vite.config.ts		electron.vite.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation