Your own loading and ending screens

A wait and a failure are the two moments your stream looks least like your product. Both are replaceable: Eagle 3D Streaming tells your page what is happening, and you decide what appears. With the Web SDK that is a callback; with an iframe it is a postMessage event — the same moments under different names.

The moments, by method

The three progress stages are separate — downloading the app, preparing it, starting it — not one bar filling up, and a progress bar that pretends otherwise will stall at odd percentages. The Web SDK reference has the full callback list, including the ones that are offered and never fire.

A loading screen

Show-then-hide, bracketed by two moments.

Web SDK

e3ds_controller.callbacks.onConfigAcquire = function () {
  document.getElementById("myLoadingScreen").style.display = "flex";
};

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

iframe

// Show your loading screen at the moment you load the stream ...
document.getElementById("myLoadingScreen").style.display = "flex";
document.getElementById("streamFrame").src = STREAM_URL;

// ... and hide it, or switch to an ending screen, when the frame says so.
window.addEventListener("message", function (event) {
  // Only listen to the stream itself: compare event.origin with your streaming domain.
  const m = event.data;
  if (!m || typeof m !== "object") return;

  if (m.type === "bidirectionalChannelBetweenUnrealAndIframeReady") {
    document.getElementById("myLoadingScreen").style.display = "none";
  }
  if (m.type === "sessionEnding") {
    document.getElementById("mySessionEndedText").textContent = m.message;
    document.getElementById("mySessionEnded").style.display = "flex";
  }
});

An ending screen

By default the platform shows its own "session ended" page. Because your screen is yours, you can put a start a new session button on it — which the default screen does not offer, and which is the single most useful thing to add.

Build it on onSessionEnding (iframe: sessionEnding). It fires for every way a session ends — a crash, an idle timeout, an expired link, a wrong password, the time limit — and carries a line of text saying which, so one handler and one screen cover all of them. Show that text rather than inventing your own: it is written for the person reading it, and it is the only part that knows what actually happened. Every message a session can end with lists what it can say.

e3ds_controller.callbacks.onSessionEnding = function (message) {
  document.getElementById("mySessionEndedText").textContent = message;
  document.getElementById("mySessionEnded").style.display = "flex";
};

A crash-only message

"Something went wrong" on a session that simply timed out is worse than nothing: a viewer whose hour ran out is not looking at a fault, and telling them they are costs you a support ticket and their confidence. If you want a message for a genuine crash and nothing else, you need two events together, because neither is enough alone:

Set a flag when the crash event arrives, and when the session-ending event follows, show your crash message only if that flag is set.

Watch one being built

Build a “press any key to start” screenWatch on YouTube

Last updated 1 Oct 2026