Webcam Compositing Layout Presets in OpenScreen: Picture-in-Picture and Vertical-Stack

OpenScreen provides two built-in webcam compositing layout presets—picture-in-picture and vertical-stack—that determine how webcam feeds overlay or stack against screen content during recording sessions.

OpenScreen is an open-source screen recording utility that supports dynamic webcam positioning through predefined compositing layouts. The layout engine, implemented in src/lib/compositeLayout.ts, calculates precise positioning rectangles and styling parameters based on canvas dimensions and selected presets. These presets control whether the webcam appears as a floating overlay or a stacked panel beneath the main screen content.

Picture-in-Picture Layout Preset (Overlay Transform)

The picture-in-picture preset renders the webcam as a floating window in the bottom-right corner of the canvas, creating a distinct "window-in-window" aesthetic without cropping the underlying screen content.

Visual Design and Positioning

According to the source code in src/lib/compositeLayout.ts (lines 63-83), this preset scales the webcam to approximately 18% of the canvas width/height and positions it with a small margin from the bottom-right edges. The implementation applies a border radius calculated as 12% of the webcam size, clamped between 12px minimum and 24px maximum. A subtle drop shadow using rgba(0,0,0,0.35) with a 24px blur and 10px vertical offset provides depth separation from the background.

Technical Implementation

The preset uses an overlay transform type, meaning the screen content renders underneath at full canvas size without forced scaling. When computeCompositeLayout processes this preset (lines 83-136 in the source), it returns a screenRect covering the entire canvas and a webcamRect positioned at calculated coordinates. The screenCover property remains undefined for this preset, indicating no cropping occurs.

Vertical-Stack Layout Preset (Stack Transform)

The vertical-stack preset arranges content vertically, placing the webcam at the bottom edge while the screen occupies the remaining space above it.

Layout Mechanics

Defined in lines 84-96 of src/lib/compositeLayout.ts, this preset utilizes a stack transform that renders the webcam at full canvas width along the bottom edge with zero margin and no rounded corners. The layout engine calculates the remaining height for the screen content and positions the webcam y coordinate immediately below it, following the stack logic implemented at lines 47-81 of the same file.

Screen Cover Behavior

Unlike the picture-in-picture preset, vertical-stack sets screenCover to true, enabling the screen content to use cover mode and potentially crop to fill the available space. If no webcam is available, the screen automatically expands to fill the entire canvas, providing graceful degradation.

How to Use Layout Presets in Your Code

To implement these presets, import the computeCompositeLayout function from src/lib/compositeLayout.ts and specify the desired preset in the configuration object. The picture-in-picture preset serves as the default when no preset is specified.

Picture-in-Picture Example

import { computeCompositeLayout } from '@/lib/compositeLayout';

const layout = computeCompositeLayout({
  canvasSize: { width: 1920, height: 1080 },
  screenSize: { width: 1920, height: 1080 },
  webcamSize: { width: 640, height: 480 },
  layoutPreset: 'picture-in-picture', // default behavior
});

console.log(layout);
/*
{
  screenRect: { x: 0, y: 0, width: 1920, height: 1080 },
  webcamRect: {
    x: 1652,
    y: 822,
    width: 256,
    height: 192,
    borderRadius: 12
  },
  screenCover: undefined
}
*/

Vertical-Stack Example

import { computeCompositeLayout } from '@/lib/compositeLayout';

const stackLayout = computeCompositeLayout({
  canvasSize: { width: 1280, height: 720 },
  screenSize: { width: 1280, height: 720 },
  webcamSize: { width: 640, height: 360 },
  layoutPreset: 'vertical-stack',
});

console.log(stackLayout);
/*
{
  screenRect: { x: 0, y: 0, width: 1280, height: 360 },
  webcamRect: {
    x: 0,
    y: 360,
    width: 1280,
    height: 360,
    borderRadius: 0
  },
  screenCover: true
}
*/

The layout calculation integrates into the recording workflow through src/hooks/useScreenRecorder.ts, which consumes these rectangle configurations to composite the final video stream.

Accessing Preset Definitions for UI Selectors

For user interfaces requiring preset selection, OpenScreen exports the WEBCAM_LAYOUT_PRESETS array containing value-label pairs:

import { WEBCAM_LAYOUT_PRESETS } from '@/lib/compositeLayout';

console.log(WEBCAM_LAYOUT_PRESETS);
/*
[
  { value: 'picture-in-picture', label: 'Picture in Picture' },
  { value: 'vertical-stack', label: 'Vertical Stack' }
]
*/

This constant derives from the preset map defined at lines 62-97 of src/lib/compositeLayout.ts.

Summary

• OpenScreen provides two deterministic webcam compositing presets in src/lib/compositeLayout.ts: picture-in-picture (lines 63-83) and vertical-stack (lines 84-96).
• The picture-in-picture preset uses an overlay transform (lines 83-136) with rounded corners (12-24px), drop shadows (rgba(0,0,0,0.35) with 24px blur), and approximately 18% scaling, preserving full screen visibility without cropping.
• The vertical-stack preset employs a stack transform (lines 47-81) that positions the webcam at the bottom edge with full width, forcing the screen content into cover mode with potential cropping.
• Both presets are accessible through the computeCompositeLayout function starting at line 21, which calculates precise webcamRect and screenRect coordinates based on canvas dimensions.
• The WEBCAM_LAYOUT_PRESETS constant provides UI-ready labels for preset selection interfaces.

Frequently Asked Questions

What are the available webcam compositing layout presets in OpenScreen?

OpenScreen supports two built-in presets: picture-in-picture and vertical-stack. These are defined in the preset map at lines 62-97 of src/lib/compositeLayout.ts, with picture-in-picture occupying lines 63-83 and vertical-stack occupying lines 84-96.

How does the picture-in-picture preset calculate border radius?

The border radius is computed as 12% of the webcam dimensions, clamped between a minimum of 12px and maximum of 24px. This calculation occurs within the picture-in-picture preset definition in src/lib/compositeLayout.ts alongside the shadow styling parameters.

Can I use these presets without a webcam connected?

Yes. The vertical-stack preset gracefully handles missing webcams by expanding the screen content to fill the entire canvas. The layout engine checks webcam availability before applying stack transforms, ensuring recordings continue uninterrupted even when peripheral devices disconnect.

Where is the layout calculation logic tested?

Unit tests verifying rectangle calculations for both presets reside in src/lib/compositeLayout.test.ts. These tests validate the mathematical accuracy of computeCompositeLayout outputs across various canvas and webcam size combinations, ensuring consistent positioning algorithms.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}