Screen Capture Tool
Capture screenshots of your screen directly in the browser.
Screen Capture Tool grabs screenshots of your screen using the browser's Screen Capture API — no extension, no desktop app. Click "Start Screen Capture", grant the share prompt, and the tool holds a live MediaStream: the status line switches to a red dot with "Screen sharing is active". Each press of "Capture" pulls one frame through ImageCapture, draws it to a canvas, and stores a PNG data URL that accumulates in a gallery grid with dimension captions like 1920×1080.
Screenshots persist until you hit "Clear All"; hovering a thumbnail offers a per-image download as screenshot-{n}.png. Stop ends the session ("Capture session ended") and "New Capture" restarts sharing. Everything is local media APIs — getDisplayMedia plus canvas — so frames never upload anywhere.
How it works
captureScreen() in lib/screenCapture.ts calls navigator.mediaDevices.getDisplayMedia({ video: true, audio: false }). captureFrame(stream) requires the ImageCapture API (throws "ImageCapture API not supported in this browser" otherwise), runs grabFrame(), draws the frame to a canvas, and returns canvas.toDataURL('image/png') with width, height, and timestamp. stopStream stops every track on the stream.
State lives in screenCaptureSlice: the active MediaStream plus a screenshots array of { dataUrl, width, height, timestamp }. Cancelling the browser's share picker surfaces "Screen sharing was cancelled or not supported". No network — getDisplayMedia and canvas run entirely on-device.
How to use
- Step "Start" — click "Start Screen Capture" and grant the browser share prompt (toast "Screen sharing started!").
- When active: red dot + "Screen sharing is active" + "Click capture to take a screenshot".
- Click "Capture" to grab a frame (toast "Screenshot captured!"; requires ImageCapture).
- Repeat captures — they accumulate in the gallery grid with alt "Screenshot {n}" and "{w}×{h}" captions.
- Hover a thumbnail → download button saves screenshot-{index+1}.png.
- "Stop" ends the session (toast "Capture session ended"); "New Capture" restarts sharing.
- "Clear All" empties the gallery.
Tips
- If ImageCapture is missing (some Firefox/Safari versions) capture throws the unsupported error — the stream still starts, but frames can't be grabbed.
- Cancelling the share picker produces toast "Screen sharing was cancelled or not supported" — you can retry via "Start Screen Capture".
- Screenshots are PNG data URLs held in Redux — they survive navigation until "Clear All", so long sessions can grow memory.
- Downloads use screenshot-{n}.png named from the gallery index, not the capture timestamp.
Screen Capture Tool FAQ
Does capture upload anywhere?
No — getDisplayMedia plus canvas data URL, all local; the CardDescription says capture happens "directly in the browser".
Why "ImageCapture API not supported"?
captureFrame checks typeof ImageCapture !== 'undefined' and throws when the browser lacks the API.
What format are screenshots?
PNG via canvas.toDataURL('image/png'), with width, height, and timestamp stored alongside each frame.
How do I stop sharing?
The "Stop" button calls stopStream, which stops all tracks on the MediaStream (toast "Capture session ended").
Can it record my screen as video?
No — this tool grabs still frames only; video capture would need a different pipeline.
Credits
- Screen Capture / ImageCapture APIs — getDisplayMedia + ImageCapture.grabFrame used in lib/screenCapture.ts