The Unreal side of sending and receiving data

Your page sends the message. This is what has to exist inside the Unreal application for it to arrive — and how the application sends one back. It is the same in Unreal whether the page uses the Web SDK or an iframe.

The one component everything depends on

An Unreal actor cannot send or receive Pixel Streaming messages by default. It needs a Pixel Streaming Input component, and adding it is what turns the feature on for that actor.

  1. Open the Actor Blueprint that should handle the message.
  2. Press Add Component in the Components panel.
  3. Add Pixel Streaming Input.
The Unreal Components panel of a GameMode Blueprint, Add pressed and Pixel Streaming Input found by searching
Add the Pixel Streaming Input component. A GameMode Blueprint, or one message-handling actor in every level, keeps it in one place.

Page → Unreal: receiving a message

Adding the component gives the actor a new event, On Input Event. It fires every time your page sends with sendMessageToStreamingBuild, and its Descriptor pin holds the message as a string.

  1. Select the Pixel Streaming Input component and press + next to On Input Event in the Details panel — or right-click in the Event Graph and search for On Input Event.
  2. Connect the Descriptor to whatever should act on the message.
Adding On Input Event: from the Details panel of the Pixel Streaming Input component, or by searching in the Event Graph
Two ways to add On Input Event.

The quickest first test: connect it to Print String. Send a message from your page and it appears on the screen of the stream.

On Input Event (PixelStreamingInput) with its Descriptor pin connected to Print String
On Input Event connected to Print String.
The message Player123 printed on the screen of the running app
The page sent "Player123" - it appears on screen.

Two kinds of message, and only one needs your code

This is the distinction that decides whether you need to build anything in Unreal at all.

What the page sendsWho handles itDo you write Unreal code?
sendConsoleCommandToUE the Unreal engine itself No. Console commands are built in.
sendCommandToUE the streaming platform No. Resolution and the like are handled for you.
sendMessageToStreamingBuild — your own messages your Blueprint or C++ Yes. Nothing listens until you write the listener.

So a stream where sendConsoleCommandToUE("stat fps") works perfectly and sendMessageToStreamingBuild({ Character: "Aurora" }) appears to do nothing is not broken. Those two take different paths, and only the second one needs something of yours at the far end.

Unreal → page: sending a message back

In the Blueprint where the event happens:

  1. Make sure the actor has the Pixel Streaming Input component, as above — it is needed in both directions.
  2. Right-click in the graph and add Send Pixel Streaming Response.
  3. Give it the string you want the page to receive.
A custom event SendMessage connected to Send Pixel Streaming Response, with the Pixel Streaming Input component as Target and Hello World From Unreal as Descriptor
Send Pixel Streaming Response: the component as Target, your message as Descriptor.

That is the whole Unreal side. The page receives it through one callback:

e3ds_controller.callbacks.onResponseFromUnreal = function (descriptor) {
  console.log("Message from Unreal:", descriptor);
};

If you are using an iframe instead

The Unreal side above is identical. The page side differs: you post a message to the frame as a JSON string, carrying one exact key.

const message = {
  cmd: "sendMessageToStreamingBuild",          // required, exactly this
  value: { message: "Hello World!" }
};
// Send it as a STRING. A plain object is dropped without an error.
document.getElementById("iframe_1").contentWindow
  .postMessage(JSON.stringify(message), "*");

Watch it being done

Sending a message from a web page to Unreal, end to end: Send a message from your webpage to Unreal with the SDK.

Related

Last updated