Messages to the front-end from Unreal Engine

Communication Bridge: Linking Unreal Engine to Your Website

Integrating ArcaneMirage Player in Your Website

Arcane Mirage provides a seamless way to communicate from the Unreal Engine project to the front-end of the website hosting the experience. Here's how you can establish this bidirectional communication:

1. Enable Event Passthrough:

First, in the embedded player (arcane-player), add the following attribute to allow events to pass through:

data-enable-events-passthrough="true"

2. Sending Messages to Unreal Engine:

To send events to UE, you can use the following code snippets:

ArcanePlayer.emitUIEvent('CustomUIEvent');

ArcanePlayer.emitUIEvent({
    event: 'CustomUIEvent',
    data: { test: 'test' }
});

3. Receiving Messages from Unreal Engine:

To listen and react to events from UE, implement this:

ArcanePlayer.onReceiveEvent('CustomUIEventResponse', (response) => {
    // custom code logic
    console.log(response);
});

4. Blueprint Configuration:

Ensure that blueprints inside your Unreal Engine project align with Unreal Engine's official documentation:

• Communication from UE5 to Player Page
• Communication from the Player Page to UE5

Example Implementations:

For those looking to integrate the ArcaneMirage player into your web applications, we offer example implementations using both React and plain JavaScript.

React Integration:

To kick off with the React example:

npm install
npm run build

Arcane Player Methods:

The Arcane Player offers a suite of methods to facilitate interaction:

• play(): Initiates the stream programmatically.

• emitUIEvent(descriptor): Enables sending events to UE. The descriptor can either be a string or an object.

• onReceiveEvent(name, listener): Adds listeners for events originating from UE.

• onPlayerEvent(name, listener): Sets up listeners for events from the player. Events can include: loading, ready, afkWarning, afkWarningDeactivate, and afkTimedOut.

For more in-depth information you can look at our github repository here: https://github.com/ArcaneMirage/ArcanePlayer