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

> Explore OpenScreen's webcam compositing layout presets like picture-in-picture and vertical-stack to control how webcam feeds integrate with your screen content during recordings. Optimize your video.

- Repository: [Sid/openscreen](https://github.com/siddharthvaddem/openscreen)
- Tags: how-to-guide
- Published: 2026-04-03

---

**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`](https://github.com/siddharthvaddem/openscreen/blob/main/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`](https://github.com/siddharthvaddem/openscreen/blob/main/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`](https://github.com/siddharthvaddem/openscreen/blob/main/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`](https://github.com/siddharthvaddem/openscreen/blob/main/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

```typescript
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

```typescript
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`](https://github.com/siddharthvaddem/openscreen/blob/main/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:

```typescript
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`](https://github.com/siddharthvaddem/openscreen/blob/main/src/lib/compositeLayout.ts).

## Summary

- **OpenScreen** provides two deterministic webcam compositing presets in [`src/lib/compositeLayout.ts`](https://github.com/siddharthvaddem/openscreen/blob/main/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`](https://github.com/siddharthvaddem/openscreen/blob/main/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`](https://github.com/siddharthvaddem/openscreen/blob/main/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`](https://github.com/siddharthvaddem/openscreen/blob/main/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.