# General Translation Integrations: Rejouer des enregistrements
URL: https://generaltranslation.com/fr/docs/integrations/rrweb/guides/replaying-recordings.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment intégrer un bundle gt-rrweb avec le composant React ou l'API du player DOM, et contrôler le changement de paramètre régional.

Intégrez une démonstration enregistrée et laissez les spectateurs la visionner dans leur propre paramètre régional.

Le player affiche l'enregistrement avec des commandes de lecture, un curseur basé sur les clics, une navigation temporelle, des thèmes clair et sombre, une lecture en plein écran et un contrôle de paramètre régional lorsque le bundle contient des métadonnées de paramètre régional. Utilisez le composant React dans les vues React ou la fonction DOM lorsque vous gérez vous-même le cycle de vie du player ; les deux proviennent de `gt-rrweb/replay`.

## Replay dans React [#react]

Affichez [`GTReplayer`](/docs/integrations/rrweb/reference/replayer#gt-replayer) avec le bundle. Le player occupe toute la largeur de son conteneur. Un enregistrement avec cadre fournit son rapport d'aspect, tandis qu'un enregistrement sans cadre conserve la hauteur fournie par son parent : dimensionnez donc le parent ou passez `style`.

```tsx title="src/Walkthrough.tsx"
import { GTReplayer, type GTReplayerBundle } from 'gt-rrweb/replay';
import recording from './walkthrough.json';

const bundle = recording as GTReplayerBundle;

export function Walkthrough() {
  return (
    <GTReplayer
      bundle={bundle}
      initialLocale="fr"
      switchLocalesAllowed
      style={{ height: '480px' }}
    />
  );
}
```

`initialLocale` ne s&#39;applique que si ce paramètre régional figure dans `bundle.locales` ; sinon, la lecture démarre dans le paramètre régional source. Le composant recrée le player lorsque `bundle`, `initialLocale`, `switchLocalesAllowed` ou `debug` change.

Si vous n&#39;avez stocké que `bundle.events`, passez ces événements sous forme de bundle :

```tsx
<GTReplayer bundle={{ events }} />
```

Les enregistrements créés par `gt-rrweb` intègrent les métadonnées de paramètre régional et d&#39;overlay dans le flux d&#39;événements : un export contenant uniquement les événements peut donc quand même rejouer du contenu localisé.

## Replay avec l&#39;API DOM [#dom-api]

Appelez [`createGTReplayer()`](/docs/integrations/rrweb/reference/replayer#create-gt-replayer) avec un élément du DOM dans n&#39;importe quelle application navigateur. Conservez le handle renvoyé et appelez `destroy()` lorsque la vue hôte est supprimée.

L&#39;entry point `gt-rrweb/replay` exporte également le wrapper React : votre projet doit donc installer React et React DOM 18 ou une version ultérieure, même lorsque vous appelez directement l&#39;API DOM.

```ts title="src/walkthrough.ts"
import { createGTReplayer, type GTReplayerBundle } from 'gt-rrweb/replay';
import recording from './walkthrough.json';

const bundle = recording as GTReplayerBundle;

const container = document.querySelector<HTMLElement>('#walkthrough');
if (!container) throw new Error('Missing walkthrough container');

const player = createGTReplayer(container, bundle, {
  initialLocale: 'fr',
});

// Lorsque la vue hôte est supprimée :
player.destroy();
```

## Contrôler le changement de paramètre régional [#locale-switching]

Les contrôles de paramètres régionaux apparaissent lorsque le bundle inclut `locales` et que `switchLocalesAllowed` n&#39;est pas `false`. Le changement remplace l&#39;overlay de texte sur place, sans reconstruire la session rrweb.

* Définissez `switchLocalesAllowed={false}` pour figer un embed sur un seul paramètre régional.
* Un bundle dépourvu de métadonnées de paramètres régionaux ou d&#39;overlays rejoue la source enregistrée telle quelle.

## Inspecter les bundles en local [#debug]

Activez `debug` pendant le développement pour déposer un fichier JSON d&#39;enregistrement sur le player et remplacer le bundle actif. Un JSON invalide ou un fichier qui n&#39;est pas un enregistrement affiche un message d&#39;avertissement au lieu de remplacer la session.

Laissez `debug` désactivé pour les intégrations ordinaires ; sa valeur par défaut est `false`.

## Next steps

- /docs/integrations/rrweb/guides/configuring-recordings
- /docs/integrations/rrweb/guides/recording-walkthroughs

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.