Deployment#

The Tokkio UI can be deployed:

  • In the Tokkio Kubernetes cluster

  • Locally using Docker

  • From source code

For those just getting started, the easiest way to use the UI is to connect to the UI from the Tokkio deployment.

For those who want to quickly try out the UI configuration options without rebuilding the helm chart, it is recommended to run the UI locally using Docker.

For those who want to modify the UI source code, it is recommended to run the UI locally from source code.

Kubernetes Deployment#

The UI will be deployed alongside the rest of the Tokkio deployment in the same Kubernetes cluster by default. If Tokkio running in a Kubernetes cluster, the UI can be opened in your browser at the URL https://<cluster IP>:30111.

Docker Deployment#

Prerequisites#

See Before running the UI locally using Docker for the prerequisites for running the UI locally using Docker.

Setting up Chrome Flags#

Follow the instructions in Setting Browser Flags for Insecure Connections to add the browser flags.

Running the Docker Container#

  1. Create a file named .env with configuration for the UI connection to the Tokkio deployment. <cluster IP> is the public IP address of your Kubernetes cluster.

    INGRESS_ENDPOINT=http://<cluster IP>:30888
VST_WEBSOCKET_ENDPOINT=ws://<cluster IP>:30888/vms/ws
ACE_CONTROLLER_WEBSOCKET_ENDPOINT=ws://<cluster IP>:30888/ace/ws

  2. (optional) To the same .env file, set any other configuration options as environment variables for the UI. See Parameters for the list of available configuration.

  3. Run the Docker image:

    docker run -d --env-file .env --name tokkio-ui -p 3000:3000 nvcr.io/nvidia/ace/tokkio-ui:6.5.8-beta

  4. Since we are accessing the backend over HTTP, we need to add browser flags to allow insecure connections. Follow the instructions in Setting Browser Flags for Insecure Connections to add the browser flags.

  5. The UI can be accessed in your browser at https://<host IP>:3000, where <host IP> is the IP address of the host machine running the Docker container. Note that the UI must be opened on https, not http.

Source Code Deployment#

Prerequisites#

See Before running the UI locally from source code for the prerequisites for running the UI locally from source code.

Downloading the UI Source code#

First, pull the source code from the public NGC offering:

ngc registry resource download-version "nvidia/ace/tokkio-ui-source-code:6.5.8-beta"

Next, unzip the source code and navigate to the source directory:

cd tokkio_ui_source_v6.5.8-beta
tar -xvzf tokkio-ui-source.tar.gz
cd tokkio-ui

Installing the UI Dependencies#

cd vst-streaming-lib
npm install
npm run build
cd ..
npm install

Pointing the UI to Your Tokkio Deployment#

By default, the UI will be configured to connect to the endpoint {window.location.hostname}:30443. Since it is unlikely that you will be running the UI source code on the same machine as the Kubernetes deployment, this will need to be changed to the endpoint of your Tokkio deployment.

  1. Open the src/config/config.js file.

  2. Change the ingress_endpoint variable near the top of the file to http://<cluster IP>:30888.

  3. Change the ace_controller_websocket_endpoint variable to ws://<cluster IP>:30888/ace/ws.

  4. Change the vst_websocket_endpoint variable to ws://<cluster IP>:30888/vms/ws.

Note

Notice that the protocol must change from https and wss to http and ws, and the port must change from 30443 (secure ingress port) to 30888 (unsecured ingress port). Both of these changes are necessary for the UI to connect from outside the cluster. These changes are necessary since the SSL certificate used by the Tokkio deployment is self-signed, and will be rejected by the browser unless the UI is also hosted over HTTPS using the same certificate.

Setting up Chrome Flags#

Follow the instructions in Setting Browser Flags for Insecure Connections to add the browser flags.

Starting the UI#

Start the UI by running the following command:

npm start

The Tokkio UI can be accessed in your browser at http://<UI host IP>:3000. Note that the UI must be opened on http, not https.

Appendix#

Setting Browser Flags for Insecure Connections#

When the UI is run outside the cluster, it is accessing the backend over HTTP. This is not secure, so we need to add browser flags to allow insecure connections. For the Chrome browser, this can be done by visiting the URL chrome://flags/#unsafely-treat-insecure-origin-as-secure. For the Edge browser, this will be edge://flags/#unsafely-treat-insecure-origin-as-secure. Many major browsers have a similar flag to enable the insecure connection.

In the text box of the flag, enter each of the insecure endpoints that are configured in the UI. If the UI is hosted over HTTP, the UI endpoint must also be added to the flag. Adding endpoints that are not being used is fine.

Copy the below text into the text box of the flag, updating <cluster IP> and <UI host IP> as necessary:

http://<cluster IP>:30888,ws://<cluster IP>:30888/vms/ws,ws://<cluster IP>:30888/ace/ws,http://<UI host IP>:3000

Then restart your browser using the button that appears in your browser after entering the text. The flags will be applied in all future browser sessions going forward, unless they are manually disabled.

On this page