Client-seitiges Streaming

Dieser Leitfaden zeigt Ihnen, wie Sie Audio mit ElevenLabs client-seitig in Echtzeit transkribieren.

Anleitung · Setzt voraus, dass Sie den Speech to Text Schnellstart abgeschlossen haben.

Überblick

Mit der ElevenLabs API für Echtzeit-Spracherkennung können Sie Audiostreams mit extrem niedriger Latenz in Echtzeit transkribieren. Sie verwendet das Modell Scribe Realtime v2. Ob Sie Sprachassistenten, Transkriptionsdienste oder Anwendungen entwickeln, die Live-Spracherkennung erfordern: Diese WebSocket-basierte API liefert während des Sprechens Teiltranskripte und bestätigte Transkripte, sobald Sprachsegmente abgeschlossen sind.

Scribe v2 Realtime kann clientseitig implementiert werden, um Audio in Echtzeit zu transkribieren – entweder über das Mikrofon oder durch manuelles Aufteilen des Audios in Blöcke.

Die clientseitige Implementierung unterscheidet sich in einigen Punkten von der serverseitigen:

  • Erfordert ein Single-Use-Token – ein temporäres Token, mit dem Sie sich mit der API verbinden können, ohne Ihren API-Schlüssel offenzulegen.
  • Audio vom Mikrofon kann direkt zur Transkription an die API geleitet werden, ohne das Audio manuell in Blöcke aufzuteilen.

Für das Streamen von Audio über eine URL lesen Sie die Anleitung zum serverseitigen Streaming.

Schnellstart

Diese Anleitung setzt voraus, dass Sie Ihren API-Schlüssel eingerichtet haben. Schließen Sie zuerst den Schnellstart ab, falls noch nicht geschehen.

1

SDK installieren

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

Token erstellen

Für die Nutzung des clientseitigen SDK müssen Sie ein Single-Use-Token erstellen. Dies ist ein temporäres Token, mit dem Sie sich mit der API verbinden können, ohne Ihren API-Schlüssel offenzulegen. Sie können es serverseitig über die ElevenLabs API erstellen.

Geben Sie Ihren API-Schlüssel niemals an den Client weiter.

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

Ein Single-Use-Token läuft nach 15 Minuten automatisch ab.

3

Transkriptionssitzung starten

Sie können die Transkription entweder über das Mikrofon durchführen oder Ihr eigenes Audio manuell in Blöcke aufteilen. Ihr eigenes Audio kann eine Datei oder ein Stream sein.

Eine vollständige Liste der von der API unterstützten Parameter und Optionen finden Sie in der API-Referenz.

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ächste Schritte