How OpenScreen Export Quality Presets Affect Video Resolution and Bitrate
OpenScreen's three export quality presets—source, medium, and good—determine output resolution by either preserving original dimensions or targeting 720p/1080p heights, while automatically scaling bitrate based on total pixel count to maintain visual fidelity.
When exporting screen recordings with OpenScreen (siddharthvaddem/openscreen), users select from distinct export quality presets that directly control the final MP4's technical specifications. These presets, defined by the ExportQuality type in src/lib/exporter/types.ts, trigger specific resolution and bitrate algorithms within the VideoEditor component before passing parameters to the VideoExporter class.
Understanding the Three Export Quality Presets
The ExportQuality union type supports three string literals: "source", "medium", and "good". Each preset follows a distinct code path in src/components/video-editor/VideoEditor.tsx to calculate exportWidth, exportHeight, and bitrate before instantiating the exporter.
Source Quality (Original Resolution)
Selecting the source preset instructs OpenScreen to maintain the original recording dimensions. According to the implementation in VideoEditor.tsx (lines 1127–1186), the code searches for the largest even-width and even-height pair that matches the source aspect ratio. If exact dimensions aren't available, it falls back to rounded even values that preserve the aspect ratio while satisfying codec requirements.
The resulting bitrate follows a three-tier structure based on total pixel count:
- ≤ 1080p: 30 Mbps
- 1080p to 1440p: 50 Mbps
- > 1440p: 80 Mbps
Medium Quality (720p Target)
The medium preset sets a fixed target height of 720 pixels. The width is dynamically calculated by multiplying 720 by the current aspect ratio, then rounded to the nearest even integer. This ensures H.264 codec compatibility while maintaining the original aspect ratio.
For bitrate, this preset uses different thresholds than source:
- ≤ 720p: 10 Mbps
- 720p to 1080p: 20 Mbps
- > 1080p: 30 Mbps
Good Quality (1080p Target)
The good preset (the default when unspecified) applies the same logic as medium but uses a target height of 1080 pixels. The width calculation follows identical aspect-ratio preservation and even-number rounding rules found in the "quality-based target resolution" branch of VideoEditor.tsx (lines 1127–1199).
Because this preset shares the same code path as medium, it uses identical bitrate tiers: 10 Mbps, 20 Mbps, or 30 Mbps depending on whether the final pixel count falls below 720p, between 720p–1080p, or above 1080p respectively.
Bitrate Calculation Logic
Bitrate selection occurs before instantiating the VideoExporter class. The algorithm distinguishes between source (which prioritizes archival quality) and the constrained presets (which optimize for file size):
Source preset bitrates scale aggressively with resolution to prevent quality loss in high-resolution recordings, maxing out at 80 Mbps for 4K+ content.
Medium and good preset bitrates use conservative allocations (10–30 Mbps) suitable for web sharing and standard desktop viewing, calculated in the else branch of the resolution logic in VideoEditor.tsx.
Technical Implementation Details
When a user confirms export through the UI (managed in src/components/video-editor/SettingsPanel.tsx), the exportQuality state is read and processed by the VideoEditor component. The computed dimensions and bitrate are then passed to the exporter configuration:
// From VideoEditor.tsx - building the exporter configuration
const exporter = new VideoExporter({
videoUrl: videoPath,
width: exportWidth, // Calculated based on preset
height: exportHeight, // Source, 720, or 1080
bitrate: calculatedBitrate, // Tiered Mbps value
codec: "avc1.640033", // AVC High Profile
// ... additional options
});
The VideoExporter class in src/lib/exporter/videoExporter.ts receives these pre-calculated values and configures the VideoEncoder accordingly, ensuring the output MP4 adheres to the quality specifications determined by the preset selection.
Practical Code Examples
Exporting at Medium Quality (720p)
await exportVideo({
exportQuality: "medium",
videoPath: "/path/to/recording.mp4"
});
This configuration results in a 720px height with width calculated from the aspect ratio (rounded to even numbers), and typically allocates 10 Mbps for standard aspect ratios or 20 Mbps if the rounded dimensions exceed 720p total pixel count.
Exporting at Source Quality (Original Resolution)
await exportVideo({
exportQuality: "source",
videoPath: "/path/to/recording.mp4"
});
The exporter preserves the original capture dimensions (adjusted to even numbers), with bitrate scaling from 30 Mbps for 1080p content up to 80 Mbps for resolutions exceeding 1440p.
Exporting at Good Quality (1080p)
await exportVideo({
exportQuality: "good",
videoPath: "/path/to/recording.mp4"
});
This default preset produces 1080px height with proportional width, typically falling into the 20 Mbps bitrate tier for standard 16:9 content, or 30 Mbps if the rounded pixel count exceeds 1080p thresholds.
Summary
- OpenScreen provides three presets (
source,medium,good) defined insrc/lib/exporter/types.tsthat control the export pipeline. - Source preserves original dimensions with premium bitrates (30–80 Mbps); medium targets 720p (10–30 Mbps); good targets 1080p (10–30 Mbps).
- All output dimensions are forced to even numbers to ensure compatibility with the H.264 codec (
avc1.640033). - Bitrate tiers differ between the archival-focused
sourcepreset and the web-optimizedmedium/goodpresets. - Resolution and bitrate calculations occur in
src/components/video-editor/VideoEditor.tsxbefore passing tosrc/lib/exporter/videoExporter.ts.
Frequently Asked Questions
What is the default export quality preset in OpenScreen?
If the user does not explicitly select a preset, OpenScreen defaults to the good preset. This renders video at 1080p height with bitrate scaling between 10–30 Mbps depending on the final pixel dimensions after aspect-ratio calculations.
Why does OpenScreen force video dimensions to even numbers?
Video codecs, specifically AVC/H.264 as indicated by the avc1.640033 codec string used in VideoExporter, require width and height values to be divisible by 2 for proper macroblock alignment. The rounding logic in VideoEditor.tsx ensures compatibility with these encoder constraints while preserving aspect ratios.
How does bitrate allocation differ between source and good presets at 1080p?
At exactly 1080p resolution, the source preset allocates 30 Mbps while the good preset allocates 20 Mbps. The source preset uses a higher bitrate allocation because it prioritizes lossless archival quality over file size optimization, whereas good targets efficient distribution.
Which source files control the export quality logic?
The ExportQuality type definition resides in src/lib/exporter/types.ts. The UI selection interface is implemented in src/components/video-editor/SettingsPanel.tsx, while the core resolution and bitrate calculation algorithms are contained in src/components/video-editor/VideoEditor.tsx (specifically lines 1127–1199). The actual encoding is handled by src/lib/exporter/videoExporter.ts.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" Maintain an open-source project? Get it listed too →