Hoppa till navigering
InstruktionsguiderTal till textRealtid

Strömning på klientsidan

Den här guiden visar hur du transkriberar ljud i realtid på klientsidan med ElevenLabs.

Guide · Förutsätter att du har slutfört snabbstartsguiden för Speech to Text .

Översikt

ElevenLabs Realtime Speech to Text API låter dig transkribera ljudströmmar i realtid med extremt låg fördröjning med modellen Scribe Realtime v2. Oavsett om du bygger röstassistenter, transkriptionstjänster eller andra program som kräver liveigenkänning av tal levererar detta WebSocket-baserade API partiella transkriptioner medan du talar och bekräftade transkriptioner när talsegment är klara.

Scribe v2 Realtime kan implementeras på klientsidan för att transkribera ljud i realtid, antingen via mikrofonen eller genom att manuellt dela upp ljudet i segment.

Implementeringen på klientsidan skiljer sig från serversidan på några sätt:

  • Kräver en engångstoken – en tillfällig token som kan användas för att ansluta till API:et utan att exponera din API-nyckel.
  • Ljud från mikrofonen kan skickas direkt till API:et för transkribering, utan att du behöver dela upp ljudet manuellt i segment.

För att strömma ljud från en URL, se guiden Strömning på serversidan.

Snabbstart

Den här guiden förutsätter att du har konfigurerat din API-nyckel. Slutför snabbstartsguiden först om du inte redan har gjort det.

1

Installera SDK:t

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

Skapa en token

För att använda SDK:t på klientsidan behöver du skapa en engångstoken. Det är en tillfällig token som kan användas för att ansluta till API:et utan att exponera din API-nyckel. Det kan göras via ElevenLabs API på serversidan.

Exponera aldrig din API-nyckel för klienten.

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

En engångstoken upphör automatiskt att gälla efter 15 minuter.

3

Starta transkriberingssessionen

Transkribering kan göras antingen via mikrofonen eller genom att manuellt dela upp ditt eget ljud i segment. Ditt eget ljud kan vara en fil eller en ström.

En fullständig lista över parametrar och alternativ som API:et stöder finns i API-referensen.

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

Nästa steg

Strömning på serversidan

Transkribera ljudströmmar på serversidan med samma WebSocket API.

Transkriptioner och bekräftelsestrategier

Styr när transkriptioner bekräftas och hur partiella resultat hanteras.