Show HN: Simple screen recorder (100% client-side, in-browser)

Record your screen directly in the browser. No installs. No sign-ins. No tracking.

This lightweight tool was built to make screen recording effortless and private — ideal for situations where installing software isn’t practical or desirable.

Multi-Target Recording: Users can capture multiple areas of their screen simultaneously and arrange them on a canvas to highlight specific issues.

Customizable Backgrounds: The canvas background can be changed to a solid color or an image, allowing users to obscure sensitive information or personalize their recordings.

Picture-in-Picture Support: Users can include a "talking head" video overlay, enabling them to narrate and explain the issue as it occurs.

Flexible Output Formats: Recordings can be made in various aspect ratios, including landscape (16:9), square (1:1), and portrait (9:16), catering to different presentation needs.

Local Download: Upon completion, the recorded video is downloaded directly to the user's device for easy sharing or further editing.

Try it now: kaliedarik.github.io/sc-screen-recorder.

When something breaks, you can capture exactly what happened — your screen, tabs, and even a webcam overlay — and share the video with your team. It's faster and clearer than writing long explanations.

• User testing: Record UX sessions with screen + narration
• Micro-tutorials: Explain UI workflows or features
• Support: Show what went wrong instead of just describing it
• Code review walkthroughs: Walk through changes visually
• Student demos: Record projects or presentations
• Async collaboration: Share quick visual updates without meetings

• Everything runs in your browser
• No data is uploaded — videos are saved locally
• No accounts, cookies, or analytics

• Built with vanilla JavaScript, HTML, and CSS
• Entirely client-side
• Open-source and self-hostable

The following instructions assume the user is using a desktop (or laptop) setup.

	Initial page load. Control buttons across the top will open dialog modals. The controls across the bottom of the screen are currently disabled. The recording area is in white, fitted into the responsive canvas.
	To set the recording area's dimensions, click on the Dimensions button. When changing dimensions, targets and background images will automatically update to accommodate the change (though the talking head, which has fixed dimensions, will not). Landscape, square and portrait dimensions are supported.
	Targets are areas of the user's display screen(s) to be real-time captured in the recording area. To aquire and manage targets, click on the Targets button.
	Click on the Request screen capture button to launch the browser's native screen-capture sharing modal. Select the desired target and press the Share (or equivalent) button.
	Once a target has been selected an entry for it will appear in the Targets modal. Each screen capture can be halted by the user at any time, either by clicking on the target's Remove button, or by clicking on any other button the user's browser or operating system may supply.
	The user can drag-and-drop each target into the desired position on the recording area. Clicking on a target will enable the bottom controls for the target. Horizontal and vertical position ranges have been included for accessibility.
	The target display in the recording area can be scaled and rotated as required. The display order of overlapping targets can also be controlled here.
	The recording area's background defaults to white. Click on the Background button to open the modal, and then the Change background color button to set the background color.
	The recording area can also display a background image. To add an image, drag it into the web page - for success, make sure no modal is displaying at the time of the drag-drop action! Multiple images can be added using this method. Alternatively, click on the Browse for image files button to open a file selection modal.
	Only one background image can be displayed at any time. To remove the current background image click on the Hide background image button. If multiple images have been uploaded, then the background image can be easily updated by clicking on the desired image.
	By default the "talking head" functionality is disabled. To add a talking head, click on the Head button, select the desired camera in the drop-down selection box, then click on the Use talking head checkbox.
	Once the talking head appears, it can be positioned, scaled and rotated using the controls in the modal (note that it cannot be repositioned using drag-and-drop). The head can be hidden by unchecking the Show talking head checkbox. The video stream capturing the talking head can be halted at any time by unchecking the Use talking head checkbox, or stopping it using any other facility the user's browser or operating system may supply.
	To record, click on the Record button, then select a microphone to use for audio capture. Note that resulting video's format (currently "webm" or "mp4") needs to be set before recording starts. Then click on the Start recording button.
	While recording, the Record button changes to a red Stop recording button. Click it to, well, stop recording. The recorded video will automatically download to the device where the web page is running.

The web page supports the following (hopefully cross-browser standard) keyboard controls and shortcuts.

• TAB to navigate forwards
• SHIFT+TAB to navigate backwards
• ENTER to select

• For "select" inputs - UP-ARROW, DOWN-ARROW
• For "range" inputs - RIGHT-ARROW, LEFT-ARROW
• For "color" inputs - UP-ARROW, RIGHT-ARROW, DOWN-ARROW, LEFT-ARROW
• For checkboxes - SPACE

• Built in vanilla HTML, CSS and Javascript. No frameworks. No toolchains.
• The web page can be self hosted by forking this repo and deploying to the user's own servers or, alternatively, run locally on the user's device.
• The code is offered free under the MIT licence. Users are free to develop, improve and even monetize the code in any way they see fit.

1. Fork or clone this repo.
2. Navigate to the downloaded folder.
3. Don't bother installing anything - there's no build chain because: it's just a web page.
4. Start a local server to serve the page locally - for example, live-server seems to do a decent job.
5. Hack away!

The page's HTML code can be found in the in the index.html file, while the CSS code lurks in the index.css file.

The page functionality lives in the index.js file. There's no tool chain or build steps associated with this repo - the file "is what it is", nothing more.

The code relies on the Scrawl-canvas library, the minified version of which can be found in the js/scrawl-canvas.js file. Because there's no tool chain, updating SC means grabbing the latest minified version of the file and slapping it into the js/ folder.

The code also includes Google's selfie-segmentation MediaPipe solution, for removing the background behind the talking head.

• The MVP makes use of the Media Capture and Streams API's getDisplayMedia() function, which is not widely supported. It should work on latest desktop Chrome/Edge/Firefox/Safari, but will currently fail on Android Chrome, iOS Safari, etc. See the Can I Use website for latest details.

• The MVP video recording functionality is primitive - the video output is restricted to video/webm and video/mp4. Adding codec metadata to the mix is manual (and risky!)

• On initial visit to the web page the "Head" modal camera dropdown, and the "Record" modal microphone dropdown appear empty. This is because we don't request access to these things until further action is taken ("use head" and "start recording"). Everything seems to work, but it's not a nice UX.

• Clicking outside a modal to close it is an experimental technology, currently not supported by Firefox or Safari - see Caniuse Dialog closedby for latest support details.

• Everything works (except for the above comments) ... but that is expected as the web page was only tested on Chrome during initial development.

• The MediaPipe Selfie-Segmentation model does not work on Safari desktop browsers - you'll get a talking head, but the background won't be removed.

• Drag-and-drop background image upload is buggy - files get loaded into the page, but don't display correctly. Same with file upload. User has to open the Background modal and click on the image to display it.
• Firefox does not natively support encoding recordings into MP4 - see issue 1631143 on Bugzilla for details.