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

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>

<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

Here is just modified the size to make the view of streaming viewport bigger by 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.

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

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

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>

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.

E3DS Documents & Tutorials

Embed Stream into Webpage using iframe and communicate with unreal app