Eagle 3D Streaming

Change Maps in an Unreal App from an Iframe

Owned by E3ds Common Dev
Last updated: Jun 27, 2024
4 min read

 

Demo Repository: https://github.com/e3ds/E3DS-Iframe-Demo

 

First, go to the GitHub repository and clone the repository:

git clone https://github.com/e3ds/E3DS-Iframe-Demo

Then, checkout demo-to-change-levels branch:

git checkout demo-to-change-levels

Then, go inside the E3DS-Iframe-Demo and open E3DS_Iframe_Demo.htm file. Inside, you will find an HTML iframe tag.

<iframe allow="camera;microphone" style="visibility: hidden" id="iframe_1" src="https://connector.eagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate_Arslan_Ship/E3DS-Iframe-Demo" width="100%" height="100%" allowfullscreen > </iframe>

Here, the value of src attribute refers to the streaming URL of your app.

Now, open the E3DS_Iframe_Demo.htm file in a web browser.

image-20240626-181500.png

Clicking on these two buttons will take you to different maps. To learn how it works open demo.js file inside js folder and find switchMap() function:

Here, iframe_1 is the id of the iframe tag. The descriptor gets sent to the unreal app.

Unreal Engine Blueprint setup

  1. Enable Pixel Streaming Plugin in your project

  2. Add a pixel streaming input component in the player controller

  3. Click on Pixel Streaming Input component, in the details panel navigate to events section and click on Input event

  4. It will create a node in the blueprints and copy the code below and paste in the event graph, it will add all the code required

Here’s a Visual Preview

image-20240627-171551.png

 

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.

Eagle 3D Streaming