Eagle 3D Streaming

Embedding Stream into Webpage using iframe

Owned by Ahsan
Last updated: Sept 24, 2024 by Khaoula Bouhlali
4 min read

Embed your stream into a webpage using iframe and communicate with your Unreal Engine Application.

To keep this tutorial super simple we will look into a very basic webpage.

Instructions

We assume that your webpage already includes both a head and body section, similar to the following:

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>

Find the sample webpage here:
https://www.w3schools.com/html/ or https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

 

To embed the stream, follow the below instructions:

  1. First, collect the simple embedding script from your E3DS Control Panel:

-Select your App from 'Step 1: Select an App'.

-Select your Config from ‘Step 2: Select a Config’.

-Click ‘Copy iFrame Script’ from ‘Step 3: Generate URLs’ to copy the code in the clipboard.

image-20240516-143054.png
Image 1. Standalone Apps : Step 3:Generate URLs : Copy iFrame Script

  1. Paste the code below anywhere within the body section of the code provided above. In our case, it looks like the following:

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <iframe style="visibility: visible;" id="iframe_1" src="https://connector.eagle3dstreaming.com/v5/demo/CarConfigurator427_reimport/E3DS-Iframe-Demo" width="100%" height="100%" allowfullscreen style="border: none;"></iframe> <p>This is a paragraph.</p> </body> </html>

 

  1. The output will look something like the following:

Image 2. Standalone Apps: Paste this code anywhere inside the body section

  1. If we modify the code to something like:

<!DOCTYPE html><html><head><title>Page Title</title></head><body> <h1>This is a Heading</h1> <iframe style="visibility: visible;" id="iframe_1" src="https://connector.eagle3dstreaming.com/v5/demo/CarConfigurator427_reimport/E3DS-Iframe-Demo" width="800" height="600" allowfullscreen style="border: none;"></iframe> <p>This is a paragraph.</p> </body></html>

 

  1. The output will look something like the following:

We just modified the size to make the view of streaming viewport bigger by adding width="800" height="600".

This is how easy it is to integrate streaming into an existing webpage.
A skilled, knowledgeable front-end developer can refine it for better precision and aesthetics.

Embedding a meeting stream (Host/Guest) into the webpage

In your Control Panel:

  1. Select your App from ‘Step 1: Select an App’.

  2. Select your Config from ‘Step 2: Select a Config’.

  3. Click ‘Generate Meeting URLs’ in ‘Step 4: Generate Meeting URLs’.

  4. Click on 'Copy iFrame Script' on both the Host and Guest links.

Using VOIP via iFrame

To be able to use VOIP via iframe you have to add users microphone access permission to iframe

<iframe allow="camera;microphone" style="visibility: hidden;" id="iframe_1"

Here are the available options for adding pixel streaming to your website using an iframe:

  1. HTML. Refer to this document.

  2. ReactJS. Refer to this document.

  3. Wordpress. Refer to this document.

 

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.

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.

Need help? Contact Support

Submit a new request at E3DS support portal.

Requests sent on weekends will not be addressed until the following business day.

 

Eagle 3D Streaming