Connecting to the WebRTC stream

../../_images/ovas_api_banner_thin.png

Once you have a 200 status indicating that the stream is ready and a response body with:

  • ID of the streaming session

  • IP of the streaming Kit Application

  • source signaling port of the WebRTC stream

  • source media port of the WebRTC stream

You are ready to connect your client application to the WebRTC stream.

AppStreamer

We have created a React Component AppStreamer to allow web developers to embed interactive WebRTC streams from Kit Applications into their applications. It also has the ability for limited bi-directional messaging between the Kit Application and the client, alongside traditional methods such as REST, WebSockets and Message Queues.

The AppStreamer component is included in the omnivers-webrtc-streaming-library, distributed from NVIDIA’s npm repository.

.npmrc settings to access NVIDIA’s npm repository
registry=https://registry.npmjs.org
@nvidia:registry=https://edge.urm.nvidia.com:443/artifactory/api/npm/omniverse-client-npm/

Full documentation on how to use the AppStreamer component is outside the scope of this guide. However, we have a Web Viewer Sample git repo that walks through a sample client web application using the AppStreamer component to connect to a Kit Application stream.

Here are some pointers into the sample project to augment the provided instructions.

Using the Web Viewer Sample

The AppStreamer React Component is called by the AppStream React Component defined in /src/AppStream.tsx. It is the AppStream component that is embedded in the client app.

To configure an AppStreamer you must call its setup() method passing a properly configured streamConfig. You can see how this is being configured in the /src/AppStream.tsx. In particular the componentDidMount() method.

Follow the flow for the “local” streamConfig.source.

You must configure the URL for the Kit Application stream properly:

Example construction of a Kit Application stream url with values from the response body.
/* The arguments for specifying the stream location */
const url = `signalingserver=${serverIP}&signalingport=${signalingData.source_port}&mediaserver=${serverIP}
   &mediaport=${mediaData.source_port}&sessionid=${sessionId}`

/* Plus remaining arguments.  Backend is the streaming endpoint */
const url = `signalingserver=${serverIP}&signalingport=${signalingData.source_port}&mediaserver=${serverIP}
   &mediaport=${mediaData.source_port}&sessionid=${sessionId}&mic=0&cursor=free&server=&nucleus=""
   &resolution=${width}x${height}&fps=${fps}&autolaunch=true&backendurl=${backend}&terminateVerb=DELETE`

This URL must then be set in the streamConfig.urlLocation:

streamConfig = {
   source: 'local',
   videoElementId: 'remote-video',
   audioElementId: 'remote-audio',
   messageElementId: 'message-display',
   urlLocation: { search: url }
};
StreamConfig structure
StreamConfig: {
   audioElementId: string;
   messageElementId: string;
   source: "local";
   videoElementId: string;
   urlLocation: Location;
}

The streamConfig is part of StreamProps:

inline example StreamProps
AppStreamer.setup({
   streamConfig: streamConfig,
   onUpdate: (message: any) => this._onUpdate(message),
   onStart: (message: any) => this._onStart(message),
   onCustomEvent: (message: any) => this._onCustomEvent(message)
};
StreamProps specification
StreamProps: {
   authenticate: boolean;
   onCustomEvent: ((message) => void);
   onISSOUpdate: ((message) => void);
   onStart: ((message) => void);
   onStop: ((message) => void);
   onTerminate: ((message) => void);
   onUpdate: ((message) => void);
   streamConfig: StreamConfig;
}