Recording

This page covers recording with Screen Tools: starting a recording, what you can capture, audio, the camera overlay, the countdown and toolbar controls, output formats, autosave, playback, and saving. It works the same in Chrome and Firefox except where noted; Firefox lists every difference. For how recording works inside the extension, see Recording Pipeline.

Starting a recording

Click the Screen Tools toolbar icon and pick Screen, Camera or Screen + camera under Record. The background service worker opens the recorder in its own 960×780 window, centred over the browser window you're in, and the recording starts with that capture mode. Only one recorder window is open at a time: if it's already open, Screen Tools focuses it.

Open recorder in the toolbar menu opens the same window without starting. From there, pick the capture mode, audio, format and resolution, then click Start recording. Your choices are saved as you make them and become the defaults for the toolbar menu's quick-start buttons.

In Firefox, Screen and Screen + camera open the recorder with that mode picked and wait for you to click Start recording. Firefox only opens its screen picker from a click in the page. Camera starts straight away in both browsers.

If the recorder holds a recording you haven't saved, a quick-start button doesn't start a new one. It shows "Save or discard this recording first".

Capture modes

Mode	What it records	Resolution
Screen	A whole screen, a window or, in Chrome, a tab, picked in the browser's screen picker	Screen resolution setting
Camera	The camera alone, filling the frame	Camera resolution setting
Screen + camera	The screen, with the camera in a corner	Screen resolution setting

In Screen + camera mode, a missing or blocked camera shows a "Camera not found" warning and the screen records without it. In Camera mode, the recording can't start without a camera.

Chrome's picker offers screens, windows and tabs. Firefox uses the standard getDisplayMedia picker, which offers screens and windows only. The pickers are in src/platform/.

If you stop sharing from the browser's own controls, such as Stop sharing in Chrome's sharing bar, the recording stops as if you'd clicked Stop.

Audio

Option	Records
None	No sound. The default.
Mic	Your microphone.
System	The sound from the screen, window or tab you share.
System + mic	Both, mixed into one track.

System audio needs a screen capture, so System and System + mic are greyed out in Camera mode. Switching to Camera mode changes System to None and System + mic to Mic.

To record system audio, tick Also share audio in Chrome's screen picker. Chrome doesn't offer audio for every source. If the source you pick has no audio, Screen Tools warns "System audio track not found" and records without it.

Firefox can't record system or tab audio, so it offers only None and Mic. A saved System choice becomes None there, and System + mic becomes Mic.

The browser asks for microphone access before showing the screen picker. If the microphone is missing or blocked, Screen Tools warns "Microphone not found" and records without it. The microphone comes from the Preferred microphone setting, or the system default.

Camera overlay

In Screen + camera mode, the camera sits in a corner over the screen. Set its look under Camera overlay in Settings, where a preview shows where it sits:

• Position: any of the four corners. Bottom right by default.
• Size: small, medium or large. At 1080p, the overlay is 480, 640 or 864 px wide for the rectangle shape. Sizes scale with the capture resolution, so the overlay looks the same at any resolution.
• Shape: squircle (the default), rectangle or circle. Squircle and circle use a square box, and rectangle a 16:9 box.
• Zoom: 1× to 2×, which crops into the middle of the camera image.
• Mirror: on by default. Mirroring also applies to Camera mode.

The sizing code is overlayBox in compositor.ts.

Countdown and stopping

After you pick what to share, a 3-second countdown runs before recording starts. It shows over the live preview in the recorder and on the toolbar icon's badge. Cancel in the recorder, or a click on the toolbar icon, stops the countdown without keeping anything.

While recording, the toolbar icon shows a red REC badge, or a grey pause sign while paused. Clicking the icon stops the recording instead of opening the menu. The recorder window shows the live preview, a timer, Pause/Resume and Stop. The badge code is in toolbar.ts.

Closing the recorder window mid-recording stops the recording. The browser asks before closing it while a recording runs or an unsaved recording is open. The recording up to that point stays in Latest videos.

Formats, frame rate and resolution

• Format: MP4 (the default) or WebM. MP4 uses H.264 video and AAC audio. Where the browser can't record MP4, Screen Tools records WebM instead. The format list is in formats.ts.
• Frame rate: 15, 24, 30 (the default) or 60 fps, set in Settings. Higher rates make bigger files.
• Screen resolution: native (the default), 4K, 1440p, 1080p, 720p or 480p. Each option caps the capture size, and the browser scales the source down to fit, keeping its shape. Native captures the screen at its full pixel density, up to 3840×2160.
• Camera resolution: 1080p (the default), 720p, 480p, 360p or 240p, as an ideal the camera tries to match.

WebM files from the browser's recorder have no duration in the header, so players can't seek them. With Optimize video on (the default), Screen Tools writes the duration in when the recording stops. MP4 files don't need it.

