Advanced Features & SDK Behavior

This document provides additional technical details and advanced usage patterns for developers integrating the E3DS Frontend SDK. These features are not required for basic setup but are useful for building customized or complex streaming experiences.

1. Error Handling & Custom Error Processing

The new E3DS Frontend SDK does not perform automatic redirects when an error occurs.
Instead, it provides a dedicated callback for handling all error messages programmatically:

JS

e3ds_controller.onError = (errorMessage) => {
    console.error("Streaming Error:", errorMessage);

    // You can display an alert, show a custom banner, or redirect:
    // showErrorBanner(errorMessage);
    // window.location.href = "/error-page";
};

This approach gives full control over how your application.

2. Video Element ID

The SDK currently uses a fixed video element ID:

NGINX

streamingVideo

Custom video element IDs are not supported in the current release.
Future updates may include support for user-defined IDs.

If your UI requires a custom layout, you can manage it using a container (see Section 4).

3. Programmatic Access to the Active Stream

You may need direct access to the WebRTC media stream—for example:

Mirroring the stream on another video element
Recording the stream
Analyzing video frames
Applying filters

You can retrieve the active stream from the SDK-managed video element:

JS

const streamingVideo = document.getElementById("streamingVideo");
let stream = streamingVideo.srcObject;

Once stored in a variable, you can reuse the stream elsewhere.
For example, copying it:

JS

const newVideo = document.createElement("video");
newVideo.autoplay = true;
newVideo.srcObject = stream;
document.body.appendChild(newVideo);

You may also refer to copyStream.html in the SDK package for a full example.

4. Player Sizing Relative to a Container

The SDK allows you to control the player’s size and layout using a parent container.

Add a container div inside your HTML:
HTML
```
<div id="playerUI"></div>
```

The SDK will inject the video element inside this container.

Use CSS to control layout and responsiveness. Example:

CSS

#playerUI {
    width: 100%;
    height: 600px;
    max-width: 1200px;
    margin: 0 auto;
}

The player will automatically scale to match the container’s dimensions.

5. Resetting the Controller Without Refreshing the Page

To restart a streaming session without refreshing the entire webpage, follow these steps:

Generate a new token
Pass it to the controller’s main() function again

Example:

JS

const tokenData = await GenerateStreamingSessionToken();
e3ds_controller.main(tokenData);

Use cases include:

Restarting the stream after connection loss
Switching to a different configuration
Reconnecting the user after inactivity
Resetting the experience while staying on the same page

This provides a smoother UX compared to full page reloads.

Need help?

🛠️ Contact our Support Team

💬 Join the Community on Discord

🆓 Get Started for free

Follow us on:

Facebook | GitHub | LinkedIn | YouTube