ScreenSnap Pro is not just a tool; it's a world-class screenshot and screen recording ecosystem. Built with a high-end Glassmorphism UI, it provides professional-grade features from Burst Mode to Live Annotations and Cloud API Syncing.
Tip
Bacche ki tarah samjho: Yeh tool aapki screen ki har ek activity ko capture aur record karne ke liye banaya gaya hai, bilkul professional setup ke saath!
graph TD
A[User Input / Hotkeys] --> B{Action Controller}
B -->|F2| C[MediaDevices API - Screenshot]
B -->|F6| D[MediaRecorder API - Video]
B -->|F3| E[PiP Mode - Always on Top]
C --> F[Canvas Processing]
F --> G[Annotation Engine]
G --> H[Local Storage / Auto-Save]
H --> I[Cloud API Upload]
| Feature | Emoji | Description (Hinglish Style) |
|---|---|---|
| Full Screen | 🖥️ | Poora screen capture karein ek click mein. |
| Window Select | 🪟 | Specific application window select karo. |
| Browser Tab | 🌐 | Sirf Chrome ya browser tab capture karo. |
| Burst Mode | ⚡ | Rapid screenshots (3 to 20 shots) ek saath. |
| Timer Capture | ⏱️ | 3s, 5s, ya 10s ka delay set karo. |
- MP4/WebM Export: High-quality video recording.
- System Audio: Record system sounds alongside the screen.
- Live Indicator: Red blinker inside the preview to show status.
- Bitrate Control: Choose from 1 Mbps to 8 Mbps for the perfect size/quality balance.
Once captured, use the built-in editor:
- ✏️ Pen: Free-hand drawing.
- ➡️ Arrows: Point out specific UI elements.
- 🔲 Blur: Sensitive data (passwords/emails) ko hide karo.
- 🟡 Highlight: Important cheezon ko highlight karein.
- 📝 Text: Screenshots ke upar notes likho.
| Key | Action |
|---|---|
| F2 | Quick Screenshot |
| F3 | Toggle PiP Mode |
| F4 | Timer Capture |
| F5 | Burst Mode |
| F6 | Start/Stop Recording |
| Ctrl + S | Save All Items |
| Del | Clear Gallery |
| Esc | Close Preview/Modal |
async function startCapture(type) {
const opts = { video: { cursor: 'always' }, audio: false };
// Logic to filter display surface
if(type === 'monitor') opts.video.displaySurface = 'monitor';
// Requesting the stream from the browser
mediaStream = await navigator.mediaDevices.getDisplayMedia(opts);
// Binding the stream to the preview video element
const pv = document.getElementById('prevVid');
pv.srcObject = mediaStream;
}- Line 1-3:
getDisplayMediais the heart. It triggers the OS-level screen picker. - Line 4-5: We dynamically set
displaySurfaceto tell the browser what to prioritize. - Line 8: This is an
asynccall because the user needs time to grant permission.
Important
Cloud Sync: Integrate any REST API. Simply provide your Endpoint and API Key. ScreenSnap will POST your files automatically after capture.
Warning
Auto-Update: Simulated using electron-updater logic. It checks for new releases on the server and downloads them in the background.
- ✅ New: Screen Recording with MP4/WebM export.
- ✅ New: Advanced Blur tool for privacy.
- ✅ New: Cloud Upload API integration.
- ✅ Improved: PiP Mode now works outside the browser window.
- The Canvas (Annotation): Think of it as a transparent glass sheet over your photo. You draw on the glass (
Overlay Canvas), and then we "melt" the glass onto the photo (Merge & Save). - PiP Mode: It's like having a "Sticky Note" that stays on your face no matter where you look. It keeps your screen preview always visible while you work in other apps.
- Clone the Repository:
git clone https://github.com/your-repo/screensnap-pro.git
- Open Index.html: No complex setup required. Works directly in modern browsers (Chrome/Edge recommended for full API support).
- Permissions: Make sure to allow "Screen Recording" permissions in your OS/Browser settings.
- AI Enhancement: Can you integrate an API to automatically describe the screenshot?
- Multi-Monitor: Extend the capture logic to support multiple display streams simultaneously.
- Custom Watermarks: Add a setting to inject a custom logo into every screenshot.
ScreenSnap Pro — Forged for Professionals, Built for Speed. Developed with ❤️ by the Documentation Architect Team.