Getting Started
Prerequisites
Before you begin, make sure you have:- A Simli account with an API key
- Node.js and npm installed in your development environment
Installation
Install thesimli-client
package in your project:
Usage
Step 1: Import SimliClient
First, import theSimliClient
class into your project:
Step 2: Create HTML Elements
In your React component, create video and audio elements with refs:Step 3: Initialize SimliClient
Create an instance of SimliClient and initialize it with your configuration:'YOUR_SIMLI_API_KEY'
with your actual Simli API key, and 'YOUR_FACE_ID'
with the desired face ID for your application.
If you’re using listenToMediastreamTrack() set
handleSilence: false
to avoid
audio artifactsStep 4: Start the WebRTC Connection
Call thestart
method to set up the WebRTC connection:
Step 5: Send Audio Data
Once the connection is established, you can start sending audio data:simli-client API reference
Methods
Initialize(config: SimliClientConfig)
: Initializes the SimliClient with the provided configuration.start()
: Sets up the WebRTC connection and prepares for streaming.close()
: Closes the WebRTC connection and cleans up resources.sendAudioData(audioData: Uint8Array)
: Sends audio data to the server.listenToMediastreamTrack(stream: MediaStreamTrack)
: Listens to a MediaStreamTrack and sends audio data to the server. Can be used as an alternative tosendAudioData
.ClearBuffer()
: Clears the audio buffer, best used when you want the avatar to stop talking.
Advanced Usage
Events
connected
when the data channel is open and ready to usedisconnected
when the data channel is closedfailed
when the webRTC connection fails to connectspeaking
when the avatar starts speakingsilent
when the avatar stops speaking
Error Handling
SimliClient provides console logging for various events and errors. It’s recommended to implement proper error handling in your application to manage potential issues, such as network disconnections or initialization failures.Customizing WebRTC Configuration
The SimliClient uses a default STUN server for ICE candidate gathering. If you need to use custom ICE servers or other WebRTC configurations, you may need to modify thecreatePeerConnection
method in the SimliClient class.
Fork and Contribute to simli-client
simli-client
Fork and contribute to the simli-client repository on GitHub or clone for your
own usecase.
Troubleshooting
If you encounter issues:- Ensure your API key is correct and active.
- Verify that your face ID is valid and associated with your account.
- Check that your audio data is in the correct format (PCM16, 16KHz).
- Verify that you have the necessary permissions for accessing the user’s media devices.
- Review the console logs for any error messages or warnings.