Putting a login in front of a stream

Put a login in front of your Eagle 3D Streaming stream, so only the people you choose can reach it. The pattern is the same for the Web SDK and the iframe: check the login on your server first, and only then give the page what it needs to start the stream.

The flow

  1. The visitor lands on your login page. Your page, your design, entirely separate from the stream.
  2. Your server checks the username and password. Not the browser: anything decided in the browser can be changed in the browser.
  3. On success your server answers with what starts the stream — the streaming URL for an iframe, or a fresh session token for the Web SDK.
  4. The page starts the stream with it: sets the iframe's src, or calls e3ds_controller.main().
  5. On a wrong password the server answers “no” and the page has nothing to start a stream with.

What each method protects

iframeWeb SDK
What the page receives after a correct loginThe streaming URLA session token
Can a signed-in viewer pass it on?Yes — the URL keeps working for anyone who has itNo — the token is single use and expires within a minute
Streaming API keyNot usedStays on your server; never sent to the browser
Can you cut off one person?Only by changing the link for everyoneYes — stop issuing them tokens
Good forKeeping a link away from people who have not signed inPer-person access that survives someone reading your page source

With an iframe the link itself is what grants access, so a login protects the link until someone who has signed in shares it. If that matters, add Password Protect Stream on the configuration as a second lock, or use the Web SDK, where your server decides who gets a token, when, and for which app. API keys and session tokens covers what each credential is and how long it lives.

Try it: two working examples

Both demo repositories have a login-example branch with the smallest version of this that is still built the right way: a Node.js server (Node 18 or newer, no packages to install) that keeps the users in a JSON file on the server and answers the login.

iframeWeb SDK
Repository E3DS-Iframe-Demo, branch login-example pixelstreaming-sdk, branch login-example
On a correct login the server returns{ ok: true, streamUrl }{ ok: true, tokenData, client } — it asks Eagle for the token itself
The page thensets iframe.src = streamUrlcalls e3ds_controller.main({ ...tokenData, client })
Your settings (copy config.example.json to config.json)the streaming URLyour Streaming API key and which app to start
 
git clone -b login-example https://github.com/e3ds/E3DS-Iframe-Demo.git
cd E3DS-Iframe-Demo
node login/server.js
# open http://localhost:3000 and sign in as demo / demo123

For the Web SDK version, clone pixelstreaming-sdk the same way, copy login/config.example.json to login/config.json and put your Streaming API key and app in it first.

How the example checks a login

// The page sends what the visitor typed to YOUR server ...
const response = await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username, password })
});
const answer = await response.json();

// ... and only a correct login comes back with something to start the stream.
if (answer.ok) {
    document.getElementById('streamFrame').src = answer.streamUrl;          // iframe
    // e3ds_controller.main({ ...answer.tokenData, client: answer.client }); // Web SDK
}

Last updated