Utilisation

TranscriptionProvider

Enveloppez la partie de l’app qui doit partager l’état de transcription (affichage du texte, boutons « effacer », etc.) :

import { TranscriptionProvider, TranscriptionButton } from '@ephia/transcribe-sdk';
import '@ephia/transcribe-sdk/dist/styles.css';
 
function App() {
  const token = 'YOUR_API_KEY';
 
  return (
    <TranscriptionProvider>
      <TranscriptionButton token={token} endUserId="user-123" />
      <Transcript />
    </TranscriptionProvider>
  );
}

Clé API : Créer votre clé API.

TranscriptionButton et token

La prop token est obligatoire. Sans token, le bouton reste désactivé.

La prop endUserId est fortement recommandée (sera obligatoire prochainement) : elle identifie l’utilisateur final pour le suivi d’usage, la facturation et l’analytics. Transmis au serveur lors de la connexion WebSocket.

Props de connexion et de flux (détail dans Connexion et flux) :

• streamingUrl (optionnel) : URL WebSocket complète (avec query). Usage avancé si vous construisez vous-même tous les paramètres.
• streamingUrlBase (optionnel) : origine seule ; le SDK ajoute le chemin /api/v2/streaming/live et les paramètres issus des props du bouton.
• audioProcessorUrl (optionnel) : URL du worklet (défaut : /audio-processor.js).

Autres props utiles :

• projectId (optionnel) : rattache la session à un projet.
• onStateChange (optionnel) : callback appelé à chaque changement d’état significatif.

Presets : voir Presets.

useTranscription() : quand l’état est disponible

• Avec TranscriptionProvider et un TranscriptionButton (ou tout composant qui publie dans le contexte) : le hook retourne l’état à jour.
• Sans provider, ou tant que personne n’a encore publié d’état : le hook retourne un état vide — chunks vide, flags à faux, startRecording / stopRecording en no-op. Pour consommer l’état sans provider, utilisez la prop onStateChange sur TranscriptionButton.

Propriétés exposées (TranscriptionState)

Le hook et onStateChange fournissent le même objet logique :

Exemple : afficher la transcription

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

Contrôle programmatique (sans cliquer sur le bouton)

Les fonctions startRecording et stopRecording exposées par useTranscription() sont alimentées par TranscriptionButton tant que ce dernier est monté sous le même TranscriptionProvider (sinon le contexte reste vide ou figé). Vous pouvez déclencher l’enregistrement depuis un autre composant enfant du provider, et masquer le bouton en CSS si vous ne voulez que vos propres contrôles :

function CustomControls() {
  const { startRecording, stopRecording, isRecording, isArming } = useTranscription();
 
  return (
    <div>
      <button type="button" onClick={() => void startRecording()} disabled={isArming || isRecording}>
        Démarrer
      </button>
      <button type="button" onClick={() => void stopRecording()} disabled={!isRecording}>
        Arrêter
      </button>
    </div>
  );
}

Pour une UI sans TranscriptionButton, il faut utiliser useStreamingV2 et gérer vous-même l’état (voir Référence SDK) — le package n’exporte pas TranscriptionContext pour publier un état personnalisé dans useTranscription.

Rendu des segments

• Les chunks portent status: 'interim' | 'final' : vous pouvez n’afficher en dur que les final, ou griser les intermédiaires selon votre expérience.
• Le champ isMedicalCorrection sur un chunk final est renseigné par le serveur (booléen) ; utilisez-le si vous devez distinguer une relecture / correction côté flux.

onStateChange

Alternative au contexte pour recevoir chaque mise à jour significative de l’état (le SDK évite de rappeler le callback quand seuls des détails non pertinents changent, pour limiter le bruit sur le volume) :

<TranscriptionButton
  token={token}
  endUserId="user-123"
  onStateChange={(state) => {
    // state : même forme que useTranscription()
  }}
/>

Codes d’erreur (TranscriptionErrorCode)

Dépannage : Dépannage.