Embedding Stream into Your Webpage Using the E3DS Frontend SDK

This guide explains how to embed a Pixel Streaming session directly into your webpage using the Eagle 3D Streaming Frontend SDK.
The steps are straightforward and designed to help you complete the integration quickly and reliably.

Why Use the Frontend SDK?

The E3DS SDK provides a secure and optimized integration layer for embedding your Unreal Pixel Streaming applications into any website.
It manages:

Secure token generation
Authentication
Connection handling
Stream initialization
Modern, production-ready embed workflow

This removes the need to manually handle browser scripts or low-level streaming logic.

Follow the steps below:

Step 1. Download the Frontend SDK

Download the SDK package from the GitHub: Get SDK from GitHub

Step 2. Extract the SDK

Step 3. Open the Project in Your Editor

Step 4. Open `tokenManager.js`

Locate and open the tokenManager.js file inside the project.

Step 5. Configure Authentication Details

Update the following values in tokenManager.js:

streamingApiKey → Your Streaming API Key (refers to Streaming API Key doc)
clientUserName → Your Username on the Eagle 3D Streaming Platform
tokenExpiryDuration → Define the token validity duration

Note: There are two types of API keys. Ensure you are using the Streaming API Key.

Step 6. Update Required Streaming Information

Inside the configuration file, update the following fields:

domain → connector.eagle3dstreaming.com
Note: If you are using a customized system, please replace this with your custom domain.
appName → Name of the app you want to embed
configurationName → Configuration name for the app
version → latest (recommended to use the latest build)

Step 7. Run the SDK Locally

Open the file:

CODE

e3ds_streaming_FE.html

Run it via a live server (VS Code Live Server, or any local web server).

This will load the hosted streaming experience using your provided configuration.

Notes

This guide demonstrates the simplest approach to setting up the E3DS Frontend SDK and embedding a stream into a webpage. Once the configuration is complete, you can integrate the SDK into your existing project structure and host your webpage on your preferred hosting environment—whether on your company server, cloud hosting, or any modern web hosting platform.

To explore additional SDK capabilities, such as event callbacks, UI customization, stream lifecycle control, reconnection logic, and advanced embed behaviors, please refer to the detailed guide below:

Advanced Features & SDK Behavior

It is recommended to review this document after completing the basic integration steps to fully leverage the Frontend SDK.

Troubleshooting

Issue	Possible Cause	Solution
Token not generated / Authentication fails	Wrong API key, wrong username, or invalid token duration	Use Streaming API Key, verify username, check tokenExpiryDuration, remove extra spaces/quotes
Stream not loading	Incorrect domain/app/config names	Set domain to `connector.eagle3dstreaming.com`, verify appName and configurationName exactly as shown in the Control Panel
Black screen / Stuck on connecting	Network or browser blocking WebRTC	Try another network, disable VPN, use Chrome/Edge/Firefox
Local page not working	Opened using file path (`file://`) instead of a server	Run using Live Server or any local server tool
Console errors	CORS issues, missing values, wrong API key, incorrect version	Open DevTools → Console; fix the specific error shown
App not responding or inactive	App not deployed or not ready in the Control Panel	Confirm the app is uploaded & shown in the Control Panel