Fullscreen

Fullscreen makes the stream fill the viewer's whole screen. You can trigger it from your own web page (iframe or Web SDK) or from inside your Unreal app. All three end in the same place: the browser's fullscreen, which only works when the viewer has just clicked, tapped or pressed a key.

At a glance

Triggered fromWhat you callWorks on the production player today
iframethe browser's own requestFullscreen() on your iframe element (there is no fullscreen message to send the frame)Yes. The iframe needs allow="fullscreen".
Web SDKe3ds_controller.toggleFullscreen()Yes
Unrealthe plugin's E3DS toggle Fullscreen node, or Send Pixel Streaming Response {"cmd":"toggleFullscreen"}Yes. toggleFullscreen only (see troubleshooting).

How the calls travel

All three ways end in the browser's Fullscreen API. The Web SDK and Unreal go through the player's own fullscreen code, which also handles the iPhone. The iframe route goes from your page straight to the browser.

Demos

iframe

iframe demo: press Fullscreen. The demo calls requestFullscreen() on its iframe, so it keeps working after the session has ended. Demo manual.

Web SDK

Web SDK demo: press Fullscreen (toggleFullscreen()). Demo manual.

Unreal

A sample project with a fullscreen key.

Demo coming soon

How to do it

iframe

1. Allow fullscreen on the iframe. Without it the browser blocks fullscreen for everything inside the frame, including the player's own fullscreen button, which is then hidden.

<iframe id="e3ds"
  src="https://connector.eagle3dstreaming.com/v5/YOURNAME/YourApp/default"
  allow="fullscreen"></iframe>

2. Put your own button on your page and call the browser's Fullscreen API on the iframe element. There is no fullscreen message to post to the frame.

document.getElementById("myFullscreenButton").addEventListener("click", function () {
  var frame = document.getElementById("e3ds");
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    frame.requestFullscreen();
  }
});

Call it from the click handler itself. Browsers refuse fullscreen that does not come straight from a click, tap or key press.

When the request comes from your Unreal app, the player inside the frame does the fullscreen itself (it still needs allow="fullscreen"). Your page receives the same command as a message, if you want to react to it:

window.addEventListener("message", function (e) {
  if (e.data && e.data.cmd === "toggleFullscreen") {
    // the stream is going in or out of fullscreen
  }
});

Web SDK

One call. It enters fullscreen, or leaves it if the stream is already fullscreen. It also handles the iPhone, where only the video can go fullscreen.

document.getElementById("myFullscreenButton").addEventListener("click", function () {
  e3ds_controller.toggleFullscreen();
});

Call it from a click or tap handler. From a timer, or on page load, it does nothing and reports nothing.

It acts on the video in your page, not on the app, so it keeps working after the session has ended.

Unreal

With the E3DS Features plugin: add BP_E3DS_PS_Actor to your level. Then, from your trigger (a key's Pressed pin, or a button's On Clicked), call E3DS toggle Fullscreen. Get the plugin from the Features plugin page.

Without the plugin: add a PixelStreamingInput component to an actor and send this with Send Pixel Streaming Response:

{"cmd":"toggleFullscreen"}

The player receives it and toggles fullscreen.

Trigger it from the viewer's input. The browser grants fullscreen only for a few seconds after a click, tap or key press. A key press reaches your app and the command comes back well within that time. Fullscreen from a timer, level load or game event that the viewer did not cause is refused.

If your stream is embedded in someone's page, their iframe needs allow="fullscreen" for this to work.

Troubleshooting

What you seeWhyWhat to do
Nothing happens, and no messageThe call did not come from a click, tap or key press: a timer, page load, or a game event the viewer did not cause.Call it from the click handler, or from the app in response to the viewer's input.
Red message "Fullscreen was refused. If this page is embedded, the iframe needs allow="fullscreen"."The stream is in an iframe without the permission.Add allow="fullscreen" to the <iframe> and reload.
The player's fullscreen button is missingEither the iframe has no allow="fullscreen", or the device is an iPhone, where the button is hidden by default.See the fullscreen button settings.
iPhone: fullscreen works but the viewer cannot click anythingiPhone cannot make a page fullscreen, only the video, and it plays it in Apple's own video player, which takes all taps.Expected. Use it for streams people watch, not ones they interact with.
iPhone: your iframe button does nothingiPhone Safari has no requestFullscreen() for an iframe.Use the Web SDK (it switches to video fullscreen), or the player's own button.
Unreal: {"cmd":"enterFullscreen"} or exitFullscreen does nothingThe player lists these commands, but the production player has no code behind them.Use toggleFullscreen.
Unreal: the plugin node does nothingBP_E3DS_PS_Actor is not in the level, or the viewport did not have focus, so the key never reached the app.Add the actor; click into the stream first.

Last updated