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) => {

  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
    Application.getApplicationResponse((response) =>

    // Append the application's root element to the video container ref
    if (videoContainerRef?.current) {
  }, []);
  // console.log("applicationResponse", applicationResponse);

  return (
        style={{ width: "100vw", height: "100vh" }}
          position: "absolute",
          right: "100px",
          bottom: 20,
          margin: "auto",
          zIndex: 9,
          width: "200px",
        onClick={() => handleSendCommand({ test: "Send command" })}
        Emit command to Unreal

export default App;

Last updated