​

SimliClient Documentation

SimliClient is a powerful tool for integrating real-time audio and video streaming capabilities into your web applications using WebRTC. This guide will walk you through the process of setting up and using SimliClient in your project.

​

Getting Started

​

Prerequisites

Before you begin, make sure you have:

1. A Simli account with an API key
2. Node.js and npm installed in your development environment

​

Installation

Install the simli-client package in your project:

npm install simli-client

​

Usage

​

Step 1: Import SimliClient

First, import the SimliClient class into your project:

import { SimliClient } from 'simli-client';

​

Step 2: Create HTML Elements

In your React component, create video and audio elements with refs:

import React, { useRef } from 'react';

function YourComponent() {
  const videoRef = useRef(null);
  const audioRef = useRef(null);

  return (
    <div>
      <video ref={videoRef} autoPlay playsInline></video>
      <audio ref={audioRef} autoPlay></audio>
    </div>
  );
}

​

Step 3: Initialize SimliClient

Create an instance of SimliClient and initialize it with your configuration:

const simliClient = new SimliClient();

const simliConfig = {
  apiKey: 'YOUR_SIMLI_API_KEY',
  faceID: 'YOUR_FACE_ID',
  handleSilence: true,
  videoRef: videoRef,
  audioRef: audioRef,
};

simliClient.Initialize(simliConfig);

Make sure to replace 'YOUR_SIMLI_API_KEY' with your actual Simli API key, and 'YOUR_FACE_ID' with the desired face ID for your application.

​

Step 4: Start the WebRTC Connection

Call the start method to set up the WebRTC connection:

simliClient.start();

​

Step 5: Send Audio Data

Once the connection is established, you can start sending audio data:

// Example: sending audio data (should be PCM16 format, 16KHz sample rate)
const audioData = new Uint8Array(6000).fill(0); // Replace with your actual audio data
simliClient.sendAudioData(audioData);

Ensure that your audio data is in PCM16 format with a 16KHz sample rate for optimal performance.

​

API Reference

​

SimliClient

​

Methods

• Initialize(config: SimliClientConfig): Initializes the SimliClient with the provided configuration.
• start(): Sets up the WebRTC connection and prepares for streaming.
• sendAudioData(audioData: Uint8Array): Sends audio data to the server.
• close(): Closes the WebRTC connection and cleans up resources.

​

SimliClientConfig

interface SimliClientConfig {
    apiKey: string;
    faceID: string;
    handleSilence: boolean;
    videoRef: React.RefObject<HTMLVideoElement>;
    audioRef: React.RefObject<HTMLAudioElement>;
}

​

Advanced Usage

​

Events

As of now the simliClient emits 3 events:

• connected when the data channel is open and ready to use
• disconnected when the data channel is closed
• failed when the webRTC connection fails to connect

simliClient.on('connected', () => {
    console.log('SimliClient is now connected!');
}); 

simliClient.on('disconnected', () => {
    console.log('SimliClient has disconnected!');
}); 

simliClient.on('failed', () => {
    console.log('SimliClient has failed to connect!');
}); 

​

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 the createPeerConnection method in the SimliClient class.

​

Troubleshooting

If you encounter issues:

1. Ensure your API key is correct and active.
2. Check that your audio data is in the correct format (PCM16, 16KHz).
3. Verify that you have the necessary permissions for accessing the user’s media devices.
4. Review the console logs for any error messages or warnings.

For more detailed examples and advanced usage, please refer to our GitHub repository or contact our support team.