Setting up your Frontend

Integrating a custom frontend with StreamPixel, using JavaScript to embed the player and establish communication between your frontend and the Unreal Engine application.

Step 1: Adding the Player to Your Custom Frontend

To integrate the player into your custom frontend:

Insert the Player Using an iframe:

• In your frontend, embed the StreamPixel player using an iframe.

• Set the src attribute of the iframe to the shareable link obtained from your StreamPixel project page.

javascriptCopy code<iframe
    id="streamPixelPlayer"
    src="YOUR_SHAREABLE_LINK_HERE"
    width="100%"
    height="100%"
    frameborder="0"
    allowfullscreen>
</iframe>

Replace YOUR_SHAREABLE_LINK_HERE with the actual link from your StreamPixel project page.

---

Step 2: Setting Up Communication Between Frontend and Application

For your custom frontend to interact with the application running on StreamPixel, you’ll need to send and receive messages using JavaScript.

Listening for Messages from the Application:

Use the window.addEventListener method to listen for messages sent from the application running in the iframe.

javascriptCopy codewindow.addEventListener('message', (event) => {
    console.log(event.data);
    // Handle the incoming message here
});

This event listener will log the message data received from the application, allowing you to handle it as needed within your custom frontend.

Sending Commands to the Application:

To send a command or message back to the application, use the postMessage method.

Here’s how you can send a message to the application inside the iframe:

javascriptCopy codeconst handleSendCommand = (message) => {
    message = { test: "Send command" }; // Customize this message as needed
    const iframe = document.getElementById('streamPixelPlayer');
    if (iframe) {
        iframe.contentWindow.postMessage(message, '*');
    }
};

You can call handleSendCommand with your custom message to send data to the application running inside the iframe.

---

Step 3: Configuring Unreal Engine to Handle Messages

In Unreal Engine, the blueprint is set up to handle incoming messages and send responses. Here's a step-by-step explanation based on the blueprint:

Bind Event to Input:

The blueprint binds an event to the input received from the Pixel Streaming client. This setup ensures that any message sent from the frontend will trigger a specific event in the Unreal Engine application.

Process Incoming JSON Messages:

Use the Get JSON String Value node to extract specific fields from the incoming message. In the blueprint, the "message" field is being extracted and processed.

Conditional Logic:

A Branch node is used to handle different messages based on the extracted value. This allows you to execute different actions within the application based on the message content.

Send Response Back to Frontend:

The Send Pixel Streaming Response node is used to send a response back to the frontend after processing the message. This could be a confirmation message or any other data the frontend needs.

javascriptCopy code// Example of how to structure a response message in Unreal Engine
const responseMessage = { success: true, data: "Response from UE" };