React

Attention: "Please make sure in a production environments to never pull with latest tag but to pin the exact version"

The example below demonstrates how to integrate the Arcware Pixel Streaming WebSDK into a React application.

It serves as a basic reference implementation showing how to:

• initialize the WebSDK

• attach the stream to a React component

• send UI interactions from the web application to Unreal Engine

• receive responses from the Unreal application

You can experiment with this example directly using CodePen:

Open the React example on CodePen

Replace the example shareId with your own project's Share ID to connect to your application.

---

Code Template

For a quick start, you can use the following App.js template. It demonstrates a minimal React integration of the WebSDK.

import "./App.css";
import { ArcwareInit } from "@arcware-cloud/pixelstreaming-websdk";

import React, { useState, useRef, useEffect } from "react";

function App() {
  const videoContainerRef = useRef(null);
  const [arcwareApplication, setArcwareApplication] = useState(null);
  const [applicationResponse, setApplicationResponse] = useState("");

  const handleSendCommand = (descriptor) => {
    arcwareApplication?.emitUIInteraction(descriptor);
  };

  useEffect(() => {
    const { Config, PixelStreaming, Application } = ArcwareInit(
      {
        shareId: "<your-shareId-goes-here>"
      },
      {
        initialSettings: {
          StartVideoMuted: true,
          AutoConnect: true,
          AutoPlayVideo: true
        },
        settings: {
          infoButton: true,
          micButton: true,
          audioButton: true,
          fullscreenButton: true,
          settingsButton: true,
          connectionStrengthIcon: true
        }
      }
    );

    setArcwareApplication(Application);

    Application.getApplicationResponse((response) =>
      setApplicationResponse(response)
    );

    // Append the application's root element to the video container
    if (videoContainerRef?.current) {
      videoContainerRef.current.appendChild(Application.rootElement);
    }
  }, []);

  return (
    <div>
      <div
        ref={videoContainerRef}
        style={{ width: "100vw", height: "100vh" }}
      />

      <button
        style={{
          position: "absolute",
          right: "100px",
          bottom: 20,
          margin: "auto",
          zIndex: 9,
          width: "200px"
        }}
        onClick={() => handleSendCommand({ test: "Send command" })}
      >
        Emit command to Unreal
      </button>
    </div>
  );
}

export default App;

---

How This Example Works

This React example performs the following steps:

1. Initialize the WebSDK

The ArcwareInit function creates the necessary SDK components:

• Config – configuration object

• PixelStreaming – streaming controller

• Application – application interaction layer

---

2. Attach the Stream to the React Component

A React ref (videoContainerRef) is used to mount the stream container.

The SDK exposes a DOM element via:

Application.rootElement

This element contains the video stream and input handling.

---

3. Receive Messages from Unreal Engine

The function:

Application.getApplicationResponse()

allows the web application to receive responses or messages sent from the Unreal Engine application.

---

4. Send Messages to Unreal Engine

User interactions can trigger messages to Unreal Engine using:

Application.emitUIInteraction()

In the example, clicking the button sends a simple test command.

---

Notes

• Replace <your-shareId-goes-here> with your own Share ID.

• The stream container should always be mounted using a React ref to ensure correct lifecycle handling.

• The useEffect hook ensures the stream is initialized only once when the component mounts.