Skip to content
evmux Knowledge Base

Layers

Layers are the individual visual elements that make up a scene. They are stacked on top of each other, with elements higher in the stack appearing in front.

What is a Layer?

A layer is a single visual source or graphic element within a scene. Multiple layers combine to create the complete visual composition your viewers see.

Layer Stack

Layers follow a stacking order (z-index):

  • Top layers appear in front
  • Bottom layers appear behind
  • You can reorder layers to change what appears in front

Layer Types

When answering a user, use the names on the Add New Layer menu, not the internal type names below. The menu offers: Dynamic Grid, Text, Animated Caption, AI Generated Image, Media Files, Slideshow, Web Source, Apps & Widgets, Speaker, Screenshare and Media share.

There is no “Editor layer” or “Remote Guest layer” to pick: one Speaker entry opens a chooser that lists everyone — editors, speakers and guests alike. The distinctions below are how the code stores what you chose, not choices the user makes.

Internally evmux has 14 layer types:

Participant Layers

Speaker (speaker)

On-camera speakers/presenters joining the broadcast. References participants from the speaker list.

Editor (editor)

The broadcast producer/editor’s camera feed. References participants from the editor list.

Remote Guest (remoteguest)

Remote participants who join via WebRTC invite link. References participants from the guest list.

Screen Share (screenshare)

Screen, window, or tab being shared by any participant.

Media Share (media)

Media content (videos, images) being shared by participants during the broadcast.

Media Layers

Video (video)

Pre-recorded video file playback with support for:

  • Start/end trim points
  • Loop playback
  • Auto-switch to next scene
  • Volume control
  • Chromakey (green screen) effects

Image (image)

Static images (PNG, JPG, GIF, WebP, SVG) with chromakey support.

Audio (audio)

Audio-only tracks for background music or sound effects.

Slideshow (slideshow)

Slideshow presentations that cycle through multiple images with configurable timing.

Dynamic Layers

Text (text)

Dynamic text overlays with extensive styling:

  • Font family, size, weight, style
  • Text and background colors (RGBA/HSL)
  • Padding, line height, letter spacing
  • Text alignment and decoration
  • Border radius

Web Source (websource)

Embedded web content via iframe:

  • URL-based content
  • Custom HTML support
  • Fixed size options
  • Useful for widgets, alerts, and web-based graphics

Dynamic Caption (dc)

Animated lower-thirds and captions with:

  • Multiple animation types
  • Configurable timing (delay, duration, cycle)
  • Speaker name/title display
  • Logo integration
  • Video background support

Dynamic Grid (dynamicGrid)

Automatic grid layout that arranges multiple participants:

  • Embedded scene support
  • Fit/stretch options
  • Content alignment controls
  • Only one allowed per scene

User App (userapp)

Third-party applications integrated via the Evmux App Framework:

  • Custom widgets and tools
  • Interactive overlays
  • External service integrations

Supporting Elements

These are rendered as special overlay elements:

  • Frame - Custom decorative frames around participant layers
  • Watermark - Persistent branding watermarks
  • Overlay - Scene-level background overlays
  • Logo - Scene logo blocks
  • Stinger - Transition animations between scenes
  • Banner - Lower-third text banners

Layer Properties

Common Properties (All Layers)

PropertyDescription
idxUnique layer identifier (GUID)
typeLayer type identifier
nameDisplay name
opacityTransparency (0-100%)
boundsWidth and height in pixels
posPosition (top, right, bottom, left as %, rotation)
cropCrop values (top, right, bottom, left)
datakeyReference to external data (participant ID, etc.)

Transform Properties

  • Position: X and Y coordinates (percentage-based)
  • Size: Width and height
  • Rotation: Angle in degrees
  • Crop: Trim edges of the layer

Appearance Properties

  • Opacity: Transparency level (0-100%)
  • Border Radius: Rounded corners (most layer types)
  • Custom Frame: Decorative frame overlay (participant layers)

Behavior Properties

  • Visibility (hidden): Show or hide the layer
  • Lock (locked): Prevent accidental modifications
  • Aspect Ratio (aspect): Maintain proportions when resizing
  • Vertical Streaming: Portrait mode configuration

Chromakey Properties (Video/Image layers)

  • Active: Enable/disable green screen
  • Color: Green (g), Blue (b), or custom
  • Range: Color matching threshold
  • Softness: Edge softness

Audio Properties (Video/Participant layers)

  • Muted: Audio on/off
  • Volume: Audio level
  • Mic: Microphone control

Layer Interactions

  • Drag and drop: Reposition layers in the scene editor
  • Resize handles: Corner and edge handles to adjust dimensions
  • Rotation handle: Rotate the layer
  • Context menu: Right-click for layer-specific options
  • Keyboard shortcuts: Quick layer manipulation
  • Layer list: Reorder by dragging in the layers panel

Stream Types for Participants

Participant layers support multiple stream types:

  • Camera - Main camera feed (high/low resolution)
  • Multicam 1/2 - Additional camera angles
  • Screen - Screen share stream
  • Media - Shared media stream