...
To embed stream you first have to collect the simple embedding script from your enagle3dstrmaing control panelControl Panel.
Select the app and the config from your Control Panel.
...
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
<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 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
| Tip |
|---|
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 : |
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.
| 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> |
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.