Autosave and Latest videos

Screen Tools writes the recording to the extension's IndexedDB database every 5 seconds while you record. If the browser crashes or the window closes, you lose at most the last 5 seconds.

Latest videos lists the 5 most recent recordings, newest first. Each row shows a thumbnail with the length over it, the recording's name, its date, length and format, and whether you've saved it. A recording that didn't stop cleanly shows Interrupted and "Recovered" in place of its length.

A recording's name is its date and time until you save it under a different file name. After that, the list and the recording's page show the name you gave it, with the date underneath, and the next save starts from that name.

The thumbnail is a frame 1 second in, or a tenth of the way through a recording shorter than 10 seconds. An unoptimised WebM can't seek, so it gets its first frame. The list makes missing thumbnails one at a time the first time it shows them, and keeps them with the recording. A recording the browser can't decode within 8 seconds keeps a film icon instead. See thumbnail.ts.

Open a recording to play it, save it, delete it, or make it seekable if it's an unoptimised WebM. Its page also lists any uploads of it. Starting a new recording deletes the oldest beyond 5, whether you saved it or not, so save the ones you want to keep. A recording that's still uploading is kept until the upload ends. See db.ts.

Playback

After you stop, the recorder shows the recording with its length, format and size, a player, and Discard, New recording and Save video. New recording asks whether to save first if you haven't. Uploads of the recording are listed under the buttons.

The recorder, Latest videos and the Player page share one player with Screen Tools' own controls. Click the video to play or pause it, and double-click it for full screen. The controls hide 2.5 seconds after the pointer stops moving while it plays, and come back when you move it.

Control	What it does
Seek bar	Drag or click to jump. Hovering shows the time under the pointer.
Play/Pause	Plays or pauses.
Back 5 seconds, Forward 5 seconds	Skips 5 seconds.
Mute	Mutes or unmutes. Hover over it for a volume slider.
Time	The position and the length.
Playback speed	Cycles through 1×, 1.25×, 1.5×, 2× and 0.5×.
Picture in picture	Plays the video in a floating window. Only shown where the browser supports it.
Full screen	Fills the screen with the player.

Key	Action
Space or K	Play or pause
← and →	Skip back or forward 5 seconds
M	Mute or unmute
F	Full screen

The keys don't work while you're typing in a field or a dialog is open. With the seek bar or volume slider focused, the arrow keys step it, and Home and End go to the start and end. A WebM without a duration header shows the length the recorder measured until the browser works out the real one. See recorded-video.tsx.

The Player page plays any video file from your computer. Drop a file on it or click to pick one. For a WebM file, Make seekable writes the missing duration into it. Save the result to keep the fixed copy. See player.tsx.

Saving and compressing

Save video opens the save dialog, where you set the file name, pick where it goes and pick a size. The default name is screen-recording-YYYY-MM-DD-HHMMSS with the recording's extension, or the name you saved it under last time.

Save to offers This computer, your downloads folder, plus any Google Drive or Dropbox account you've connected and any upload server you've added in Settings. For a service, Create a share link asks it for a link anyone can open. Upload servers always make one. With nothing connected, a link under Save to opens Settings. It remembers the destination and the share-link choice you used last, and falls back to This computer if that service has since been disconnected. The save button reads Save, Compress and save, Upload or Compress and upload to match. Uploading counts as saving the recording. When it's done, a message offers Copy link or Open. See Uploading for connecting services, share links and resuming uploads.

Size	Maximum resolution	Note
Original	As recorded	The file as stored.
High quality	1080p	Small text stays sharp.
Balanced	720p	Good for sharing.
Small	720p at a lower bitrate	Fine for chat apps.
Smallest	480p	Small text may blur.

Each smaller size shows an estimated file size and how much smaller it is. Sizes that wouldn't come out at least 10% smaller show "No smaller" and can't be picked. Sizes the browser has no encoder for aren't shown. If it can't encode any of them, the dialog says only the original can be saved. The estimates come from each preset's bitrate, so recordings with little movement usually come out smaller than estimated. The dialog remembers the size you picked last.

Compression runs on your computer with the browser's own video encoders and keeps the container: MP4 stays MP4 and WebM stays WebM. A compressed copy is made first, then downloaded or uploaded. The stored recording isn't replaced. Keep the window open until the download starts or the upload finishes, and click Stop to cancel. The presets are in compress.ts.

Videos over 25 MB show a notice that they're too big for email and many chat apps, with Save a smaller copy. That button opens the dialog with a size already picked: the best-quality size that gets under 25 MB, or else the smallest size that helps.

With Show save options off in Settings, Save video downloads the original straight away with the dated name, or the name you saved it under last time, so it can't upload. Save a smaller copy still opens the dialog.