Toggle Fullscreen Using SDK

This guide explains how to toggle fullscreen mode for your Pixel Streaming session using the Eagle 3D Streaming SDK.

There are three ways to implement fullscreen toggling:

Inside the Unreal App (Blueprint): Refers to Toggle Fullscreen Using Blueprint guide.
Toggle Fullscreen in iFrame: Refers to Toggle Fullscreen Using iFrame guide.
Toggle Fullscreen Using SDK: covered in this guide.

Live Streaming URL:

Demo Project GitHub Repository:

https://github.com/e3ds/pixelstreaming-sdk

Follow the steps below:

Step 1. Add the Fullscreen Function

Add the following function inside your scripts_demo.js file:

JavaScript

function toggleStreamFullscreen() {
    console.log("Toggling fullscreen mode");

    e3ds_controller.toggleFullscreen();
}

Explanation

Code	Meaning
`function toggleStreamFullscreen()`	Creates a function to toggle fullscreen mode.
`console.log("Toggling fullscreen mode");`	Prints a message in the browser console for testing.
`e3ds_controller.toggleFullscreen();`	Calls the SDK function to enter or exit fullscreen mode.

Add the following button in your HTML page:

HTML

<button onclick="toggleStreamFullscreen()">Fullscreen</button>

Explanation

Code	Meaning
`<button>`	Creates a clickable button on the webpage.
`onclick="toggleStreamFullscreen()"`	Calls the fullscreen function when the button is clicked.
`Fullscreen`	Text shown on the button.

After adding the function and button:

You can also open the browser console and check the log:

Toggling fullscreen mode

This confirms that the fullscreen function is being triggered from the frontend.

Live Streaming URL:

Fullscreen must be triggered by a user action, such as a button click.

Some browsers may block fullscreen if the function is called automatically without user interaction.

Issue	Possible Cause	Solution
Fullscreen button does nothing	Function name mismatch	Make sure the button calls the correct function name: `toggleStreamFullscreen()`
`toggleStreamFullscreen is not defined`	Function is not added or not loaded properly	Add the function in `scripts_demo.js` and make sure the file is linked correctly
`e3ds_controller is not defined`	SDK is not loaded yet	Make sure the SDK is loaded before calling `e3ds_controller.toggleFullscreen()`
Fullscreen is blocked	Browser requires user interaction	Trigger fullscreen only from a button click
Fullscreen exits immediately	Browser or device fullscreen restriction	Test in another browser or check browser fullscreen permissions

If you need any assistance, feel free to reach out through any of the following channels:

🛠️ Support Portal: Contact Our Support Team

💬 Discord Community (Faster Support): Join Our Discord Community

Facebook | GitHub | LinkedIn | YouTube