Set Stream Quality in iFrame

This guide explains how to let users change Pixel Streaming quality from a webpage that uses an E3DS iFrame embed.

Instead of using the default settings control bar, a custom HTML UI can be added outside the iFrame to send quality commands directly to the stream.

Step 1. Add the Eagle 3D Streaming iFrame

First, embed the stream in your webpage.

HTML

<iframe
  id="iframe_1"
  src="https://connector.eagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate/iframe"
  height="80%"
  width="100%"
  allowfullscreen
  title="Unreal Stream"
></iframe>

Step 2. Create a JavaScript function to send the quality command

Add a JavaScript function that sends a message to the iFrame using postMessage().

JS

<script>
  function sendMessage(val) {
    let obj = {
      cmd: "setQualityPoint",
      value: val,
    };

    document
      .getElementById("iframe_1")
      .contentWindow.postMessage(JSON.stringify(obj), "*");
  }
</script>

This function sends a command named setQualityPoint along with the selected quality value.

Step 3. Add custom quality buttons

Create buttons on your webpage and connect them to the sendMessage() function.

HTML

<button onclick="sendMessage(1)">Ultra</button>
<button onclick="sendMessage(17)">High</button>
<button onclick="sendMessage(34)">Medium</button>
<button onclick="sendMessage(51)">Low</button>

When a user clicks one of these buttons, the selected quality value is sent to the Pixel Streaming iFrame.

Step 4. Use the correct quality values

Use the following values for each quality level:

Quality	Value
Ultra	1
High	17
Medium	34
Low	51

Note:

Lower value → higher quality
Higher value → lower quality

Step 5. Test the integration

Open the webpage in your browser and click the quality buttons.
The stream quality inside the iFrame should update based on the selected value.

Full Example Code

HTML

<html>
  <head>
    <title>Set Quality</title>
    <script>
      function sendMessage(val) {
        let obj = {
          cmd: "setQualityPoint",
          value: val,
        };

        document
          .getElementById("iframe_1")
          .contentWindow.postMessage(JSON.stringify(obj), "*");
      }
    </script>
  </head>

  <body>
    <div>
      <button onclick="sendMessage(1)">Ultra</button>
      <button onclick="sendMessage(17)">High</button>
      <button onclick="sendMessage(34)">Medium</button>
      <button onclick="sendMessage(51)">Low</button>
    </div>

    <div>
      <iframe
        id="iframe_1"
        src="https://connector.eagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate/iframe"
        height="80%"
        width="100%"
        allowfullscreen
        title="Unreal Stream"
      ></iframe>
    </div>
  </body>
</html>

Video Guide

https://youtu.be/AlXZA-A6K3E

Need help?

🛠️ Contact our Support Team

💬 Join the Community on Discord

🆓 Get Started for free

Follow us on:

Facebook | GitHub | LinkedIn | YouTube