Quick Start

import { AvatarKit, Environment, DrivingServiceMode } from '@spatialwalk/avatarkit'

await AvatarKit.initialize('your-app-id', {
  environment: Environment.cn, // or Environment.intl, Environment.test
  drivingServiceMode: DrivingServiceMode.sdk, // Optional, 'sdk' is default
  // - DrivingServiceMode.sdk: SDK mode - SDK handles WebSocket communication automatically
  // - DrivingServiceMode.host: Host mode - Host app provides audio and animation data
})

import { AvatarManager } from '@spatialwalk/avatarkit'

const avatarManager = AvatarManager.shared
const avatar = await avatarManager.load('character-id', (progress) => {
  console.log(`Loading: ${progress.progress}%`)
})

import { AvatarView } from '@spatialwalk/avatarkit'

const container = document.getElementById('avatar-container')
const avatarView = new AvatarView(avatar, container)

// Wait for first frame to render
await avatarView.ready

// Start real-time communication (SDK mode only)
await avatarView.avatarController.start()

import {
  AvatarKit,
  AvatarManager,
  AvatarView,
  Environment,
} from '@spatialwalk/avatarkit'

// 1. Initialize
await AvatarKit.initialize('your-app-id', {
  environment: Environment.cn,
})

// Set sessionToken (if needed, call separately)
AvatarKit.setSessionToken('your-session-token')

// 2. Load character
const avatarManager = AvatarManager.shared
const avatar = await avatarManager.load('character-id', (progress) => {
  console.log(`Loading: ${progress.progress}%`)
})

// 3. Create view
const container = document.getElementById('avatar-container')
const avatarView = new AvatarView(avatar, container)

// Wait for first frame to render
await avatarView.ready

// 4. Set up event listeners
avatarView.avatarController.onConnectionState = (state) => {
  console.log('Connection state:', state)
}

avatarView.avatarController.onConversationState = (state) => {
  console.log('Conversation state:', state)
}

// 5. Start real-time communication
await avatarView.avatarController.start()

// 6. Send audio data (SDK mode)
// ⚠️ Important: Audio must be 16kHz mono PCM16 format (ArrayBuffer)
// For detailed audio format requirements and resampling examples, see [API Reference - Audio Processing](/web-sdk/api-reference#audio-processing)
const audioData = new ArrayBuffer(1024) // Example: 16kHz PCM16 audio data
avatarView.avatarController.send(audioData, false) // Send audio data
// Call when audio ends to mark the end of current conversation round
avatarView.avatarController.send(new ArrayBuffer(0), true)

// 7. Clean up resources (if you no longer need the digital human SDK, you must clean them up)
avatarView.dispose()
AvatarKit.cleanup() // Clean up SDK global resources (only call if you no longer need the entire SDK)

import {
  AvatarKit,
  AvatarManager,
  AvatarView,
  Environment,
  DrivingServiceMode,
} from '@spatialwalk/avatarkit'

// 1. Initialize SDK with Host mode
await AvatarKit.initialize('your-app-id', {
  environment: Environment.cn,
  drivingServiceMode: DrivingServiceMode.host, // Host mode
})

// 2. Load character
const avatarManager = AvatarManager.shared
const avatar = await avatarManager.load('character-id', (progress) => {
  console.log(`Loading: ${progress.progress}%`)
})

// 3. Create view
const container = document.getElementById('avatar-container')
const avatarView = new AvatarView(avatar, container)
await avatarView.ready

// 4. Host Mode Workflow:
// ⚠️ IMPORTANT: In Host mode, conversationId is CRITICAL for data matching.
//    You MUST send audio data FIRST to get a conversationId,
//    then use that conversationId to send animation data.
//    Animation data with mismatched conversationId will be discarded.

// NOTE: The data variables below are placeholders. Replace them with your actual data.
const audioData = new Uint8Array(1024) // Example streaming audio data
const animationData = [] // Example streaming animation keyframes from your service
// Step 1: Send audio data first to get conversationId (automatically generates if starting new session)
const conversationId = avatarView.avatarController.yieldAudioData(audioData, false)
// Step 2: Use the conversationId to send animation data (REQUIRED - mismatched conversationId will be discarded)
if (conversationId) {
  avatarView.avatarController.yieldFramesData(animationData, conversationId)
}

// 5. Clean up resources
avatarView.avatarController.clear() // Clear all data and resources
avatarView.dispose()
AvatarKit.cleanup()