Communicate with your App from iframe

Iframe Demo: https://iframe.eagle3dstreaming.com/

ReactJS Iframe Demo: https://iframe_react.eagle3dstreaming.com/

UE5 Iframe Demo : https://iframe_ue5.eagle3dstreaming.com/

Unreal project source code used in the demo : https://bitbucket.org/Eagle3DStreaming/e3dsfeaturestemplate/

More detailed documents :

Refer to Multiplayer Demo and check Embed Stream into Webpage using iframe and communicate with Unreal App.

Overview

Part-1 :
Receiving data from Unreal App to webpage

From UE4 App, if you send any json object that doesn't contain type property, it will be catched window.e3ds.onEvent function.

You can send json object like the following:

{"cmd":"run","room":"dining room"}

To send JSON from Unreal Project and send as Pixel Streaming Response, add the Pixel Streamer Input to the Player Controller of your project with Pixel Streaming Plugin enabled for your project.

In your blueprint where you want to set this up (Actor/Pawn), Create a function called Send Pixel Streaming Response and create a string Variable Pixel Streaming Response String. In the function you can retrieve the reference of the Pixel Streaming Component from the Player Controller using the Actor > Get Component by the Class node. Click the Component Class input, and look for the PixelStreamingInputComponent in the list. Set the JSON response you want to send in Pixel Streaming Response String and call the Send Pixel Streaming Response function on event where needed.
Example JSON object-
{"cmd":"run","room":"dining room"}

This will go in Pixel Streaming Response String variable.

<br><br>

Here, run is the event name. You can handle this event by setting an event listener like below:

window.e3ds.onEvent("run", (data) => {
	console.log("Raven is running in the " + data.room);
});

The above code will just print, Raven running in the dining room.

Now, what you want to do is upto you. You can always leave a message on our support center if you have any questions regarding this.

Part-2 :
Sending data from webpage to Unreal App

From Javascript client page:

let descriptor = {
		Teleport: "dining room"
	};
let obj = {
	cmd: "sendToUe4",
	value: descriptor
}
sendToMainPage(obj)


let obj = {
	cmd: "freezeResolutionAt",
	x: 800,
    y: 600
}
sendToMainPage(obj)

To catch this event on the Unreal Engine side, use Bind Event to OnPixelStreamingInputEvent node. You have to attach a UI Interaction node to the event field of Bind Event to OnPixelStreamingInputEvent. You need to bind this event once, typically at the start of your game.

Following is an example that retrieves Teleport value from the JSON string passed from the page:

Frequently Asked Questions

How do I add an element?

You can use DOM manipulation API of javascript to do so.
We have implemented an iframe as an example (Github link given on top). You can click increaseSessionTime to make that iframe visible. Check the /js/eventHandler.js file in the demo code from Github.
Check the following links and examples:
https://www.w3schools.com/js/js_htmldom.asp
https://www.w3schools.com/jsref/met_document_createelement.asp

Important links

• https://www.w3schools.com/js/js_htmldom.asp

• https://www.w3schools.com/jsref/met_document_createelement.asp

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.