Embed Stream into Webpage using iframe and communicate with unreal app

akhikajol

akhikajol

To keep this tutorial super simple we will look into a very basic webpage.
We assume that your webpage contains a head and body section.

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>

You can find this sample webpage here: HTML Tutorial or W3Schools online HTML editor

To embed stream you first have to collect the simple embedding script from your enagle3dstrmaing Control Panel.

Select the app and the config from your Control Panel.

Image 1. STANDALONE APPS: GENERATE URLs

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>

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

In my case it became like this:

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

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

<iframe style=”visibility: visible;” id=”iframe_1″ src=”https://connector.eagle3dstreaming.com/v5/demo/CarConfigurator427_reimport/E3DS-Iframe-Demo” width=”800″ height=”600″ allow fullscreen style=”border: none;”></iframe>

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

</body></html>

If we modify it to something like this :

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

e3dstreaming.com/v5/demo/

CarConfigurator427_reimport/E3DS-Iframe-Demo” width=”800″ height=”600″ allow fullscreen style=”border: none;”></iframe>

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

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 :
GitHub - e3ds/E3DS-Iframe-Demo: Project demonstration for embedding UE Stream into iFrame and sending messages between UE and HTML using Eagle 3D Streaming's Messaging System.

Troubleshooting

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.

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>

Need help? Contact Support

if you still need help, contact Eagle 3D Streaming 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.

Related Documents