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.
| Info |
|---|
Something like this :
|
...
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
Find this sample webpage here: |
To embed the stream you first have to collect the simple embedding script from your enagle3dstrmaing 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).
Click “copy iframe script” to copy the code in the clipboard.
Now paste this code anywhere inside the body section of the above code.
| Info |
|---|
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> |
The output would be something like this:
...
| Info |
|---|
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" allowfullscreen 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".
...
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
...
HTML - refer toCommunicate 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
| Tipinfo |
|---|
If you want to interact with the ue4 app UE4 App inside stream then follow our advanced level of iframe implementation which comes with a demo too. Follow this URL : |
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 Block |
|---|
<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.
...