AIPlayer Set up

The setup process consists of next four steps.

• Step 1: Create AIPlayer object
• Step 2: Authenticate SDK user(returns failure if appId and userKey are not valid.)
• Step 3: Get the list of available AIs(returns error if not authenticated)
• Step 4: Initialize AIPlayer with the desired AI's name

1. Create AIPlayer object.

Create the AIPlayer object using its constructor.

const wrapper = document.getElementById("AIPlayerWrapper");
const AI_PLAYER = new AIPlayer(wrapper);

2. Authenticate SDK user

In order to use AIPlayer, user must go through the authentication process. The first authentication step is to obtain a UserKey. UserKey is a unique string generated by DeepBrain AI and should never be disclosed. Create JWT ClientToken on your server using this key and appId. After that, call asynchronous AI_PLAYER.generateToken() function with the created JWT ClientToken.

It is recommended to call this method as soon as possible in a network available state after app startup.

The result is delivered as JSON. It contains JWT token, token expiration date, and default AI model info. When the token expires, you can refresh the token by calling generateToken again.

const result = await AI_PLAYER.generateToken({ appId: appId, token: clientToken });
/* result
        {"succeed":true,
        "token":"eyJhbGciO...",
        "tokenExpire":1608032460152,
        "defaultAI":   {"ai_na...} */

3. Get the list of available AIs

Once the authentication is completed, AIPlayer holds the authentication info. Now, you can get available AI list by calling AIPlayer.getAIList() function. If the authentication is invalid or there are no available AIs associated with, the function returns {succeed: false}.

const result = await AI_PLAYER.getAIList();
/* result
    { "succeed":true,
      "ai":[{"aiName":"vida","aiDisplayName":"Vida","language":"en"},
      {"aiName":"bret","aiDisplayName":"Bret","language":"en"},
      {"aiName":"danny","aiDisplayName":"Danny","language":"en"},
      {"aiName":"samh","aiDisplayName":"Samh","language":"en"},
      {"aiName":"kang","aiDisplayName":"Kang","language":"ko"}]} */

4. Initialize AIPlayer with the desired AI

To show specific AI to the AIPlayer object, you need to initialize with the desired AI model. Call init(...) function with the AI name which you can get from the result of getAIList(). Put the name with size, position and speed to initialize AIPlayer. AIPlayer will start to load AI resources according to the parameters passed.

• Set the callback before you call 'init' to monitor the event, error and progress. Please refer this page and page.

  AI_PLAYER.onAIPlayerEvent = function (aiEvent) {
    // TODO: event handling 
    console.log("AI onAIPlayerEvent :", aiEvent);
  };

  AI_PLAYER.onAIPlayerLoadingProgressed = function (result) {
    // TODO: loading handling
    console.log("AI onAIPlayerLoadingProgressed :", result);
  };

  AI_PLAYER.onAIPlayerErrorV2 = function (aiError) {
    // TODO: error handling
    console.log("AI onAIPlayerErrorV2 :", aiError);
  };

• Initializing the AIPlayer with aiName, size, position, speed

  const result = await AI_PLAYER.init({
    aiName: "...", size: 1.0, left: 0, top: 0, speed: 1.0
  });

• Release the AIPlayer Object

  When you want to terminate or destroy AIPlayer, you must call release() to release the resource.

  AI_PLAYER.release();