Skip to main content

디지털 휴먼 연결

디지털 휴먼 ID(임베딩 키)로 디지털 휴먼과 연결하여 세션을 시작합니다.

메서드​

connect()​

디지털 휴먼 서버에 연결을 시도합니다.

public async connect(): Promise<void>

사용법​

JavaScript/TypeScript​

import { KleverOneClient } from "@klever-one/web-sdk/core";

const client = new KleverOneClient({
  apiKey: "your-api-key",
  container: document.getElementById("streaming-container"),
});

// 디지털 휴먼에 연결
await client.connect();

React Hook​

"use client";

import { useRef, useEffect, useMemo } from "react";
import { useKleverOneClient, type Message } from "@klever-one/web-sdk/react";

function MyComponent() {
  const containerRef = useRef(null);
  const tempContainer = useMemo(() => {
    if (typeof document !== "undefined") {
      return document.createElement("div");
    }
    return {} as HTMLDivElement;
  }, []);

  const client = useKleverOneClient({
    apiKey: "your-api-key",
    container: containerRef.current || tempContainer,
    callbacks: {
      onReady: () => console.log("디지털 휴먼 준비 완료!"),
      onMessageReceived: (message: Message) =>
        console.log("받은 메시지:", message),
      onError: (error: Error) => console.error("오류:", error),
    },
  });

  useEffect(() => {
    return () => {
      if (client.client) {
        client.disconnect();
      }
    };
  }, [client.client]);

  const handleConnect = async () => {
    if (containerRef.current && client.client) {
      try {
        await client.connect();
        console.log("연결 성공!");
      } catch (error) {
        console.error("연결 실패:", error);
      }
    }
  };

  return (
    <div>
      <div
        ref={containerRef}
        className="h-[400px] w-[800px] bg-black"
      ></div>
      <button onClick={handleConnect}>디지털 휴먼 연결</button>
      <p>연결 상태: {client.state.connection}</p>
      <p>녹음 상태: {client.state.recording}</p>
    </div>
  );
}

연결 과정​

연결은 다음 순서로 진행됩니다:

  1. 방 연결 요청 (WebSocket)
  2. 방 정보 수신 대기
  3. 스트리밍 연결
  4. AI 대화 시스템 초기화

상태 확인​

연결 상태는 다음과 같이 확인할 수 있습니다:

// 연결 상태 확인
const state = client.getState();
console.log("연결 상태:", state.connection); // "connecting" | "connected" | "disconnected" | "error"

// 전체 준비 상태 확인
const isReady = client.isReady();
console.log("사용 준비:", isReady); // boolean

다음 단계​

연결이 완료되면 다음과 같은 기능들을 사용할 수 있습니다: