# General Translation Integrations: API Recorder
URL: https://generaltranslation.com/fr/docs/integrations/rrweb/reference/recorder.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Capturez un flux d’événements rrweb et une superposition de texte localisée. Référence d’API de l’enregistreur gt-rrweb.

Importez les valeurs de l’enregistreur depuis `gt-rrweb`. L’enregistrement nécessite `react`, `react-dom` et `@rrweb/types`, ainsi que la dépendance de pair facultative `@rrweb/record`.

## Vue d’ensemble [#overview]

| API                                             | Description                                                                           |
| ----------------------------------------------- | ------------------------------------------------------------------------------------- |
| [`GTRecorder`](#gt-recorder)                    | Monte la configuration de l’enregistreur et la superposition d’enregistrement.        |
| [`GTRecorderProps`](#gt-recorder-props)         | Props acceptées par `GTRecorder`.                                                     |
| [`useRecorder`](#use-recorder)                  | Démarre et arrête l’enregistreur au niveau du module.                                 |
| [`UseRecorder`](#use-recorder-result)           | Contrôles de l’enregistreur et état actuel renvoyés par `useRecorder`.                |
| [`RecordingOverlay`](#recording-overlay)        | Affiche le contrôle d’arrêt intégré dans un portail.                                  |
| [`RecordingOverlayProps`](#overlay-props)       | Props acceptées par `RecordingOverlay`.                                               |
| [`RecorderBundle`](#recorder-bundle)            | Flux d’événements finalisé, liste des paramètres régionaux et superposition.          |
| [`RecorderConfig`](#recorder-config)            | Liste des paramètres régionaux, avec la source en premier, transmise à `start()`.     |
| [`RecorderStatus`](#recorder-status)            | État du cycle de vie de l’enregistreur.                                               |
| [`FrameOption`](#frame-option)                  | Configuration du cadre de capture.                                                    |
| [Styles et polices](#styles-fonts)              | Comportement des feuilles de style et des polices pendant la capture et la relecture. |
| [`DEFAULT_CONTENT_SELECTOR`](#content-selector) | Sélecteur de contenu encadré par défaut.                                              |
| [`GT_EVENT`](#gt-event)                         | Tags d’événements rrweb personnalisés intégrés au flux.                               |

## `GTRecorder` [#gt-recorder]

Montez `GTRecorder` une seule fois près de la racine de l’application. Il n’affiche rien lorsqu’il est inactif et affiche `RecordingOverlay` pendant l’enregistrement.

```tsx
<GTRecorder
  harvest={{ loadTranslations, sourceLocale: 'en' }}
  onComplete={saveBundle}
/>
```

La configuration de l’enregistreur est figée dans un instantané au démarrage d’une session. Les modifications des props pendant la capture ne modifient ni le cadre, ni les options de collecte, ni le callback de fin de cette session.

## `GTRecorderProps` [#gt-recorder-props]

| Prop              | Description                                                                  | Type                               | Facultatif | Par défaut                 |
| ----------------- | ---------------------------------------------------------------------------- | ---------------------------------- | ---------- | -------------------------- |
| `enabled`         | Active la configuration et le rendu de l’enregistreur.                       | `boolean`                          | Oui        | `true`                     |
| `contentSelector` | Sélectionne la région à encadrer.                                            | `string`                           | Oui        | `DEFAULT_CONTENT_SELECTOR` |
| `frame`           | Réagence la région sélectionnée dans un cadre de capture.                    | `FrameOption`                      | Oui        | `'none'`                   |
| `expose`          | Ajoute un accès `window[name]` avec `start` et `stop` pour l’automatisation. | `string \| false`                  | Oui        | `false`                    |
| `onComplete`      | Reçoit le bundle finalisé après chaque arrêt réussi.                         | `(bundle: RecorderBundle) => void` | Oui        | —                          |
| `harvest`         | Configure la génération de superpositions de paramètres régionaux.           | `HarvestOptions`                   | Oui        | `{}`                       |
| `labels`          | Remplace les libellés d’enregistrement et d’arrêt.                           | `{ rec?: string; stop?: string }`  | Oui        | Libellés intégrés          |

Le déchargement de la page interrompt la session active. Une session interrompue ne collecte pas de traductions et n’appelle pas `onComplete`.

## `useRecorder` [#use-recorder]

`useRecorder()` s’abonne à l’enregistreur défini au niveau du module et renvoie [`UseRecorder`](#use-recorder-result).

Les appels simultanés à `start()` sont ignorés. Appeler `stop()` sans enregistrement actif renvoie `null` ; l’appeler pendant la préparation du démarrage annule la session en attente et renvoie `null`.

## `UseRecorder` [#use-recorder-result]

| Valeur        | Description                                                       | Type                                        |
| ------------- | ----------------------------------------------------------------- | ------------------------------------------- |
| `status`      | État actuel du cycle de vie.                                      | `RecorderStatus`                            |
| `isRecording` | Indique si `status` vaut `recording`.                             | `boolean`                                   |
| `start`       | Démarre une session une fois les polices intégrées.               | `(config: RecorderConfig) => Promise<void>` |
| `stop`        | Arrête la capture, collecte les traductions et renvoie le bundle. | `() => Promise<RecorderBundle \| null>`     |

## `RecordingOverlay` [#recording-overlay]

`RecordingOverlay` est le contrôle fondé sur un portail utilisé par `GTRecorder`. Il accepte [`RecordingOverlayProps`](#overlay-props). La plupart des applications ne l’utilisent pas directement.

## `RecordingOverlayProps` [#overlay-props]

| Prop     | Description                                                                                  | Type                              | Facultatif | Par défaut        |
| -------- | -------------------------------------------------------------------------------------------- | --------------------------------- | ---------- | ----------------- |
| `onStop` | Gère le bouton d’arrêt.                                                                      | `() => void`                      | Non        | —                 |
| `aspect` | Définit le rapport d’aspect du cadre de capture ; `null` préserve les dimensions naturelles. | `number \| null`                  | Oui        | `null`            |
| `labels` | Remplace les libellés d’enregistrement et d’arrêt.                                           | `{ rec?: string; stop?: string }` | Oui        | Libellés intégrés |

## `RecorderBundle` [#recorder-bundle]

| Champ     | Description                                                                                    | Type                                     | Facultatif | Par défaut |
| --------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------- | ---------- |
| `events`  | Événements rrweb, y compris les événements intégrés de paramètre régional et de superposition. | `eventWithTime[]`                        | Non        | —          |
| `locales` | Paramètres régionaux tracés, le paramètre régional source en premier.                          | `string[]`                               | Non        | —          |
| `overlay` | Mappages entre les paramètres régionaux et les ID de nœuds rrweb.                              | `Record<string, Record<number, string>>` | Non        | —          |

Le bundle est sérialisable en JSON. En l’absence de configuration de la collecte, `overlay` reste vide sans invalider le flux d’événements. L’échec d’un chargeur de catalogue n’affecte que le paramètre régional concerné ; un échec plus large de la collecte renvoie une superposition globale vide. La liste des paramètres régionaux et la superposition sont également intégrées sous forme d’événements personnalisés : un export contenant uniquement les événements conserve donc les métadonnées de lecture localisée destinées au lecteur `gt-rrweb`.

## `RecorderConfig` [#recorder-config]

`RecorderConfig` contient un champ obligatoire, `locales: readonly string[]`. Placez en premier le paramètre régional affiché pendant la capture ; les suivants sont collectés une fois la capture terminée. L’enregistreur ne lance la collecte que si la liste contient au moins deux paramètres régionaux.

## `RecorderStatus` [#recorder-status]

`RecorderStatus` peut être `'idle' | 'recording' | 'preparing'`. `preparing` couvre à la fois la préparation des polices avant la capture et la collecte des paramètres régionaux après la capture.

## `FrameOption` [#frame-option]

`FrameOption` vaut `'none' | '16:9' | { aspect: number }`. Utilisez un rapport d&#39;aspect personnalisé fini et positif, exprimé sous la forme largeur divisée par hauteur. Zéro, les valeurs négatives et `NaN` équivalent à l&#39;absence de cadre.

`'none'` laisse la mise en page du document inchangée et rejoue l&#39;intégralité de la fenêtre d&#39;affichage enregistrée ; `contentSelector` ne recadre pas un enregistrement sans cadre. Pour `'16:9'` ou un rapport personnalisé, appliquez `position: fixed` à l&#39;élément sélectionné avant l&#39;enregistrement ; encadrer un contenu positionné en `static` risque de le déplacer hors de la fenêtre d&#39;affichage.

## Styles et polices [#styles-fonts]

Le enregistreur conserve les liens vers les feuilles de style au lieu de sérialiser leur CSS. Les replays peuvent donc dépendre du fait que l&#39;hôte d&#39;origine de la feuille de style reste accessible.

Avant la capture, le enregistreur intègre les fichiers de police référencés par des règles `@font-face` lisibles. Il ignore les feuilles de style illisibles, les fichiers de police vides ou en échec, ainsi que les fichiers de police dépassant 5 Mio. Les polices ignorées font l&#39;objet d&#39;un repli déterminé par l&#39;environnement de replay.

## `DEFAULT_CONTENT_SELECTOR` [#content-selector]

`DEFAULT_CONTENT_SELECTOR` vaut `main, [data-gt-content]`.

## `GT_EVENT` [#gt-event]

| Champ     | Tag          | Objectif                                                                             |
| --------- | ------------ | ------------------------------------------------------------------------------------ |
| `nav`     | `gt-nav`     | Enregistre la navigation dans la SPA.                                                |
| `locales` | `gt-locales` | Enregistre la liste des paramètres régionaux tracés et le paramètre régional source. |
| `i18n`    | `gt-i18n`    | Stocke la superposition collectée après l&#39;instantané complet.                    |

## Sitemap

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