VanillaJS
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<script src="https://web.sdk.klleon.io/1.0.0/klleon-chat.umd.js"></script>
</head>
<body>
<script>
async function main() {
const { KlleonChat } = window;
KlleonChat.onChatEvent((data) => {
console.log(data, "chat event");
});
KlleonChat.onStatusEvent((status) => {
console.log(status, "status event");
});
await KlleonChat.init({
sdk_key: "your sdk_key",
avatar_id: "your avatar_id",
});
// SDK Connection
document.getElementById("init").addEventListener("click", async () => {
await KlleonChat.init({
sdk_key: "your sdk_key",
avatar_id: "your avatar_id",
});
});
document.getElementById("destroy").addEventListener("click", () => {
KlleonChat.destroy();
});
// SDK Method - chatting
document.getElementById("echo").addEventListener("click", () => {
KlleonChat.echo("hello");
});
document
.getElementById("sendTextMessage")
.addEventListener("click", () => {
KlleonChat.sendTextMessage("hello");
});
document.getElementById("startStt").addEventListener("click", () => {
// 녹음을 시작하고 녹음완료 후 KlleonChat.endStt() 호출
KlleonChat.startStt();
});
document.getElementById("endStt").addEventListener("click", () => {
KlleonChat.endStt();
});
// SDK Method - etc
document
.getElementById("change-avatar")
.addEventListener("click", () => {
KlleonChat.changeAvatar({
avatar_id: "your avatar_id",
});
});
document.getElementById("stop").addEventListener("click", () => {
KlleonChat.stopEcho();
});
}
main();
</script>
<div style="display: flex; flex-direction: column; gap: 24px 0px">
<div style="display: flex; width: 650px; height: 650px; gap: 0px 24px">
<div style="display: flex; flex: 1">
<avatar-container
style="width: 100%; height: 100%"
videoStyle='{"borderRadius": "24px"}'
></avatar-container>
</div>
<chat-container
style="display: flex; flex: 1; border-radius: 24px"
></chat-container>
</div>
<div style="display: flex; gap: 0px 24px">
<span>SDK Connection</span>
<button id="init">init</button>
<button id="destroy">destroy</button>
</div>
<div style="display: flex; flex-direction: column; gap: 24px">
<div
style="
display: flex;
flex-direction: column;
width: fit-content;
gap: 24px;
"
>
<span>Chat Method</span>
<div style="display: flex; gap: 0px 24px">
<button id="echo">echo</button>
<button id="sendTextMessage">sendTextMessage</button>
<button id="startStt">startStt</button>
<button id="endStt">endStt</button>
</div>
</div>
<div
style="
display: flex;
flex-direction: column;
width: fit-content;
gap: 24px;
"
>
<span>ETC Method</span>
<div style="display: flex; gap: 0px 24px">
<button id="change-avatar">change avatar</button>
<button id="stop">stop speech</button>
</div>
</div>
</div>
</div>
</body>
</html>Last updated