| Panel | |
|---|---|
| panelIconId | atlassian-info | panelIcon | :
| Info | bgColor | #F4F5F7
Iframe Demo: https://iframe.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 Demoand check Embed Stream into Webpage using iframe and communicate with Unreal App.
...
Instructions
...
1
...
. Receiving data from the Unreal App to
...
the Webpage
In the UE app, if you send any json JSON object that doesn't contain include the type property, it will be catched caught by the window.e3ds.onEvent function.
You can send json a JSON object like the following:
| Code Block |
|---|
{"cmd":"run","room":"dining room"} |
To send JSON from your Unreal
...
project as a Pixel Streaming
...
response, add the Pixel Streamer Input to the Player Controller of your project with the Pixel Streaming Plugin enabled
...
in your
...
Project.
In
...
the blueprint where you want to set this up (Actor/Pawn),
...
create a function called Send Pixel Streaming Response and
...
define a string
...
variable named 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 the Pixel Streaming Response String and call the Send Pixel Streaming Response function on event where needed.
Example of a JSON object-:{"cmd":"run","room":"dining room"}
This will go in Pixel Streaming Response String variable.
...
Here, run is the event name. You can handle this event by setting an event listener like belowthe following:
| Code Block |
|---|
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 What you want choose to do next is upto up to you. You can always leave a message on our support center if If you have any questions regarding this, feel free to reach out to Support.
...
2
...
. Sending data from
...
the Webpage to the Unreal App
From Javascript client page:
...
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 The following is an example that retrieves Teleport value from the JSON string passed from the page:
...
...
FAQ
1. 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
...
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.
...