Set Up Custom Loading Screen

This guide explains how to show a custom loading screen while the Pixel Streaming session is preparing, and automatically hide it once the stream is connected.

Overview

You can use the E3DS SDK callbacks to control a custom loading screen.

The basic flow is:

Config is acquired → Show loading screen
Stream is connected → Hide loading screen

We will use:

e3ds_controller.callbacks.onConfigAcquire

to show the loading image, and:

e3ds_controller.callbacks.onDataChannelOpen

to remove it when the stream starts.

Follow the steps bellow:

Step 1. Prepare Your Loading Image

First, prepare the image you want to show as the loading screen.

You can use either:

Local image

or:

Hosted image URL

Example hosted image URL:

https://i.ibb.co.com/your-image.png

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

Correct:

https://i.ibb.co.com/example/loading.png

Incorrect:

https://ibb.co.com/example

Step 2. Show the Loading Screen

Add the following code inside your scripts_demo.js file:

e3ds_controller.callbacks.onConfigAcquire = function () {
    console.log("ob-onConfigAcquire");

    // Remove existing loading image if already added
    const oldImg = document.getElementById("loadingImage");
    if (oldImg) {
        oldImg.remove();
    }

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

    img.src = "YOUR_DIRECT_IMAGE_URL";

    img.id = "loadingImage";
    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 = "99999";

    document.body.appendChild(img);
};

Replace:

YOUR_DIRECT_IMAGE_URL

with your actual image URL.

Example:

img.src = "https://i.ibb.co.com/5hBNBZqs/Gemini-Generated-Image-v383lsv383lsv383.png";

Step 3. Hide the Loading Screen When Stream Starts

Add or update the following callback:

e3ds_controller.callbacks.onDataChannelOpen = function () {
    console.log("Stream Connected");

    const img = document.getElementById("loadingImage");

    if (img) {
        img.remove();
    }
};

This removes the loading screen once the stream is connected.

Step 4. Hide the Loading Screen on Error (Optional)

You can also remove the loading image if an error occurs:

e3ds_controller.callbacks.onError = function (errorMsg) {
    console.error("ob-onError", errorMsg);

    const img = document.getElementById("loadingImage");

    if (img) {
        img.remove();
    }
};

Alternative Implementation

You can also implement the loading screen using a separate HTML overlay or custom page instead of dynamically creating the image through JavaScript callbacks. This approach is useful for more advanced branded loading experiences or animated loading pages.

Example:

<div id="customLoadingScreen">
    <img src="loading.png">
</div>

Then hide the overlay after stream connection:

e3ds_controller.callbacks.onDataChannelOpen = function ()
{
    document.getElementById("customLoadingScreen").style.display = "none";
}

Troubleshooting

Need help?

If you need any assistance, feel free to reach out through any of the following channels:

🛠️ Support Portal: Contact Our Support Team

💬 Discord Community (Faster Support): Join Our Discord Community

📧 Email Support: support@eagle3dstreaming.com

🆓 Get Started for free

Follow us on:

Facebook | GitHub | LinkedIn | YouTube