Embed Stream into Webpage using iframe and communicate with unreal app

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

Instructions

We assume that your webpage contains a head and body section already.

Something like this :

<!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 this sample webpage here:
https://www.w3schools.com/html/ or https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

To embed the stream you first have to collect the simple embedding script from your Eagle 3D Streaming Control Panel :

Select the App and the Config from your Control Panel. (refer to this tutorial on App Selection and this one on Config Selection).

Image 1. **Standalone Apps** : **Generate URLs** : **Copy iFrame Script**

Click “copy iframe script” to copy the code in the clipboard.
Now paste this code anywhere inside the body section of the above code.

In my case it became like this:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

The output would be something like this:

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

If we modify it to something like this :

<!DOCTYPE html><html><head><title>Page Title</title></head><body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body></html>

Here is 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 simple it is to attach the streaming to an existing webpage.
A skilled knowledgeable web Front end guy can make it more precise and better looking.

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

To embed a meeting (host /guest ) you can look into these two buttons :

Image 5. **Generate Meeting URLs** : **Copy IframeScript**

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 options you have to add pixel streaming to your website through iframe:

HTML - refer to Communicate with your App from iframe - HTML
ReactJS - refer to Communicate with your App from iframe - React
Wordpress - refer to Integrating Streaming UI via iframe in a WordPress website

If you want to interact with the UE4 App inside stream then follow our advanced level of iframe implementation which comes with a demo too. Follow this 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 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

If you still need help, contact support to get your issue resolved quickly.

Submit a new request at E3DS support portal or send an Email at support@eagle3dstreaming.com.

Seek advice. Connect with others. Share your experiences. Join our lively Community Forum today.