📨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:


2. Sending Messages to Unreal Engine:

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


    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

4. Blueprint Configuration:

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

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

Last updated