Smart Code Search MCP Server

# Media Capture Quick Start Guide Get started with screenshot and recording features in 5 minutes! ## Quick Setup ### 1. Start the Media Server ```bash cd voice-assistant npm start ``` ### 2. Open the Media UI Navigate to: http://localhost:3000/media-ui.html ### 3. Test Basic Capture Click the camera icon or press `Ctrl+Shift+S` to take your first screenshot! ## Essential Features ### Taking Screenshots #### Method 1: UI Button ![Camera Icon] Click the camera button in the top toolbar #### Method 2: Keyboard Shortcut - Windows/Linux: `Ctrl + Shift + S` - macOS: `Cmd + Shift + S` #### Method 3: Voice Command Say: "Take a screenshot" or just "Screenshot" ### Screen Recording #### Start Recording - Click the red record button - Or say: "Start recording" #### Stop Recording - Click the stop button (square icon) - Or say: "Stop recording" ### Viewing Your Media #### Gallery View - Grid layout shows thumbnails - Click any thumbnail to view full size - Recent captures appear at the top #### Quick Actions - 👁️ **View**: Click thumbnail to open - ✏️ **Annotate**: Click pencil icon - 📥 **Download**: Click download icon - 🗑️ **Delete**: Click trash icon ## Common Workflows ### Workflow 1: Bug Documentation 1. **Encounter a bug** in your application 2. **Say**: "Screenshot this bug" 3. **Annotate** with arrow pointing to issue 4. **Add text**: Describe the problem 5. **Tag**: Add "bug" tag for organization 6. **Export**: Download for bug report ### Workflow 2: Code Review Recording 1. **Say**: "Start recording code review" 2. **Review code** while explaining 3. **Take screenshots** of important sections 4. **Say**: "Stop recording" 5. **Result**: Video with embedded screenshots ### Workflow 3: Tutorial Creation 1. **Start recording**: Capture entire session 2. **Take screenshots**: Key moments 3. **Annotate**: Add explanations 4. **Export**: Create tutorial package ## Annotation Tools ### Drawing Tools | Tool | Purpose | Shortcut | |------|---------|----------| | ✏️ Pen | Freehand drawing | P | | 🖍️ Highlighter | Transparent marking | H | | ➡️ Arrow | Point to elements | A | | ⬜ Rectangle | Box areas | R | | 🔤 Text | Add labels | T | ### Quick Annotations 1. **Click screenshot** to open 2. **Select tool** from toolbar 3. **Draw/type** annotations 4. **Save** automatically applied ## Voice Commands Cheat Sheet ### Basic Commands - "Screenshot" - Quick capture - "Start/Stop recording" - Video control - "Show screenshots" - Open gallery - "Delete last" - Remove recent ### Advanced Commands - "Screenshot and annotate" - Capture + edit - "Record for 5 minutes" - Timed recording - "Export today's media" - Bundle download - "Tag as [word]" - Add metadata ## Tips for Best Results ### Screenshot Tips ✅ **Clean desktop** before capturing ✅ **Use regions** for focused captures ✅ **Add context** with annotations ✅ **Tag immediately** for organization ### Recording Tips ✅ **Close unnecessary apps** to reduce file size ✅ **Use good lighting** for webcam recordings ✅ **Speak clearly** if including audio ✅ **Pause when needed** instead of multiple recordings ### Organization Tips ✅ **Use consistent tags** (#bug, #feature, #docs) ✅ **Add descriptions** to important captures ✅ **Export regularly** for backup ✅ **Delete unused** to save space ## Keyboard Shortcuts ### Global Shortcuts | Action | Windows/Linux | macOS | |--------|--------------|-------| | Screenshot | Ctrl+Shift+S | Cmd+Shift+S | | Start Recording | Ctrl+Shift+R | Cmd+Shift+R | | Show Gallery | Ctrl+Shift+G | Cmd+Shift+G | | Quick Annotate | Ctrl+Shift+A | Cmd+Shift+A | ### Gallery Shortcuts | Action | Key | |--------|-----| | Next image | → or J | | Previous image | ← or K | | Fullscreen | F | | Delete | Del | | Download | D | | Annotate | A | ## Storage Management ### Default Locations ``` voice-assistant/ ├── media/ │ ├── screenshots/ # PNG images │ ├── recordings/ # WebM videos │ └── exports/ # ZIP bundles └── media-history.db # Metadata database ``` ### Storage Limits - Default: 5GB maximum - Auto-cleanup: Files older than 30 days - Important files: Mark to keep permanently ### Export Options - **Individual**: Download single items - **Bulk**: Export multiple selections - **Session**: Export entire work session - **Format**: PNG, WebM, or ZIP bundle ## Troubleshooting ### Screenshot Not Working? 1. **Check browser permissions** - Allow screen capture permission - Must be HTTPS or localhost 2. **Try different browser** - Chrome/Edge work best - Firefox requires additional setup ### Recording Issues? 1. **Verify FFmpeg installed** ```bash ffmpeg -version ``` 2. **Check disk space** - Need ~100MB per minute - Clear old recordings ### Can't See Media? 1. **Refresh the page** - F5 or Ctrl+R 2. **Check server status** - Green dot = connected - Red dot = disconnected 3. **Restart server** ```bash npm restart ``` ## Next Steps Now that you're capturing media: 1. 📖 Read [Full Media Documentation](../MEDIA_SERVER.md) 2. 🎤 Learn [Voice Commands](COMMANDS.md) 3. 🔧 Configure [VS Code Integration](VSCODE.md) 4. 🎨 Master [Advanced Annotations](../MEDIA_SERVER.md#annotation-system) ## Quick Reference Card ``` 📸 Screenshot........... Ctrl+Shift+S 🎥 Start Recording..... Ctrl+Shift+R ⏹️ Stop Recording...... Ctrl+Shift+R 🖼️ View Gallery........ Ctrl+Shift+G ✏️ Annotate............ A (in gallery) 💾 Save................ Ctrl+S 🗑️ Delete.............. Del 📥 Download............ D 🏷️ Tag................. T 🔍 Search.............. / ``` --- *Pro Tip: Pin this guide for quick reference during work sessions!*