Merging our template client components and resources into a custom client

Our client template consists of a number of reusable react components and resources that can easily be taken from the client template and incorporated into a custom application. What follows is a quick set of steps to help you get started.

Prerequisites: 

The client template folder contains two files:

calgaryscientific-platform-sdk-v1.4.5.tgz
calgaryscientific-platform-sdk-react-v1.4.5.tgz

Both of these files are required when building a react application that leverages the PureWeb platform, and should be added to your custom client package.json file as follows:

"dependencies": {

   "@calgaryscientific/platform-sdk": "file:./calgaryscientific-platform-sdk-1.4.5-npm.tgz",

   "@calgaryscientific/platform-sdk-react": "file:./calgaryscientfic-platform-sdk-react-1.4.5-npm.tgz",

Key Steps to Replicate

Obtaining platform credentials and available model Definitions

The PureWeb platform by default allows for anonymous access to models (aka games). While more refined access is possible, getting started is as easy as calling on useAnonymousCredentials with your project id, as shown in the following code, and then querying the list of models in the project. In most cases, the models array that results from platform.getModels() will contain a single model definition, which will be used in the next key step.

    try {

       await platform.useAnonymousCredentials(clientOptions.ProjectId);

       const models = await platform.getModels();

     } catch (err) {

       console.error(err);

     }

Using a model definition to launch a model, and track the progress of that launch.

With credentials in place, and your model definition ready, you can use our useLaunchRequest Hook to obtain objects that relate to the status of the request (status), a function that can be used to trigger the request (queueLaunchRequest), and a signalling connection (signallingConnection), to be passed to the streamer if the launch was successful.

const [

  status, 

  queueLaunchRequest, 

  signallingConnection

] = useLaunchRequest(platform, modelDefinition);

Creating a streamer for a successfully launched model

The streamer hook allows you to stream and communicate with the launched game. Passing the signalling connection from the launch request (along with some options), you obtain an object to provide the status of the streamer (streamerStatus), an event emitter that can be used to send messages to the game (emitter), video and audio streams that are used to present the game stream (videoStream, audioStream), and a message object, which can used to listen to messages from the game (messageSubject) 

const [streamerStatus, emitter, videoStream, audioStream, messageSubject] = useStreamer(signallingConnection, streamerOptions);

Creating a View to present the streamer

The client template provides an example of a streamer view, in the form of the EmbedView component. This component only needs to be wired up with the outcomes from the two hooks above:

 <EmbeddedView

       VideoStream={videoStream}

       StreamerStatus={streamerStatus as StreamerStatus}

       LaunchRequestStatus={status}

       SignallingConnection={signallingConnection as ISignallingConnection}

       InputEmitter={emitter}

       UseNativeTouchEvents={clientOptions.UseNativeTouchEvents}

     />