Utilisation

Provider et contexte

Enveloppez la partie de l’application qui utilise la transcription avec TranscriptionProvider :

import { TranscriptionProvider, TranscriptionButton } from '@ephia/transcribe-sdk';
import '@ephia/transcribe-sdk/dist/styles.css';
 
function App() {
  const token = 'YOUR_API_KEY'; // En production, obtenez-le côté serveur ou via votre auth.
 
  return (
    <TranscriptionProvider>
      <TranscriptionButton token={token} />
    </TranscriptionProvider>
  );
}

Obtenez une clé API : Créer votre clé API.

Bouton et token

TranscriptionButton requiert la prop token (clé API). Sans token valide, le bouton reste désactivé ou affiche une erreur selon la configuration.

streamingUrl (optionnel) : URL WebSocket complète. Si non fournie, l’URL est construite à partir de streamingUrlBase + /api/v2/streaming/live.
streamingUrlBase (optionnel) : base de l’URL WebSocket (défaut : variable d’environnement ou ws://localhost:8765).
audioProcessorUrl (optionnel) : URL du worklet audio (défaut : /audio-processor.js).

Lire l’état avec useTranscription()

Le hook useTranscription() expose l’état global de la transcription (celui mis à jour par le bouton) :

chunks : segments de texte (interim / final)
isRecording : true pendant l’enregistrement
isProcessing : true pendant l’envoi/traitement
isConnected : true lorsque le WebSocket est connecté
volume : niveau audio (0–1)
error / errorCode : message et code en cas d’erreur
startRecording, stopRecording, clear, connect : fonctions de contrôle

Exemple :

import { useTranscription } from '@ephia/transcribe-sdk';
 
function Transcript() {
  const { chunks, isRecording, clear } = useTranscription();
 
  return (
    <div>
      <button type="button" onClick={clear}>Effacer</button>
      {chunks.map((c) => (
        <span key={c.id}>{c.text} </span>
      ))}
    </div>
  );
}

Callback onStateChange

Vous pouvez aussi recevoir l’état via la prop onStateChange du TranscriptionButton (objet de type TranscriptionState avec les mêmes champs que ci‑dessus).

Codes d’erreur (TranscriptionErrorCode)

insecure_context : page non servie en HTTPS (ou hors localhost)
microphone_denied : refus d’accès au micro
microphone_not_found : aucun micro détecté
microphone_error : erreur matériel/driver
websocket_error : échec de connexion WebSocket
websocket_auth_error : token invalide ou refusé
audio_worklet_error : échec de chargement du worklet (vérifier audio-processor.js)
token_missing : token non fourni
unknown : autre erreur

Voir Dépannage pour les solutions courantes.

Installation Apparence