Installation

Liens utiles

npm : @ephia/transcribe-sdk
Playground : essayer le SDK sur la plateforme

Paquet npm

⚠️

Sans le fichier audio-processor.js servi à l’URL attendue (par défaut /audio-processor.js), le SDK renverra une erreur audio_worklet_error. Copiez-le depuis node_modules/@ephia/transcribe-sdk/dist/ vers vos assets statiques.

1. Installer

npm install @ephia/transcribe-sdk

Peer dependencies (voir le package.json du paquet) : react et react-dom en ≥ 17.0.0.

2. Servir le worklet audio (`audio-processor.js`)

Le SDK charge le script du AudioWorklet depuis une URL statique. Par défaut : /audio-processor.js à la racine du site servi au navigateur.

Copiez le fichier depuis le package installé (répertoire dist) :

cp node_modules/@ephia/transcribe-sdk/dist/audio-processor.js public/audio-processor.js

Adaptez public/ à votre outil (Next.js, Vite, etc.). Sinon, passez audioProcessorUrl sur TranscriptionButton.

3. Importer les styles

Nécessaire pour le rendu du bouton :

import '@ephia/transcribe-sdk/dist/styles.css';

Le package exporte aussi la même feuille sous @ephia/transcribe-sdk/styles.css (exports du package.json).

TypeScript

Aucune configuration spéciale n’est requise au-delà de votre tsconfig React habituel : importez les symboles depuis @ephia/transcribe-sdk et utilisez les types exportés (TranscriptionButtonProps, TranscriptionState, etc.) si besoin. Voir Référence SDK.

Variable `NEXT_PUBLIC_WS_URL` (Next.js, dev local)

Si vous travaillez sur localhost et que le backend WebSocket n’est pas sur la cible par défaut du SDK (ws://localhost:8765), vous pouvez définir dans .env.local :

NEXT_PUBLIC_WS_URL=ws://127.0.0.1:9000

(valeur d’exemple : origine seule, sans chemin /api/v2/streaming/live.) Détails : Connexion et flux.

4. Provider, bouton, `token` et `endUserId`

Enveloppez votre arbre avec TranscriptionProvider.
Affichez TranscriptionButton avec la prop token (obligatoire — sans cela le bouton reste désactivé).
Fournissez endUserId pour le suivi d’usage et la facturation (fortement recommandé, sera obligatoire prochainement).

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

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

Voir Utilisation.

Next.js (App Router)

Le microphone et le worklet sont des API navigateur : le composant qui contient TranscriptionButton doit être un Client Component :

'use client';

Sans React

Le SDK est prévu pour React (Provider, hooks). Il n’expose pas de bundle « vanilla » documenté dans le paquet.

Introduction Utilisation