Logo Ephia
Ephia Docs
Sign in
SDKsIntroduction

SDK Transcription React

Le package @ephia/transcribe-sdk intègre la transcription vocale en temps réel (streaming) dans une application React. Il fournit :

  • un bouton prêt à l’emploi (TranscriptionButton) avec pipeline audio (AudioWorklet, PCM 16 kHz) ;
  • un contexte (TranscriptionProvider) et le hook useTranscription() pour afficher les segments et piloter l’état ;
  • le hook bas niveau useStreamingV2 pour une UI entièrement personnalisée.

L’authentification se fait avec une clé API Ephia ; le SDK construit en général l’URL WebSocket et les paramètres de flux pour vous.

Paquet npm

@ephia/transcribe-sdk

Versions, dépendances et installation en un clic depuis le registre npm.

Playground SDK

platform.ephia.app

Essayez la transcription en direct dans le navigateur, connecté à votre compte.

Clé API : créer ou gérer vos clés sur la plateforme Ephia.

Prérequis

  • HTTPS en production, ou localhost en développement (micro + contexte sécurisé).
  • Navigateur récent (microphone, WebSockets, AudioWorklet).
  • React 17+ et React DOM 17+ (peer dependencies du package).
  • Une clé API : Créer votre clé API.

Vue d’ensemble des briques

BriqueRôle
TranscriptionProviderStocke l’état publié par le bouton (chunks, erreurs, handlers, etc.).
TranscriptionButtonDémarre / arrête la capture ; ouvre le WebSocket ; envoie l’audio.
useTranscription()Lit l’état uniquement si un provider est présent et que le bouton a déjà publié un état — sinon état vide (voir Utilisation).
useStreamingV2Même moteur que le bouton, sans UI — vous construisez les contrôles (voir Référence SDK).

Sans TranscriptionProvider, le bouton fonctionne toujours, mais useTranscription ne reçoit pas les données : utilisez le provider ou la prop onStateChange sur le bouton.

Identifiant utilisateur (endUserId)

⚠️

La prop endUserId est fortement recommandée et deviendra obligatoire dans une prochaine version. Elle permet le suivi d’usage, la facturation et l’analytics de manière réglementaire. L’identifiant est transmis au serveur ; le hashing est géré côté backend.

<TranscriptionButton
  token={token}
  endUserId="user-123"
/>

Par où commencer

  1. Installation — package npm, worklet audio-processor.js, feuille de styles.
  2. Utilisation — provider, bouton, useTranscription, état détaillé.
  3. Connexion et flux — URL WebSocket automatique, NEXT_PUBLIC_WS_URL, options interimStreaming / finalReformat, avertissements serveur.
  4. Apparence — thème, variante, taille, logo, couleurs personnalisées.
  5. Presets — promptPresetId, vadPresetId, reformatPresetId, model (résolus côté serveur).
  6. Référence SDK — useStreamingV2, phases, types, aperçu du protocole.
  7. Exemples — snippet complet minimal.
  8. Dépannage — erreurs fréquentes et pistes.

TypeScript

Le paquet publie des fichiers .d.ts (types dans le champ exports du package.json) : imports typés sans @types séparé.

Le README publié avec le paquet npm reprend l’essentiel de l’installation et du comportement audio / WebSocket.

IndexInstallation