Przejdź do nawigacji
PoradnikiMowa na tekstW czasie rzeczywistym

Strumieniowanie po stronie klienta

Ten przewodnik pokazuje, jak transkrybować dźwięk w czasie rzeczywistym po stronie klienta z ElevenLabs.

Przewodnik · Zakłada, że masz już za sobą krótki przewodnik po Speech to Text .

Omówienie

API ElevenLabs Realtime Speech to Text pozwala transkrybować strumienie audio w czasie rzeczywistym z bardzo niskim opóźnieniem, przy użyciu modelu Scribe Realtime v2. Niezależnie od tego, czy tworzysz asystentów głosowych, usługi transkrypcji czy aplikację wymagającą rozpoznawania mowy na żywo, to API oparte na WebSocket dostarcza częściowe transkrypcje w trakcie mówienia oraz zatwierdzone transkrypcje po zakończeniu segmentów mowy.

Scribe v3 Live można wdrożyć po stronie klienta, aby transkrybować dźwięk w czasie rzeczywistym — z mikrofonu lub przez ręczne dzielenie audio na fragmenty.

Implementacja po stronie klienta różni się od tej po stronie serwera na kilka sposobów:

  • Wymaga tokenu jednorazowego użytku — to tymczasowy token, który pozwala połączyć się z API bez ujawniania klucza API.
  • Dźwięk z mikrofonu można przesyłać bezpośrednio do API w celu transkrypcji, bez ręcznego dzielenia audio na fragmenty.

Informacje o strumieniowaniu audio z adresu URL znajdziesz w przewodniku Strumieniowanie po stronie serwera.

Szybki start

Ten przewodnik zakłada, że skonfigurowałeś klucz API. Jeśli jeszcze tego nie zrobiłeś, najpierw ukończ szybki start.

1

Zainstaluj SDK

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

Utwórz token

Aby użyć SDK po stronie klienta, musisz utworzyć token jednorazowego użytku. To tymczasowy token, który pozwala połączyć się z API bez ujawniania klucza API. Możesz to zrobić przez API ElevenLabs po stronie serwera.

Nigdy nie ujawniaj klucza API klientowi.

// 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);
});

Token jednorazowego użytku automatycznie wygasa po 15 minutach.

3

Rozpocznij sesję transkrypcji

Transkrypcję możesz prowadzić przez mikrofon lub ręcznie dzieląc własne audio na fragmenty. Może to być plik lub strumień.

Pełną listę obsługiwanych przez API parametrów i opcji znajdziesz w dokumentacji API.

import { useScribe } from "@elevenlabs/react";
function MyComponent() {
  const scribe = useScribe({
    modelId: "scribe_v3_live",
    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>
  );
}

Dalsze kroki

Strumieniowanie po stronie serwera

Transkrybuj strumienie audio po stronie serwera za pomocą tego samego API WebSocket.

Transkrypcje i strategie zatwierdzania

Kontroluj, kiedy transkrypcje są zatwierdzane i jak obsługiwać częściowe wyniki.