React

The example below serves as a foundational template for your experimentation. You will find a sample of a test stream in operation running with React. Navigate through the HTML, CSS and Babel sections to understand the mechanics of the implementation. By selecting Edit on CodePen, you can further experiment with our WebSDK using your project's shareID in a fully interactive environment prior to integrating our solution into your application.

Code template

For a quick start, feel free to utilize the following code snippet as a template (App.js). It is pre-configured to assist you in beginning your project with ease.

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 ref
    if (videoContainerRef?.current) {
      console.log("appendChild");
      videoContainerRef.current.appendChild(Application.rootElement);
    }
  }, []);
  
  // console.log("applicationResponse", applicationResponse);

  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;