Ctrlk
Go To Luciq
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Video-Like Replay

Turn Session Replay into video-like playback in your React Native app. Set the capturing mode, screenshot interval, and quality, and read the PII warning.

Experimental API - PII Warning

Video-like Session Replay APIs are experimental.

This feature may capture sensitive UI unmasked in some cases. USE AT YOUR OWN DISCRETION TO PREVENT PII LEAKAGE. Opt in only after validating masking/privacy in your app.

Min Required SDK Version

Video-like Session Replay is supported starting React Native SDK version 19.1.0.

Overview

Video-like Session Replay transforms your session recordings from simple screen-by-screen captures into smooth, video-like playback. This feature gives you complete visibility into user behavior by:

  • Capturing more frequent screenshots — See every interaction, not just screen transitions

  • Providing configurable quality profiles — Balance visual fidelity with storage efficiency

  • Supporting multiple capture modes — Choose the right approach for your debugging needs

Quick Start

Add these APIs before initializing the SDK for the best experience:

import Luciq, {
  SessionReplay,
  CapturingMode,
  ScreenshotQuality,
} from '@luciq/react-native';

// Configure video-like replay
SessionReplay.setEnabled(true);
SessionReplay.setCapturingMode(CapturingMode.frequency);
SessionReplay.setScreenshotCaptureInterval(1000); // 1 screenshot per second
SessionReplay.setScreenshotQuality(ScreenshotQuality.normal);

// Initialize SDK
Luciq.init({
  token: 'APP_TOKEN',
  invocationEvents: [/* ... */],
});

Capturing Modes

Control when screenshots are captured using SessionReplay.setCapturingMode(mode) with the CapturingMode enum.

Navigation Mode (Default)

Captures screenshots only when users navigate between screens. This is the default behavior and provides the lowest overhead.

Best for: Apps where screen transitions are the primary user flow

Interactions Mode

Captures screenshots on screen navigation and user interactions. Includes debouncing to prevent excessive captures.

Best for: Debugging user interaction issues, understanding how users interact with complex screens

Supported Interactions

  • Tap

  • Long Press

  • Swipe

  • Scroll

Frequency Mode

Captures screenshots at a fixed time interval for true video-like playback. Also captures on screen navigation.

Best for: Full video-like replay experience, debugging visual issues, understanding complete user journeys

Screenshot Capture Interval

When using Frequency mode, configure how often screenshots are captured using SessionReplay.setScreenshotCaptureInterval(intervalMs).

Parameter

Description

intervalMs

Time between captures in milliseconds

Default

1000ms (1 screenshot per second)

Minimum

500ms

Values below 500ms are automatically clamped to 500ms (the minimum allowed). This setting has no effect in navigation or interactions modes.

Timer Reset Behavior

The capture timer resets when:

  • A manual screenshot is captured via the SDK API

  • Screen navigation occurs

This ensures you always capture important moments regardless of the timer state.

Screenshot Quality

Control the visual quality of captured screenshots using SessionReplay.setScreenshotQuality(quality) with the ScreenshotQuality enum. Higher quality provides better visuals but uses more storage.

Quality Profiles

Profile

Compression

Use Case

high

50% quality (WebP)

Detailed debugging, visual regression testing

normal (Default)

25% quality (WebP)

Balanced quality and storage

greyscale

25% quality + grayscale (WebP)

Maximum storage efficiency, text-heavy apps

Estimated Screenshots per Session

Based on the default 2MB session screenshot limit:

Quality Profile

Approx. Screenshots per Session

high

~62 screenshots

normal

~104 screenshots

greyscale

~130 screenshots

For video-like replay at 1 FPS with normal quality, you can capture approximately 1-2 minutes of continuous session activity.

Configuration Timing

Recommended: Before SDK Initialization

For best results, configure Video-like Session Replay before calling Luciq.init():

Runtime Configuration

You can also change settings during the session. Changes take effect as follows:

Setting

When Applied

Capturing Mode

Next session

Screenshot Quality

Next screenshot

Capture Interval

After current interval completes

Privacy & Masking

Video-like Session Replay respects all existing privacy configurations:

  • Auto-masking continues to work across all capturing modes

  • Private views are masked in all captured screenshots

  • Network log redaction is applied identically across every capturing mode and quality profile

Switching to frequency mode does not bypass masking.

For more information on privacy controls, see Setup Session Replay.

Platform Notes

  • iOS: Backed by the same native screenshot pipeline documented in the iOS Video-Like Replay guide. SwiftUI scroll detection in interactions mode may require manual gesture wiring on the native side — see SwiftUI Integration for iOS.

  • Android: Capturing modes and quality profiles map to the equivalent native Session Replay configuration documented in the Android Video-Like Replay guide. No extra setup is required from React Native.

Best Practices

Recommended Configurations

Use Case

Configuration

General debugging

Navigation mode + normal quality

UI/UX analysis

Interactions mode + normal quality

Full video replay

Frequency mode (1000ms) + normal quality

Visual debugging

Frequency mode (500ms) + high quality

Storage-conscious

Navigation mode + greyscale quality

Code Examples

Video-like Replay (Balanced)

Interaction-Focused Debugging

Maximum Visual Fidelity

Storage-Optimized

API Reference

SessionReplay.setCapturingMode()

Sets when screenshots are captured.

Value

Description

CapturingMode.navigation

Capture on screen changes only (default)

CapturingMode.interactions

Capture on navigation and user interactions

CapturingMode.frequency

Capture at fixed time intervals

SessionReplay.setScreenshotQuality()

Sets the visual quality of captured screenshots.

Value

Description

ScreenshotQuality.high

50% WebP compression

ScreenshotQuality.normal

25% WebP compression (default)

ScreenshotQuality.greyscale

Grayscale + 25% WebP compression

SessionReplay.setScreenshotCaptureInterval()

Sets the capture interval for Frequency mode.

Parameter

Description

intervalMs

Interval in milliseconds (min: 500, default: 1000)

Migration Guide

If you're upgrading from a previous SDK version:

  1. No breaking changes — Default behavior remains navigation mode with normal quality.

  2. Opt-in feature — Video-like replay must be explicitly configured.

  3. Repro Steps unaffected — Bug and Crash report screenshots continue to use navigation mode and normal quality.

PreviousSetup Session Replay
NextSupport Tools Integration

Last updated