사용 방법 가이드음성 텍스트 변환실시간

클라이언트 측 스트리밍

이 가이드에서는 ElevenLabs를 사용해 클라이언트 측에서 실시간으로 오디오를 트랜스크립션하는 방법을 알아봅니다.

사용 방법 가이드 · 음성 텍스트 변환 빠른 시작을 완료했다고 가정합니다.

개요

ElevenLabs 실시간 음성 텍스트 변환 API를 사용하면 Scribe Realtime v2 모델로 매우 낮은 지연 시간의 오디오 스트림 실시간 트랜스크립션을 구현할 수 있습니다. 음성 어시스턴트, 트랜스크립션 서비스 또는 실시간 음성 인식이 필요한 모든 애플리케이션을 구축할 때, 이 WebSocket 기반 API는 말하는 동안 부분 트랜스크립트를 제공하고 음성 구간이 완료되면 확정된 트랜스크립트를 제공합니다.

Scribe v2 Realtime은 마이크를 사용하거나 오디오를 수동으로 청크 처리하여 클라이언트 측에서 실시간 오디오를 트랜스크립션하도록 구현할 수 있습니다.

클라이언트 측 구현은 서버 측 구현과 몇 가지 차이가 있습니다.

  • 일회용 토큰이 필요합니다. 이 임시 토큰으로 API 키를 노출하지 않고 API에 연결할 수 있습니다.
  • 마이크의 오디오를 수동으로 청크 처리할 필요 없이 API에 직접 전달하여 트랜스크립션할 수 있습니다.

URL에서 오디오를 스트리밍하려면 서버 측 스트리밍 가이드를 참조하세요.

빠른 시작

이 가이드에서는 API 키 설정을 완료했다고 가정합니다. 아직이라면 먼저 빠른 시작을 완료하세요.

1

SDK 설치

npm install @elevenlabs/react @elevenlabs/elevenlabs-js
2

토큰 생성

클라이언트 측 SDK를 사용하려면 일회용 토큰을 생성해야 합니다. 이 임시 토큰으로 API 키를 노출하지 않고 API에 연결할 수 있습니다. 서버 측에서 ElevenLabs API를 통해 생성할 수 있습니다.

API 키를 클라이언트에 절대 노출하지 마세요.

// Node.js server
import { ElevenLabsClient } from "@elevenlabs/elevenlabs-js";
const elevenlabs = new ElevenLabsClient({
  apiKey: process.env.ELEVENLABS_API_KEY,
});
app.get("/scribe-token", yourAuthMiddleware, async (req, res) => {
  const token = await elevenlabs.tokens.singleUse.create("realtime_scribe");
  res.json(token);
});

일회용 토큰은 15분 후 자동으로 만료됩니다.

3

트랜스크립션 세션 시작

마이크를 사용하거나 자체 오디오를 수동으로 청크 처리하여 트랜스크립션할 수 있습니다. 자체 오디오는 파일 또는 스트림일 수 있습니다.

API가 지원하는 매개변수와 옵션의 전체 목록은 API 레퍼런스를 참조하세요.

import { useScribe } from "@elevenlabs/react";
function MyComponent() {
  const scribe = useScribe({
    modelId: "scribe_v2_realtime",
    onPartialTranscript: (data) => {
      console.log("Partial:", data.text);
    },
    onCommittedTranscript: (data) => {
      console.log("Committed:", data.text);
    },
    onCommittedTranscriptWithTimestamps: (data) => {
      console.log("Committed with timestamps:", data.text);
      console.log("Timestamps:", data.words);
    },
  });
  const handleStart = async () => {
    // Fetch a single use token from the server
    const token = await fetchTokenFromServer();
    await scribe.connect({
      token,
      microphone: {
        echoCancellation: true,
        noiseSuppression: true,
      },
    });
  };
  return (
    <div>
      <button onClick={handleStart} disabled={scribe.isConnected}>
        Start Recording
      </button>
      <button onClick={scribe.disconnect} disabled={!scribe.isConnected}>
        Stop
      </button>
      {scribe.partialTranscript && <p>Live: {scribe.partialTranscript}</p>}
      <div>
        {scribe.committedTranscripts.map((t) => (
          <p key={t.id}>{t.text}</p>
        ))}
      </div>
    </div>
  );
}

다음 단계

서버 측 스트리밍

동일한 WebSocket API로 서버 측에서 오디오 스트림을 트랜스크립션하세요.

트랜스크립트 및 확정 전략

트랜스크립트를 확정하는 시점과 부분 결과를 처리하는 방법을 제어하세요.