A manual for the running Eagle 3D Streaming Web SDK demo. No account, no key, nothing to download — open the page and every control described here is in front of you. When you want the code, there is one link at the bottom.
Notice that the panel fills in rather than appearing complete. That is deliberate, and it is the first real thing this demo teaches: a control that cannot work yet is not shown yet. There are three levels.
| Appears | Needs | Which controls |
|---|---|---|
| Always | nothing | Restart, Connection settings |
| Once there is a session | a video element to act on | Volume, Fullscreen, Screenshot, Terminate stream |
| Once the data channel is open | a two-way link to the application | everything that sends the app a message — quality, resolution, diagnostics, and the app's own buttons |
Features API › End the session: the same from your own page (iframe or Web SDK) or from your Unreal app, with demos and troubleshooting.
Features API › Volume: the same from your own page (iframe or Web SDK) or from your Unreal app, with demos and troubleshooting.
Features API › Fullscreen: the same from your own page (iframe or Web SDK) or from your Unreal app, with demos and troubleshooting.
The distinction matters when a stream ends. Volume and Fullscreen keep working after the data channel closes, because they act on the video element in your page. Anything that has to tell the application something stops, because there is no longer anything to tell.
| Control | What it does |
|---|---|
| Quality: Low / Medium / High / Ultra | Changes how hard the encoder tries. Watch the picture sharpen and the bitrate climb as you go up. Give each one a few seconds — the encoder is being asked to change, not told. |
| 1920 × 1080 and 800 × 600 | Pins the stream to a fixed size, whatever your window is doing. |
| Match window Resolution | Releases the pin and follows your browser window again. This is the default behaviour, so it is also how you undo the two above. |
| Control | What it does |
|---|---|
| Fullscreen | The stream fills the screen. One call handles the platform differences, including iOS, where only the video element is allowed to go fullscreen at all. |
| Screenshot | Captures the current frame from the video element and downloads it. Browser-side — the application is not involved and does not know it happened. |
Volume is a slider rather than a button because it is a range, and it acts on the video element in your page — not on the application. Sliding it to zero silences your end; the application carries on producing audio exactly as before.
| Control | What it does |
|---|---|
| Show FPS | Sends the Unreal console command stat fps. The counter
that appears is drawn by the application, inside the picture
— which is why it is in the stream and in a screenshot. |
| Show streaming graphs | The transport's own numbers: bitrate, packet loss, latency. Useful when the picture looks wrong and you want to know whether the problem is the network or the application. |
| Control | What it does |
|---|---|
| Restart | Ends this session and starts a fresh one. Available even before a stream exists, because it is also how you recover from a session that never started. |
| Terminate stream | Ends the session deliberately. The machine is released. Nothing reconnects on its own — use Restart for that. |
| Connection settings | Point the demo at a different application. See below. |
Opens a dialog holding a Streaming API key, a username and an application name. Filling them in points the demo at your application instead of the demo's, and what you type is saved in your browser only.
It is worth opening even if you do not change anything, because it shows the three values every integration needs — and because the note inside it is the most important sentence on the whole page: a key typed into a web page can be read by anyone with developer tools open. Fine for a demo. Not fine in production, where your server holds the key and hands the page only a session token.
Every button is one SDK call. This is the bridge between playing with the demo and writing the code — and the reason the panel is worth reading as documentation rather than just clicking.
| Control | The call behind it |
|---|---|
| Quality: Low … Ultra | setVideoDetailLevel(level) |
| 1920×1080, 800×600 | setResolution(w, h) |
| Match window Resolution | useViewportResolution() |
| Fullscreen | toggleFullscreen() |
| Screenshot | captureScreenshot() |
| Volume | setVolume(0–1) |
| Show FPS | sendConsoleCommandToUE("stat fps") |
| Character, Skin | sendDataToUE({ … }) — your own message |
| Terminate stream | terminate() |
Note the three different kinds in that list. setVolume never
leaves your page. sendConsoleCommandToUE reaches the engine.
sendDataToUE reaches your code and does whatever you
wrote. The reference covers each in
full.
Last updated