📦 Ainun SDK

SDK JavaScript/TypeScript untuk integrasi Ainun Stream dengan LiveKit. Memudahkan menampilkan video/audio karakter dan berkomunikasi via text/audio.

⚡ Fitur Utama

• Koneksi ke LiveKit Room dengan token
• Mengirim dan menerima pesan via data channel
• Menghubungkan microphone user
• Menangani video dan audio Ainun
• Event-driven API (connected, disconnected, message, error, avatarReady)
• Auto-reconnect jika koneksi putus
• Deteksi kesiapan avatar (avatarReady) agar UI bisa menampilkan loader dengan tepat

📦 Instalasi

# via npm
npm install ainun-client

# atau via yarn
yarn add ainun-client

📝 Import SDK

import { AinunClient } from "ainun-client";

⚙️ Setup & Connect

const client = new AinunClient({
  host: "wss://ainun-62e79h64.livekit.cloud",
  token: "<YOUR_LIVEKIT_TOKEN>"
});

await client.connect();

client.on("connected", () => console.log("✅ Terhubung ke room"));
client.on("disconnected", () => console.log("❌ Terputus"));
client.on("error", (err) => console.error("⚠️ Error", err));

🎥 Video & Audio Ainun

Attach video:

client.on("videoTrack", (track) => {
  client.attachVideo(track, "video-container"); // elementId opsional
});

Attach audio:

client.on("audioTrack", (track) => {
  client.attachAudio(track, "audio-container"); // elementId opsional
});

🌟 Event avatarReady (Baru!)

Event ini dipicu saat video avatar Ainun sudah benar-benar aktif dan tampil. Gunakan event ini untuk menghilangkan loading screen / placeholder agar UI terlihat lebih smooth.

Contoh:

client.on("avatarReady", () => {
  const loader = document.getElementById("loading-screen");
  if (loader) loader.style.display = "none";
  console.log("🎬 Avatar Ainun siap ditampilkan!");
});

Tips UX:

• Tampilkan overlay hitam atau spinner di atas video sebelum avatarReady muncul.
• Setelah event ini diterima, hapus overlay atau fade out dengan animasi.

🎤 Microphone User

await client.enableMicrophone(); // aktifkan mic lokal

💬 Kirim & Terima Pesan

Kirim pesan:

client.sendText("Halo Ainun!");

Terima pesan:

client.on("message", (msg) => {
  console.log("Pesan dari Ainun:", msg);
});

🔌 Daftar Event

| Event | Data Type | Deskripsi | | -------------- | ------------------ | --------------------------------------- | | connected | void | Terhubung ke room | | disconnected | void | Terputus dari room | | error | Error | Error koneksi atau LiveKit | | message | string | Pesan dari Ainun via data channel | | videoTrack | MediaStreamTrack | Video track dari Ainun | | audioTrack | MediaStreamTrack | Audio track dari Ainun | | avatarReady | void | Avatar Ainun sudah siap tampil di video |

🧩 Factory Helper

import { createAinunClient } from "ainun-client";

const client = await createAinunClient({
  host: "wss://ainun-62e79h64.livekit.cloud",
  tokenUrl: "/api/get-token",
  identity: "Ainun"
});

Parameter:

• tokenUrl: URL backend untuk mendapatkan LiveKit token
• identity: nama user / karakter Ainun

⚡ Utility

Sleep Helper

import { sleep } from "ainun-client";

await sleep(1000); // delay 1 detik

🔧 Disconnect

await client.disconnect();

💡 Tips

• Selalu attach audio/video setelah menerima event audioTrack / videoTrack.
• Gunakan avatarReady untuk mengontrol kapan avatar muncul di UI.
• Untuk autoplay video, browser biasanya memerlukan video yang di-mute.
• Gunakan createAinunClient() untuk integrasi yang lebih mudah dengan backend token.
• Jika koneksi LiveKit putus, SDK akan otomatis mencoba reconnect hingga 3 kali.