​
Overview

The JSSDK provides access to Akool Streaming Avatar services, enabling programmatic control of avatar interactions. You can connect and manage avatars in live sessions using WebSockets for seamless communication. This allows you to send text commands to avatars, enabling real-time speech with customizable voices. The JSSDK simplifies the creation, management, and termination of avatar sessions programmatically.

  • Vanilla javascript and light weight dependency files
  • Integrating interactive avatar just by one line js code
  • Handling avatar interactions and responses
  • Managing audio streams

The integration uses Agora’s Real-Time Communication (RTC) SDK for reliable, low-latency streaming and our avatar service for generating responsive avatar behaviors.

​
Prerequisites

​
Getting Started

1.To get started with the Streaming Avatar SDK, you just need one html page, and one div container:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Streaming Avatar SDK</title>
</head>
<body>
  <div id="app">
    <h1>Streaming Avatar Demo</h1>
    <div id="yourAvatarContainer" class="avatarContainer"></div>
  </div>
</body>
</html>
<style media="screen">
  #app {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
  }
  #app>div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
  }
</style>

2.Importing Streaming Avatar SDK and a few js code to access the interactive avatar stream.

  npm install @akool/streaming-avatar-sdk
  # or
  yarn add @akool/streaming-avatar-sdk

  import { StreamingAvatar,StreamEvents } from 'streaming-avatar-sdk'
  const myStreamingAvatar = new StreamingAvatar({ token: "your-api-token" })
  myStreamingAvatar.initDom('yourAvatarContainer')

or by vanilla js way

  <script src="https://cdn.jsdelivr.net/gh/pigmore/docs/streamingAvatar-min.js"></script>

  <script type="text/javascript">
    var myStreamingAvatar = new StreamingAvatar({ token: "your-api-token" })
    myStreamingAvatar.initDom('yourAvatarContainer')
  </script>
  • Then you will get the result:

​
Additional Resources

Streaming Avatar Integration: using Agora SDKStreaming Avatar SDK Best Practice