Dokumentasi
Tiga cara membuat avatar AI — dan apa yang terjadi saat ketiganya benar-benar dibangun
Membangun aplikasi obrolan ber-avatar dimulai dari satu keputusan yang sulit dibatalkan: bagaimana wajah itu dirender. Pilihan itu menentukan tagihan bulanan Anda, siapa yang harus direkrut, dan seberapa cepat avatar menjawab. Halaman ini menggabungkan tiga hal — analisa biaya untuk tiga pendekatan yang tersedia hari ini, sepuluh pustaka dan API konkret beserta cara masing-masing menagih Anda, dan catatan dari membangun ketiganya sungguhan di aplikasi yang sedang Anda buka.
Aturan mainnya
Ketiga pendekatan dibangun sebagai tiga rute di dalam satu aplikasi, dengan mekanika obrolan yang persis sama: satu hook memegang pesan, status berpikir, tombol mikrofon, dan log koneksi. LLM-nya tiruan — sebuah setTimeout satu detik yang mengembalikan teks kalengan — dan suaranya memakai Web Speech API bawaan browser. Tidak ada satu pun panggilan ke layanan berbayar.
Penyeragaman itu disengaja. Kalau mekanika obrolannya berbeda-beda, perbandingannya jadi tidak berarti. Dengan begini satu-satunya variabel yang tersisa adalah cara avatar dirender — dan itu memang satu-satunya hal yang sedang dibandingkan.
Video streaming fotorealistis
Wajah manusia dirender di server provider, dikirim sebagai video WebRTC
Provider merender video manusia yang realistis di infrastruktur mereka, lalu mengalirkannya ke browser lewat WebRTC berlatensi rendah. Nyaris seluruh beban grafis ada di sisi mereka; yang Anda tulis di frontend praktis hanya elemen <video> dan integrasi SDK-nya. Ini pendekatan dengan hasil visual paling meyakinkan sekaligus paling cepat sampai ke produksi.
Pemainnya: HeyGen, D-ID, Simli, dan Tavus. Keempatnya dirinci — beserta cara masing-masing menagih Anda — di daftar pilihan setelah bagian ini.
Biaya finansial
Tinggi
Biaya development
Rendah–menengah
Tim
Frontend + integrator API
Mahalnya bukan di gaji, tapi di meteran: mayoritas provider menagih per menit video, sekitar $0,10–0,20. Angka itu nyaman untuk demo dan brutal untuk aplikasi B2C berjuta pengguna — biayanya tumbuh seiring durasi orang menatap layar, bukan seiring jumlah fitur. Cocok untuk B2B, presenter virtual, atau fitur premium yang pemakaiannya terbatas.
Di aplikasi ini · /video
Rencana awalnya sederhana: sebuah <video src=…> ke sampel video publik. Jaringan tempat aplikasi ini dibangun menjawab HTTP 403 untuk berkas itu, jadi halamannya hanya menampilkan kotak hitam.
Gantinya justru lebih dekat ke aslinya: halaman ini membuka dua RTCPeerConnection dan menyambungkannya satu sama lain di dalam tab. Kanvas menjadi sumber gambar, ditangkap dengan captureStream(), dikirim lewat peer lokal, diterima peer jauh, lalu dipasang ke video.srcObject. Tidak ada server dan tidak ada lalu lintas keluar, tapi negosiasi SDP, kandidat ICE, encoding video, dan semua angka di panel statistik itu nyata — panelnya membaca getStats() dari sisi penerima, bukan menampilkan teks tetap.
Yang menarik: memasang provider sungguhan berarti mengganti peer jauh dengan server mereka. Baris srcObject itu tidak berubah sama sekali. Klaim “kompleksitas frontend rendah” terbukti — inti transportnya selesai dalam satu hook.
3D dirender di browser
Model .glb diunduh ke perangkat pengguna, mulutnya digerakkan data viseme
Model 3D diunduh sekali lalu dirender di perangkat pengguna lewat WebGL. Gerak mulutnya bukan video, melainkan hasil manipulasi blendshape yang disinkronkan dengan pemutaran audio. Karena tidak ada video yang dialirkan, tidak ada meteran yang berjalan.
Pemainnya: TalkingHead.js, Ready Player Me dipadukan Three.js, serta Inworld AI dan Convai yang sekalian membawa “otak” karakter — dirinci di daftar pilihan setelah bagian ini.
Biaya finansial
Rendah
Biaya development
Tinggi
Tim
3D web dev + artist + frontend
Di sini posisinya terbalik. Biaya operasionalnya paling murah dari ketiga pendekatan — yang tersisa hanya tagihan LLM dan TTS — tapi harganya dibayar di depan, dalam bentuk waktu manusia. Developer harus paham ruang 3D, pencahayaan, kamera virtual, dan sinkronisasi waktu antara audio dan gerak mulut, semuanya diurus sendiri.
Di aplikasi ini · /webgl
Ready Player Me adalah pilihan pertama dan langsung gugur: domainnya tidak resolve dari jaringan ini, jadi bukan cuma tooling yang buntu — browser pengguna pun tak akan bisa memuat CDN mereka. Penggantinya sebuah kepala hasil pindai manusia dengan 52 blendshape ARKit, disimpan lokal di dalam repo, sehingga halamannya berjalan sepenuhnya offline.
Dan di sinilah “biaya development tinggi” berhenti jadi kalimat di tabel. Empat kegagalan render terjadi berturut-turut, dan keempatnya lolos dari build yang hijau bersih:
- Loader tekstur terkompresi harus terpasang sebelum model dimuat — kalau tidak, modelnya mati tanpa pesan yang berarti.
- Mipmap pada tekstur wajah wajib dimatikan. Skala UV model ini membuat GPU memilih mip terkecil dan hanya mengambil warna rata-rata atlas: wajahnya jadi abu-abu polos, persis seperti tekstur yang gagal dimuat.
- Model itu ternyata membawa klip rekaman gerak wajah bawaan, dan klip itu menimpa lipsync setiap frame — mulutnya diam total tanpa satu pun galat.
- Klip idle harus dipilih berdasarkan namanya. Ambil klip pertama begitu saja, dan model akan memutar take sembarang begitu dibuka.
Tidak satu pun tertangkap oleh type check, dan sebagian bahkan tidak memunculkan pesan di console. Semuanya baru ketahuan setelah halamannya dibuka dan dipotret. Itulah wujud konkret dari baris “kompleksitas frontend: tinggi”.
Ada satu biaya lagi yang tidak muncul di tabel mana pun: asetnya sendiri. Avatar 3D yang layak tayang harus diproduksi — concept art, generasi model, pembersihan mesh, rig, lalu pembuatan blendshape wajah yang jadi penentu bagus-tidaknya lipsync. Perkiraan realistisnya satu sampai dua minggu kerja dan $100–600 perkakas. Karena itulah aplikasi ini punya rute /inspect: seret satu berkas model ke sana dan halamannya langsung menilai apakah aset itu siap dipakai untuk bicara, tanpa menunggu berhari-hari kerja Blender lebih dulu.
Pipeline audio & orkestrasi
Bukan soal wajah, tapi soal merangkai suara masuk dan suara keluar tanpa jeda
Pendekatan ketiga menjawab pertanyaan yang berbeda. Ia bukan tentang bagaimana avatar terlihat, melainkan bagaimana suara pengguna, pemrosesan LLM, suara balasan, dan animasi avatar berjalan serentak tanpa jeda yang terasa — termasuk giliran bicara dan apa yang terjadi ketika pengguna memotong di tengah kalimat AI.
Pemainnya: LiveKit Agents, kini praktis jadi standar untuk mengorkestrasi komponen AI di dalam saluran WebRTC, dipasangkan dengan Deepgram untuk suara masuk dan ElevenLabs untuk suara keluar — ketiganya dirinci di daftar pilihan setelah bagian ini.
Biaya finansial
Menengah
Biaya development
Menengah–tinggi
Tim
Backend/infra + AI engineer
Perhatikan letak kerumitannya: hampir semuanya di backend. Mengatur koneksi WebSocket/WebRTC, membatalkan ucapan yang sedang berjalan saat pengguna menyela, dan menjaga buffer audio agar latensi tetap di bawah satu detik — itu semua bukan pekerjaan frontend. Biayanya pun ikut dua arah: hosting server (atau LiveKit Cloud) ditambah tagihan STT dan TTS per karakter dan per detik suara.
Di aplikasi ini · /audio
Halaman ini sengaja tidak punya wajah sama sekali — hanya visualizer yang bereaksi saat AI berbicara, plus log koneksi. Dan justru itu poinnya: halaman ini yang paling ringan dari ketiganya, karena kerumitan pendekatan ini memang tidak berada di tempat yang bisa ditunjukkan sebuah halaman web.
Yang tidak ditiru di sini juga perlu disebut jujur: tidak ada speech-to-text sungguhan, tidak ada penanganan interupsi, tidak ada manajemen buffer. Tombol mikrofonnya murni antarmuka. Bagian yang sulit dari pendekatan ini ada di sisi yang tidak dibangun PoC ini.
Sepuluh pilihan, dan cara masing-masing menagih Anda
Ketiga pendekatan di atas adalah kategori; ini isinya. Perhatikan baris model biaya pada tiap pilihan — di situlah perbedaan yang paling terasa setelah aplikasi Anda dipakai orang banyak, dan bentuknya berbeda-beda: ada yang menagih per menit tayang, ada yang per karakter, ada yang berlangganan bulanan, ada yang tidak menagih sama sekali.
Video streaming fotorealistis — dibayar per menit
- 1
HeyGen Interactive Avatar SDK
Menghasilkan avatar video manusia realistis secara real-time.
- Keunggulan:
- Latensi di bawah satu detik, respons terasa alami, dan avatar kustom bisa dibuat dari rekaman video asli.
- Cocok untuk:
- Layanan pelanggan dan asisten virtual profesional.
Bayar per menit video
- 2
D-ID Streaming API
Menganimasikan foto 2D/3D atau ilustrasi karakter menjadi video yang berbicara.
- Keunggulan:
- Hemat biaya pembuatan aset — foto diam maupun karakter fiktif bisa dihidupkan lengkap dengan ekspresi emosi.
- Cocok untuk:
- Edukasi, maskot AI, virtual companion.
Bayar per menit video
- 3
Simli SDK
Streaming video avatar berlatensi ultra-rendah yang dirancang khusus untuk agen AI.
- Keunggulan:
- Dibuat untuk interaksi suara-ke-suara; waktu responsnya di bawah 500 milidetik.
- Cocok untuk:
- Percakapan audio-video real-time yang jedanya tidak boleh terasa.
Bayar per menit video
- 4
Tavus Conversational Video API
Avatar digital interaktif yang mereplikasi mikro-ekspresi dan gaya bicara.
- Keunggulan:
- Ekspresi wajahnya menyesuaikan konteks percakapan, bukan sekadar mengikuti gerak mulut.
- Cocok untuk:
- Wawancara AI, konsultasi interaktif, pelatihan simulasi.
Bayar per menit video
3D di browser — dua gratis, dua berlangganan
- 5
TalkingHead.js
Pustaka JavaScript murni di atas Three.js untuk menampilkan kepala avatar 3D di WebGL.
- Keunggulan:
- Gratis dan ringan, lipsync otomatis dari berkas audio atau data viseme TTS, plus kontrol emosi dasar.
- Cocok untuk:
- Proyek web dengan anggaran terbatas.
Gratis — open-source
- 6
Ready Player Me + Three.js
Generator avatar 3D lintas platform, dipadukan dengan engine render WebGL.
- Keunggulan:
- Pengguna bisa membuat dan mengustomisasi avatarnya sendiri; gerak bibir dan mata dikendalikan penuh lewat JavaScript (morph target/blendshape).
- Cocok untuk:
- Aplikasi dengan fitur avatar kustom.
Avatarnya gratis — yang dibayar hanya LLM & TTS
- 7
Inworld AI Web SDK
Engine karakter 3D serba ada: LLM, TTS, lipsync, dan kontrol gestur sekaligus.
- Keunggulan:
- Punya logika emosi internal, kepribadian yang bisa diatur, dan aliran data animasi yang siap dirender di web.
- Cocok untuk:
- Aplikasi interaktif berbasis kepribadian — roleplay atau character AI.
Langganan platform
- 8
Convai Web SDK
SDK percakapan karakter 3D untuk aplikasi web dan game.
- Keunggulan:
- Menangani memori percakapan, speech-to-text sudah terintegrasi, dan kontrol aksi avatarnya matang.
- Cocok untuk:
- Pemandu virtual atau agen AI yang berinteraksi di dalam lingkungan 3D.
Langganan platform
Pondasi suara dan koneksi — dibayar per pemakaian
- 9
LiveKit Agents Framework & Web SDK
Infrastruktur WebRTC real-time yang menyambungkan audio pengguna, LLM, TTS, dan avatar menjadi satu alur.
- Keunggulan:
- Sangat fleksibel, menangani turn-taking — kapan AI mendengar dan kapan ia berhenti bicara — serta sudah terintegrasi ke HeyGen, Simli, dan ElevenLabs.
- Cocok untuk:
- Backend dan saluran komunikasi real-time skala besar.
Open-source; bayar hosting sendiri atau LiveKit Cloud
- 10
Deepgram (STT) + ElevenLabs (TTS)
Deepgram mengubah suara pengguna menjadi teks seketika; ElevenLabs menghasilkan suara AI sekaligus data viseme berupa penanda waktu tiap kata.
- Keunggulan:
- Akurasi tinggi dan respons cepat — dan yang penting, keluarannya menyediakan sinyal visual untuk menggerakkan bibir avatar.
- Cocok untuk:
- Fondasi pemrosesan audio untuk avatar 3D kustom.
Per detik audio (STT) + per karakter (TTS)
Di aplikasi ini · /webgl
Pilihan nomor 10 menyambung langsung ke bagian yang sudah dibangun di sini. Penanda waktu per kata dari ElevenLabs itu persis jenis data yang dikonsumsi mesin lipsync aplikasi ini — bedanya, sekarang penandanya datang dari peristiwa onboundary milik browser, yang dipakai untuk menambatkan ulang jadwal gerak mulut supaya kalimat panjang tidak melenceng. Mengganti ke TTS sungguhan berarti menukar sumber penanda itu; seluruh mesin visemenya tidak berubah.
Tidak ada angka harga di sini
Yang dicantumkan adalah cara menagihnya, bukan tarifnya — kecuali satu angka kasar untuk kategori video, sekitar $0,10–0,20 per menit, yang memang disebut di analisa. Tarif per penyedia berubah dan berbeda per paket, jadi memasangnya di sini hanya akan membuat halaman ini salah dalam beberapa bulan. Bentuk tagihannya yang jarang berubah — dan itu yang menentukan apakah biaya Anda tumbuh mengikuti jumlah pengguna, durasi menonton, atau jumlah kata.
Ringkasan pilihan per kebutuhan
| Kebutuhan | Rekomendasi | Latensi | Model biaya |
|---|---|---|---|
| Video realistis | HeyGen atau Simli, diorkestrasi LiveKit | Ultra rendah (~500 ms) | Bayar per menit streaming video |
| Satu wajah atau tubuh 3D | TalkingHead.js atau Ready Player Me | Sangat rendah (<300 ms) | Gratis; yang dibayar hanya TTS & LLM |
| Karakter interaktif kompleks | Inworld AI atau Convai | Sedang (~1 detik) | Langganan platform |
Angka latensi di tabel ini perlu dibaca hati-hati. Jalur 3D disebut <300 ms di sini, sementara analisa biaya menyebutnya “rendah sampai sedang, bergantung TTS”. Keduanya bisa benar sekaligus karena mengukur hal berbeda: yang di bawah 300 ms itu render dan animasinya, sedangkan yang terasa oleh pengguna adalah keseluruhan putaran — suara masuk, LLM berpikir, TTS menghasilkan audio — dan bagian itu tidak ditentukan oleh pilihan render sama sekali. Untuk jalur 3D, TTS-lah penentu utamanya.
Ketiganya berdampingan
| Video streaming | 3D di browser | Orkestrasi | |
|---|---|---|---|
| Kualitas visual | Sangat realistis, wajah manusia | Bergantung asetnya — bisa realistis, bisa bergaya | Tergantung frontend yang dipasang |
| Latensi interaksi | Sangat rendah (~500 ms) | Rendah–sedang, mengikuti TTS | Sangat rendah, bisa dioptimasi |
| Biaya operasional | Sangat tinggi — per menit video | Rendah — hanya LLM & TTS | Menengah — server + LLM + TTS |
| Kerumitan frontend | Rendah | Tinggi | Rendah–menengah |
| Kerumitan backend | Rendah | Menengah | Tinggi |
| Paling masuk akal untuk | Customer service B2B, presenter virtual | Edukasi, B2C, companion app | Infrastruktur skala besar, produk voice-first |
Satu baris sengaja diperhalus dari analisa aslinya. Jalur 3D di sana disebut hanya menghasilkan “gaya animasi atau kartun”; model yang dipakai di aplikasi ini justru kepala manusia hasil pindai. Batasnya bukan pada format 3D-nya, melainkan pada dari mana asetnya datang dan berapa lama waktu yang Anda punya untuk memproduksinya.
Satu mesin obrolan, tiga wajah
Supaya perbandingan di atas berarti, ketiga rute berbagi satu hook yang sama persis. Hook itu memegang riwayat pesan, status berpikir dan berbicara, tombol mikrofon, serta log koneksi. Ketiga tampilan memanggilnya tanpa modifikasi apa pun, dan hanya berbeda dalam cara mereka membaca dua nilai yang keluar darinya.
Salah satu nilai itu — sedang berbicara atau tidak — berfungsi sebagai jam animasi bersama. Nilainya lahir dari peristiwa siklus hidup TTS yang sungguhan, lalu dianimasikan berbeda-beda oleh tiap rute: pemutaran video di rute pertama, deformasi mesh wajah di rute kedua, dan tinggi batang visualizer di rute ketiga. Satu sinyal, tiga tafsir.
Dua bagian yang dipalsukan sengaja dikurung masing-masing di satu berkas: satu berkas untuk LLM tiruan, satu berkas untuk pembungkus suara. Mengganti keduanya dengan layanan sungguhan berarti menyentuh dua berkas itu saja — tidak ada yang lain di aplikasi ini yang tahu bahwa mereka tiruan.
Ada satu kompromi kecil yang layak dicatat karena mudah disalahpahami sebagai bug: kalau browser tak kunjung melaporkan bahwa ucapan sudah dimulai, sebuah pengaman mengambil alih setelah 600 milidetik dan memperkirakan durasinya dari panjang teks. Tanpa itu, avatar membeku sementara teksnya “dibacakan”.
Yang terbukti di sini, dan yang tidak
Ini pembedaan yang paling penting di seluruh halaman, supaya tabel di atas tidak terbaca seolah hasil pengukuran aplikasi ini sendiri.
Terbukti
- Ketiga pendekatan layak dijalankan di browser — termasuk WebRTC yang benar-benar bernegosiasi, bukan video yang diputar.
- Selisih kerumitan frontend antar pendekatan, karena mekanika obrolannya identik dan hanya cara render yang berbeda.
- Jalur 3D bisa menampilkan wajah manusia sungguhan dengan lipsync, sepenuhnya offline.
Tidak terbukti
- Semua angka biaya. Tidak ada satu pun panggilan keluar dari aplikasi ini, jadi harga per menit dan tagihan server murni berasal dari analisa, bukan pengukuran.
- Latensi sesungguhnya. Jeda satu detik yang Anda rasakan itu angka tiruan yang ditetapkan, bukan hasil pengukuran.
- Kualitas percakapan. LLM-nya mengembalikan teks kalengan; tidak ada penalaran apa pun di baliknya.
Kalau harus memilih sekarang
Butuh wajah manusia yang meyakinkan, penggunanya terbatas. Ambil video streaming — HeyGen kalau kualitas visual yang nomor satu, Simli kalau jedanya yang tidak boleh terasa. Anda membayar mahal per menit dan menghemat berminggu-minggu waktu tim; pertukaran yang masuk akal untuk resepsionis virtual, demo penjualan, atau fitur premium.
Penggunanya banyak dan biaya per menit tidak masuk akal. Ambil 3D di browser — TalkingHead.js kalau cukup satu wajah, Ready Player Me kalau pengguna perlu membuat avatarnya sendiri. Biaya operasionalnya nyaris hilang, tapi siapkan waktu development dan orang yang tahan menghadapi bug yang tidak terlihat sampai halamannya dibuka — empat contohnya sudah dijelaskan di atas.
Yang dibangun sebenarnya infrastruktur suara. Kerjakan orkestrasinya lebih dulu dan tunda keputusan soal wajah. LiveKit sudah punya plugin ke penyedia video, jadi Anda bisa memasang wajah belakangan tanpa membongkar pondasi.
Yang dijual justru karakternya, bukan wajahnya. Inworld AI atau Convai memberi Anda kepribadian, memori percakapan, dan kontrol aksi sekaligus — hemat sekali di awal. Harganya kemandirian: Anda berlangganan platform mereka dan ikut cara mereka bekerja, sementara jalur nomor 5 dan 6 meninggalkan semua kendali di tangan Anda.
Satu hal yang tidak dijawab pilihan mana pun: ketiganya tetap membutuhkan LLM dan TTS yang sungguhan. Di aplikasi ini keduanya masih tiruan — dan itu memang bagian yang paling gampang diganti dari semuanya.