Source Code: https://github.com/e3ds/E3DS-Iframe-Demo

Live Demo: https://iframe.eagle3dstreaming.com/

In this tutorial we will guide you how you can embed streaming within your webpage. Follow the steps below:

Step 1. Select the app which you want to embed with your webpage.

Figure 1. Select the App

Step 2. Select a config.

Figure 2. Select a Config

Step 3. Copy Streaming iFrame Script.

Figure 3. Copy iFrame Script

Step 4. Now open any html editor and create a folder.

Figure 4. Create a Folder

Step 5. Create “index.html” file inside the folder.

Figure 5. Create index.html File

Step 6. Copy the code below and paste it inside index.html.

<html>
    <head>
        <title>Demo</title>
    </head>

    <body>
        <div>
           //paste the copied iFrame Script here
        </div>
    </body>
</html>

Figure 6. index.html File

Step 7. Now paste the copied iFrame script inside the `<div>` below.

Figure 7. Paste the iFrame Script

Step 8. Enable Keyboard Controls (W, A, S, D)

Add the following script to your HTML file (you can place it either inside the <head> section or just before the closing </body> tag):

<script>
  window.onload = function() {
      var iframe = document.getElementById('iframe_1');
      iframe.focus();
  };
</script>

Note:
Ensure your <iframe> element has the ID iframe_1 in your HTML.
This script ensures the iframe automatically receives focus when the page loads, allowing W, A, S, D keyboard controls to function properly.

Step 9. Run the page locally

Figure 8. Run the page locally

To learn how to communicate between Unreal app and the iFrame, follow this documentation:

Communication Between Unreal App and iFrame

To learn how to embed streaming within a React Webpage, follow this documentation:

Embed Streaming within React Webpage

Troubleshooting

1. Mobile Autoplay

Enabling autoplay in iframe embedded system may create an issue in mobile. If you face such issues then first disable autoplay and see if that solves the issue or not.

2. Unresponsive Keyboard

If the keyboard does not work then it could be a focus issue. Please append the script from below and see if that helps or not.

<div id="content"   style="position: absolute;left: 0;right: 0;bottom: 0;top: 0px;" >
	<iframe id="iframe_1"                                               
		src="YOURURL_from_"
		width="100%" height="100%" allowfullscreen>
	</iframe>
</div>
           
           
<script>
    setInterval(function () {
        $('#iframe_1').focus();
    }, 1000);
</script>

3. Quality of the stream in iFrame

The Quality of the stream drops after embedding the App URL in iFrame.

You can set a custom resolution by increasing the width and the height from iFrame. See this document.

4. XR Session Permission

If xr permission is not exclusively added in the iframe tag you might get this error:
SecurityError: Failed to execute 'isSessionSupported' on 'XRSystem': Access to the feature "xr" is disallowed by permissions policy.
If your app requires uses XR or you would like to get rid of this error message add the required permission in your html page like this:

<iframe
  allow="xr-spatial-tracking *; camera *; microphone *"
  style="visibility: visible;"
  id="iframe_1"
  src="your app URL"
  width="100%"
  height="100%"
  allowfullscreen
>
</iframe>

Need help?

🛠️ Contact our Support Team

💬 Join the Community on Discord

🆓 Get Started for free

Follow us on:

Facebook | GitHub | LinkedIn | YouTube

Embed Streaming within HTML Webpage