Minimal React component for Pureweb Unreal Engine pixel streaming

App.tsx

import {
  PlatformNext,
  UndefinedModelDefinition,
  DefaultStreamerOptions,
} from '@pureweb/platform-sdk';

import {
  useStreamer,
  useLaunchRequest,
  VideoStream,
} from '@pureweb/platform-sdk-react';

import { useState, useEffect, useReducer } from 'react';

// Parse query parameters
const query = new URLSearchParams(window.location.search);

// Initialize platform reference
const platform = new PlatformNext();
platform.initialize({ endpoint: 'https://api.pureweb.io' });

const App = () => {
  const streamerOptions = DefaultStreamerOptions;
  const [_, forceUpdate] = useReducer((x) => x + 1, 0);

  useEffect(() => {
    (async () => {

      await platform.useAnonymousCredentials(query.get('projectId') as string, query.get('environmentId') as string);
      await platform.connect();

      streamerOptions.iceServers = platform.agent.serviceCredentials.iceServers as RTCIceServer[];
      streamerOptions.forceRelay = false;

      const models = await platform.getModels();
      forceUpdate()
    })()
  }, []);

  const [status, launchRequest, queueLaunchRequest] = useLaunchRequest(platform, new UndefinedModelDefinition(), {});
  const [streamerStatus, emitter, videoStream, audioStream, messageSubject] = useStreamer(platform, launchRequest, streamerOptions);

    return (
      <VideoStream
          Emitter={emitter}
          Stream={videoStream}
          UseNativeTouchEvents={false}
          UsePointerLock={false}
          PointerLockRelease={true}
          Resolution={{
            maxWidth: 640,
            maxHeight: 480
          }}
        />
    );
};


export default App;