자동 연속 녹음 시작

무음 감지 기반 자동 연속 녹음 루프를 시작합니다. 사용자가 말을 멈추면 자동으로 음성을 전송하고, AI 응답이 끝난 후 자동으로 다시 녹음을 시작합니다.

메서드

startAutoRecording()

자동 연속 녹음 루프를 시작합니다.

public async startAutoRecording(): Promise<void>

동작 방식

1. 마이크를 활성화하여 녹음을 시작합니다
2. 배경 소음을 측정하여 적응형 무음 임계값을 자동으로 계산합니다
3. 사용자 발화가 감지된 후 일정 시간(기본 1초) 무음이 지속되면 자동으로 음성을 AI에게 전송합니다
4. AI의 응답(TTS)이 완료되면 자동으로 다시 녹음을 시작합니다
5. stopAutoRecording()을 호출할 때까지 이 루프가 반복됩니다

사용법

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();
await client.startAutoRecording();

// 대화가 끝나면 중지
client.stopAutoRecording();

React Hook

"use client";

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

function MyComponent() {
  const containerRef = useRef(null);
  const [isAutoRecording, setIsAutoRecording] = useState(false);
  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,
  });

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

  const handleStartAutoRecording = async () => {
    try {
      await client.client.startAutoRecording();
      setIsAutoRecording(true);
      console.log("자동 연속 녹음 시작!");
    } catch (error) {
      console.error("자동 녹음 시작 실패:", error);
    }
  };

  const handleStopAutoRecording = () => {
    client.client.stopAutoRecording();
    setIsAutoRecording(false);
    console.log("자동 연속 녹음 중지!");
  };

  return (
    <div>
      <div
        ref={containerRef}
        className="h-[400px] w-[800px] bg-black"
      ></div>
      {isAutoRecording ? (
        <button onClick={handleStopAutoRecording}>자동 녹음 중지</button>
      ) : (
        <button onClick={handleStartAutoRecording}>자동 녹음 시작</button>
      )}
      <p>녹음 상태: {client.state.recording}</p>
    </div>
  );
}

startRecording()과의 차이점

	startRecording()	startAutoRecording()
동작 방식	수동 시작/종료	자동 루프
전송 시점	stopRecording() 호출 시	무음 감지 시 자동 전송
재녹음	수동으로 다시 호출 필요	AI 응답 후 자동 재시작
적합한 상황	PTT(Push-to-Talk) 방식	자연스러운 대화 방식

다음 단계

• 자동 연속 녹음 중지 - 녹음 루프를 중단합니다
• 음성 인식 시작 - 수동 녹음이 필요한 경우