Embedding Stream into Webpage using iframe

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:

CODE

<!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:

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 1. **Standalone Apps** : **Step 3:Generate URLs** : **Copy iFrame Script**

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

CODE

<!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>

The output will look something like the following:

If we modify the code to something like:

CODE

<!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>

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".

Image 3. **Standalone Apps** : 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.

*Image 4. Code in the clipboard : interface change*

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

In your Control Panel:

Select your App from ‘Step 1: Select an App’.
Select your Config from ‘Step 2: Select a Config’.
Click ‘Generate Meeting URLs’ in ‘Step 4: Generate Meeting URLs’.
Click on 'Copy iFrame Script' on both the Host and Guest links.

image-20240516-150117 (1).png — Image 5. **Step 4:** **Generate Meeting URLs** : **Copy IframeScript**

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:

HTML. Refer to this document.
ReactJS. Refer to this document.
Wordpress. Refer to this document.

To interact with the UE App inside the stream, follow our advanced level of iframe implementation which comes with a demo as well. Follow the below URL:

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

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.

CODE

<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.

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.