Embedding Meeting into Webpage using E3DS SDK

Extract the downloaded ZIP file and rename the folder as Host.

Open the Host folder in your preferred code editor.

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

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.

Inside the configuration file, update the following fields:

• domain → connector_boundary2.eagle3dstreaming.com [for new system]

• appName → Name of the app you want to embed

• configurationName → Configuration name for the app

• version → latest (recommended to use the latest build)

• hostMeetingId → A unique string for the meeting session

Each session must have a unique hostMeetingId to avoid conflicts.

If two hosts use the same hostMeetingId, it may lead to conflicts or unexpected behavior during the session. Please ensure the ID is unique to avoid such issues.

Duplicate the Host folder and rename the copy to Guest.

Repeat Steps 3–6 for the Guest folder.

• Use the same Meeting ID for both host and guest.

• In the Host side, it’s defined as hostMeetingId.

• In the Guest side, set it as GuestMeetingId.

Example:

• Host → hostMeetingId = 123456

• Guest → guestMeetingId = 123456

Open the file e3ds_streaming_FE.html from the Host folder and run it locally using a live server.

Do the same for the Guest folder.

• Host → Can interact, move, and perform activities within the session.

• Guest → Can only view the host’s actions but cannot interact directly.

• Left panel → Guest view (observer)

• Right panel → Host view (controller)

The guest observes all host activities but cannot control the session.