Embed Stream using E3DS SDK

This guide explains how to embed an Unreal Engine Pixel Streaming session directly into your webpage using the Eagle 3D Streaming (E3DS) Frontend SDK. The steps are straightforward and designed to help you complete the integration quickly, securely, 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.

SDK Reference

Frontend SDK:
https://github.com/e3ds/pixelstreaming-sdk/blob/main/scripts/dist/e3dsCore.min_ns.js

Demo Project Overview

In this guide, we demonstrate the SDK integration using a simple demo project available on GitHub. We strongly recommend starting with this demo project to validate your configuration before integrating the SDK into your own production application.

Step-by-Step Integration Guide:

Step 1. Download the Demo Project with SDK

Download the demo project that includes the E3DS Frontend SDK from GitHub: Get the Simple Project with SDK from GitHub

Step 2. Extract the Downloaded Project

Extract the downloaded ZIP file to a local directory on your machine.

Step 3. Open the extracted project folder using your preferred code editor

Step 4. Open tokenManager.js

Locate and open the file:

/tokenManager.js

This file is responsible for generating and managing authentication tokens required to access the Pixel Streaming session.

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 Enterprise Plan, please replace this with your custom domain provied by Eagle 3D Streaming. If you are unsure which domain to use, please contact support@eagle3dstreaming.com

• 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 Demo HTML Locally

Open the following file:

e3ds_streaming_FE.html

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

Once running, the page will load the hosted Pixel Streaming experience using your configured settings.

Notes & Best Practices

This guide demonstrates the simplest and fastest way to set up the E3DS Frontend SDK. After validating the demo project, you can:

• Integrate the SDK into your existing web application

• Customize UI and layout

• Deploy your webpage on any hosting environment (company servers, cloud hosting, or modern static hosting platforms)

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:

Runtime Events & Utility Functions

Advanced Features & SDK Behavior

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

Troubleshooting

Need help?

🛠️ Contact our Support Team

💬 Join the Community on Discord

🆓 Get Started for free

Follow us on:

Facebook | GitHub | LinkedIn | YouTube