> This is a page from the ElevenLabs documentation. For a complete page index, fetch https://elevenlabs.io/docs/llms.txt. For the full documentation in a single file, fetch https://elevenlabs.io/docs/llms-full.txt.
# Client-seitiges Streaming
> **Note**
>
> **Anleitung** · Setzt voraus, dass Sie den [Speech to Text Schnellstart](/docs/de/eleven-api/guides/cookbooks/speech-to-text) 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](/docs/de/eleven-api/guides/how-to/speech-to-text/realtime/server-side-streaming).
## Schnellstart
> **Note**
>
> Diese Anleitung setzt voraus, dass Sie [Ihren API-Schlüssel eingerichtet](/docs/de/eleven-api/quickstart) haben. Schließen Sie zuerst den
> Schnellstart ab, falls noch nicht geschehen.
#### SDK installieren
**`React`**
```bash title="React"
npm install @elevenlabs/react @elevenlabs/elevenlabs-js
```
**`JavaScript`**
```bash title="JavaScript"
npm install @elevenlabs/client @elevenlabs/elevenlabs-js
```
#### 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.
> **Warning**
>
> Geben Sie Ihren API-Schlüssel niemals an den Client weiter.
```typescript
// 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);
});
```
> **Info**
>
> Ein Single-Use-Token läuft nach 15 Minuten automatisch ab.
#### 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.
> **Info**
>
> Eine vollständige Liste der von der API unterstützten Parameter und Optionen finden Sie in der [API-Referenz](/docs/de/api-reference/speech-to-text/v-1-speech-to-text-realtime).
#### Mikrofon
**`React`**
```typescript title="React"
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 (
{scribe.partialTranscript &&
Live: {scribe.partialTranscript}
}
{scribe.committedTranscripts.map((t) => (
{t.text}
))}
);
}
```
**`JavaScript`**
```typescript title="JavaScript"
// Client side
import { Scribe, RealtimeEvents } from "@elevenlabs/client";
// Ensure you have authentication headers set up
const response = await fetch("/scribe-token", yourAuthHeaders);
const { token } = await response.json();
const connection = Scribe.connect({
token,
modelId: "scribe_v2_realtime",
includeTimestamps: true,
microphone: {
echoCancellation: true,
noiseSuppression: true,
autoGainControl: true,
},
});
// Set up event handlers
// Session started
connection.on(RealtimeEvents.SESSION_STARTED, () => {
console.log("Session started");
});
// Partial transcripts (interim results), use this in your UI to show the live transcript
connection.on(RealtimeEvents.PARTIAL_TRANSCRIPT, (data) => {
console.log("Partial:", data.text);
});
// Committed transcripts
connection.on(RealtimeEvents.COMMITTED_TRANSCRIPT, (data) => {
console.log("Committed:", data.text);
});
// Committed transcripts with word-level timestamps. Only received when includeTimestamps is set to true.
connection.on(RealtimeEvents.COMMITTED_TRANSCRIPT_WITH_TIMESTAMPS, (data) => {
console.log("Committed:", data.text);
console.log("Timestamps:", data.words);
});
// Errors - will catch all errors, both server and websocket specific errors
connection.on(RealtimeEvents.ERROR, (error) => {
console.error("Error:", error);
});
// Connection opened
connection.on(RealtimeEvents.OPEN, () => {
console.log("Connection opened");
});
// Connection closed
connection.on(RealtimeEvents.CLOSE, () => {
console.log("Connection closed");
});
// When you are done, close the connection
connection.close();
```
#### Audio manuell in Blöcke aufteilen
**`React`**
```typescript title="React"
import { useScribe, AudioFormat } from "@elevenlabs/react";
function FileTranscription() {
const [file, setFile] = useState(null);
const scribe = useScribe({
modelId: "scribe_v2_realtime",
audioFormat: AudioFormat.PCM_16000,
sampleRate: 16000,
});
const transcribeFile = async () => {
if (!file) return;
// Fetch a single use token from the server
const token = await fetchToken();
await scribe.connect({ token });
// Decode audio file
const arrayBuffer = await file.arrayBuffer();
const audioContext = new AudioContext({ sampleRate: 16000 });
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
// Convert to PCM16
const channelData = audioBuffer.getChannelData(0);
const pcmData = new Int16Array(channelData.length);
for (let i = 0; i < channelData.length; i++) {
const sample = Math.max(-1, Math.min(1, channelData[i]));
pcmData[i] = sample < 0 ? sample * 32768 : sample * 32767;
}
// Send in chunks
const chunkSize = 4096;
for (let offset = 0; offset < pcmData.length; offset += chunkSize) {
const chunk = pcmData.slice(offset, offset + chunkSize);
const bytes = new Uint8Array(chunk.buffer);
const base64 = btoa(String.fromCharCode(...bytes));
scribe.sendAudio(base64);
await new Promise((resolve) => setTimeout(resolve, 50));
}
// Commit transcription
scribe.commit();
};
return (