Custom UI Vs Raw Data

Overview

There are two fundamentally different ways to build a custom meeting UI with the Zoom SDK. Both require Custom UI mode (ENABLE_CUSTOMIZED_UI_FLAG), but they differ in who renders the video.

Approach 1: SDK-Rendered (ICustomizedVideoContainer)

The SDK renders video into your window using Direct3D. You control layout, the SDK controls pixels.

How it works

You control

• Window creation, sizing, positioning
• Which participants are visible and where (SetPos)
• Active speaker vs gallery layout
• Your own UI controls (buttons, toolbar)
• Background color (SetBkColor)

SDK controls

• Actual video decoding and rendering
• D3D pipeline
• Frame timing
• Video quality / resolution scaling

Key APIs

• CreateCustomizedUIMgr() / DestroyCustomizedUIMgr()
• ICustomizedUIMgr::CreateVideoContainer() / DestroyVideoContainer()
• ICustomizedVideoContainer::CreateVideoElement()
• IActiveVideoRenderElement::Start() / Stop()
• INormalVideoRenderElement::Subscribe(userId)
• IVideoRenderElement::SetPos(RECT) / Show() / Hide()

Best for

• Standard meeting applications
• Apps that need a meeting window with video
• Rapid development (less code)
• When you don’t need pixel-level access

Limitations

• No access to raw video frames
• Cannot apply custom filters/effects
• Cannot render video in your own graphics engine
• Cannot pop individual videos into separate windows (elements are regions within one container)
• Single rendering surface per container

Approach 2: Self-Rendered (IZoomSDKRenderer + Raw Data)

You get raw YUV420 frames per participant and render them yourself. Maximum control.

How it works

You control

• Everything from Approach 1, PLUS:
• Raw pixel access (YUV420 frames)
• Your own rendering pipeline (D3D11, OpenGL, Vulkan, GDI, etc.)
• Custom video processing (filters, watermarks, overlays, effects)
• Multiple separate windows per participant
• Picture-in-picture
• Recording/streaming with effects applied
• Any layout imaginable

SDK provides

• Decoded video frames as YUVRawDataI420*
• Frame metadata (width, height, rotation)
• Per-participant subscription

Key APIs

• createRenderer() — creates a renderer for one participant
• IZoomSDKRenderer::setRawDataResolution() — set quality
• IZoomSDKRenderer::subscribe(userId) — bind to participant
• IZoomSDKRendererDelegate::onRawDataFrameReceived(YUVRawDataI420*) — frame callback
• IZoomSDKRendererDelegate::onRawDataStatusChanged(RawDataStatus) — status changes
• Raw recording: IMeetingRecordingController::StartRawRecording()

Best for

• Custom rendering engines
• Video processing / effects
• Multi-window layouts
• Recording with overlays
• Streaming applications
• Research / computer vision

Limitations

• More code to write (you handle all rendering)
• Must convert YUV420 to RGB/BGRA for display
• Must manage frame buffers and timing
• Higher CPU usage if not GPU-accelerated
• Must call StartRawRecording() before frames flow

Approach 3: Hybrid (Both Together)

You can combine both approaches in the same application:

Use cases

• Main meeting window uses SDK rendering (efficient, easy)
• Simultaneously capture raw frames for recording with watermarks
• Pop out a specific participant into a custom-rendered window
• Apply computer vision to one participant’s feed while showing others normally

How to combine

1. Initialize with ENABLE_CUSTOMIZED_UI_FLAG
2. Create ICustomizedVideoContainer for the main view
3. Also call createRenderer() + subscribe() for raw data on specific users
4. Both can run simultaneously

Comparison Table

Decision Guide

Use SDK-Rendered when:

• You just need a meeting window with custom layout
• You want to add your own toolbar/controls around the video
• Development speed matters
• You don’t need to touch the video pixels

Use Self-Rendered when:

• You need to apply effects/filters to video
• You’re building a custom rendering engine
• You need participants in separate windows
• You’re doing computer vision / ML on the video
• You need full pixel control

Use Hybrid when:

• You want the easy SDK rendering for the main view
• But also need raw frames for specific purposes (recording, one pop-out window, etc.)

See also:

• Custom UI Architecture — How SDK rendering works internally
• Custom UI Video Rendering Example — SDK-rendered approach
• Raw Video Capture — Self-rendered approach