Key Concepts

  1. API Key: Our endpoint require an API key which you can easily obtain by creating an account at Create an account. The API key makes it easier for you to track your usage and control who has access to Simli.

  2. Faces: All our available Avatar faces can be accessed through: Available Faces. We are continously adding new ones.

  3. simli-client: Stream PCM16 audio bytes to our SDK to start recieving media.

Start Building

1

API Key

In order to use our API you need to get your apiKey first. Create an account, log in and in your profile you can view your API Key.

2

Import simli-client

Import the simli-client package to your project.

npm install simli-client

Check on GitHub: simli-client

3

Initialize and start streaming

  1. Create a React ref and pass it to the video and audio
<video ref={videoRef} autoPlay playsInline ></video>
<audio ref={audioRef} autoPlay ></audio>
  1. Initialize SimliClient and pass in the video and audio ref
const simliClient = new SimliClient();

const SimliConfig = {
  apiKey: SIMLI-API-KEY,
  faceID: FACE-ID,
  handleSilence: true,
  videoRef: videoRef,
  audioRef: audioRef,
};

simliClient.Initialize(SimliConfig);
  1. Call start function to Setup WebRTC connection
simliClient.start();
  1. Stream audio using sendAudioData()

AudioData should be of type PCM16 and sample rate 16KHz

// Example: sending empty audio data
const emptyAudioData = new Uint8Array(6000).fill(0);
simliClient.sendAudioData(emptyAudioData);

If done successfully, you will recieve media to be rendered on your frontend.

4