Set Up Custom Session Expired Screen

This guide explains how to replace the default Eagle 3D Streaming session expired screen with your own custom fullscreen image.

Overview

By default, the SDK automatically shows its own “Session Expired” page when the session ends.

Using the callback below, you can display your own custom branded screen instead:

e3ds_controller.callbacks.onSessionExpired

Follow the steps below:

Step 1. Prepare Your Session Expired Image

Prepare a fullscreen image for the session expired state.

Recommended size:

1920 × 1080

You can host the image:

locally
OR
using public image hosting

Example direct image URL:

https://i.ibb.co.com/example/session-expired.png

Important: Use the direct image URL, not the image page URL.

Step 2. Add the Session Expired Callback

Add the following code inside your scripts_demo.js file:

JavaScript

e3ds_controller.callbacks.onSessionExpired = function ()
{
    console.log("Session Expired");

    // Clear entire page
    document.documentElement.innerHTML = "";

    // Create body again
    const body = document.createElement("body");

    body.style.margin = "0";
    body.style.overflow = "hidden";

    // Create image
    const img = document.createElement("img");

    img.src = "YOUR_DIRECT_IMAGE_URL";

    img.style.position = "fixed";
    img.style.top = "0";
    img.style.left = "0";
    img.style.width = "100vw";
    img.style.height = "100vh";
    img.style.objectFit = "cover";
    img.style.zIndex = "999999";

    body.appendChild(img);

    document.documentElement.appendChild(body);

    // Stop SDK rendering flow
    window.stop();

    // Prevent SDK redirect
    throw new Error("SessionExpiredStop");
}

Replace:

YOUR_DIRECT_IMAGE_URL

with your actual image URL.

Example:

HTML

img.src = "https://i.ibb.co.com/JW0zGP4b/session-expired.png";

Why `window.stop()` and `throw new Error()` are Required

The SDK internally continues rendering and redirects to its own default session expired page after the callback executes.

Using:

JavaScript

window.stop();

stops further browser rendering/network execution.

Using:

JavaScript

throw new Error("SessionExpiredStop");

interrupts the SDK flow and prevents the default session-expired renderer from replacing your custom screen.

Without these lines:

your custom image may appear briefly
then the SDK will replace it with the default session expired page

Alternative Implementation

You can also redirect users to a separate custom HTML page instead of rendering the image directly inside the callback. This method is cleaner and helps avoid the SDK re-rendering the default session expired screen.

Example:

JavaScript

e3ds_controller.callbacks.onSessionExpired = function ()
{
    window.location.href = "assets/pages/my-session-expired.html";
}

Troubleshooting

Issue	Possible Cause	Solution
Default SDK screen still appears	`throw new Error()` missing	Add `throw new Error("Stop SDK Redirect")`
Image does not appear	Invalid image URL	Use a direct image URL
Image appears stretched	Incorrect object fit mode	Use `objectFit = "cover"`
Black borders appear	Using `contain` mode	Switch to `cover` mode
Custom image flashes briefly then disappears	SDK redirect still active	Ensure the error interrupt line exists