# General Translation Integrations: API Recorder
URL: https://generaltranslation.com/it/docs/integrations/rrweb/reference/recorder.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Acquisisce un flusso di eventi rrweb e un overlay di testo localizzato. Riferimento API per il recorder gt-rrweb.

Importa i valori del recorder da `gt-rrweb`. La registrazione richiede `react`, `react-dom` e `@rrweb/types`, oltre alla dipendenza peer facoltativa `@rrweb/record`.

## Panoramica [#overview]

| API                                             | Descrizione                                                                      |
| ----------------------------------------------- | -------------------------------------------------------------------------------- |
| [`GTRecorder`](#gt-recorder)                    | Monta la configurazione del registratore e l'overlay di registrazione.       |
| [`GTRecorderProps`](#gt-recorder-props)         | Props accettate da `GTRecorder`.                                                 |
| [`useRecorder`](#use-recorder)                  | Avvia e interrompe il registratore a livello di modulo.                          |
| [`UseRecorder`](#use-recorder-result)           | Controlli del registratore e stato corrente restituiti da `useRecorder`.         |
| [`RecordingOverlay`](#recording-overlay)        | Renderizza il controllo di arresto integrato in un portale.                      |
| [`RecordingOverlayProps`](#overlay-props)       | Props accettate da `RecordingOverlay`.                                           |
| [`RecorderBundle`](#recorder-bundle)            | Flusso di eventi completato, elenco delle impostazioni regionali e overlay.      |
| [`RecorderConfig`](#recorder-config)            | Elenco di impostazioni regionali con la sorgente per prima, passato a `start()`. |
| [`RecorderStatus`](#recorder-status)            | Stato del ciclo di vita del registratore.                                        |
| [`FrameOption`](#frame-option)                  | Configurazione del frame di acquisizione.                                        |
| [Stili e caratteri](#styles-fonts)              | Comportamento dei fogli di stile e dei caratteri durante acquisizione e replay.  |
| [`DEFAULT_CONTENT_SELECTOR`](#content-selector) | Selettore predefinito dei contenuti incorniciati.                                |
| [`GT_EVENT`](#gt-event)                         | Tag di eventi rrweb personalizzati incorporati nel flusso.                       |

## `GTRecorder` [#gt-recorder]

Monta `GTRecorder` una sola volta vicino alla radice dell'applicazione. Non renderizza nulla quando è inattivo e mostra `RecordingOverlay` durante la registrazione.

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

La configurazione del registratore viene acquisita all&#39;avvio di una sessione. Le modifiche alle prop durante l&#39;acquisizione non influiscono sul frame, sulle opzioni per raccogliere o sul callback di completamento di quella sessione.

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

| Prop              | Descrizione                                                                        | Tipo                               | Facoltativo | Predefinito                |
| ----------------- | ---------------------------------------------------------------------------------- | ---------------------------------- | ----------- | -------------------------- |
| `enabled`         | Abilita la configurazione e il rendering del registratore.                         | `boolean`                          | Sì          | `true`                     |
| `contentSelector` | Seleziona la regione da inquadrare.                                                | `string`                           | Sì          | `DEFAULT_CONTENT_SELECTOR` |
| `frame`           | Adatta la regione selezionata a un riquadro di acquisizione.                       | `FrameOption`                      | Sì          | `'none'`                   |
| `expose`          | Aggiunge un riferimento `window[name]` con `start` e `stop` per l&#39;automazione. | `string \| false`                  | Sì          | `false`                    |
| `onComplete`      | Riceve il bundle completato dopo ogni arresto riuscito.                            | `(bundle: RecorderBundle) => void` | Sì          | —                          |
| `harvest`         | Configura la generazione dell&#39;overlay delle impostazioni regionali.            | `HarvestOptions`                   | Sì          | `{}`                       |
| `labels`          | Sovrascrive le etichette di registrazione e arresto.                               | `{ rec?: string; stop?: string }`  | Sì          | Etichette integrate        |

Lo scaricamento della pagina interrompe la sessione attiva. Una sessione interrotta non raccoglie traduzioni né richiama `onComplete`.

## `useRecorder` [#use-recorder]

`useRecorder()` si sottoscrive al recorder a livello di modulo e restituisce [`UseRecorder`](#use-recorder-result).

Le chiamate concorrenti a `start()` vengono ignorate. La chiamata a `stop()` senza una registrazione attiva restituisce `null`; se viene chiamato durante la fase di avvio, annulla la sessione in attesa e restituisce `null`.

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

| Valore        | Descrizione                                                                     | Tipo                                        |
| ------------- | ------------------------------------------------------------------------------- | ------------------------------------------- |
| `status`      | Stato corrente del ciclo di vita.                                               | `RecorderStatus`                            |
| `isRecording` | Indica se `status` è `recording`.                                               | `boolean`                                   |
| `start`       | Avvia una sessione dopo l&#39;incorporamento dei font.                          | `(config: RecorderConfig) => Promise<void>` |
| `stop`        | Interrompe l&#39;acquisizione, raccoglie le traduzioni e restituisce il bundle. | `() => Promise<RecorderBundle \| null>`     |

## `RecordingOverlay` [#recording-overlay]

`RecordingOverlay` è il controllo basato su un portale utilizzato da `GTRecorder`. Accetta [`RecordingOverlayProps`](#overlay-props). Nella maggior parte delle applicazioni non viene montato direttamente.

## `RecordingOverlayProps` [#overlay-props]

| Prop     | Descrizione                                                                                  | Tipo                              | Facoltativo | Predefinito         |
| -------- | -------------------------------------------------------------------------------------------- | --------------------------------- | ----------- | ------------------- |
| `onStop` | Gestisce il pulsante di arresto.                                                             | `() => void`                      | No          | —                   |
| `aspect` | Imposta le proporzioni del riquadro di acquisizione; `null` mantiene le dimensioni naturali. | `number \| null`                  | Sì          | `null`              |
| `labels` | Sovrascrive le etichette di registrazione e arresto.                                         | `{ rec?: string; stop?: string }` | Sì          | Etichette integrate |

## `RecorderBundle` [#recorder-bundle]

| Campo     | Descrizione                                                                             | Tipo                                     | Facoltativo | Predefinito |
| --------- | --------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- | ----------- |
| `events`  | Eventi rrweb, inclusi eventi di impostazione regionale e di overlay incorporati.        | `eventWithTime[]`                        | No          | —           |
| `locales` | Impostazioni regionali tracciate, con l&#39;impostazione regionale sorgente come prima. | `string[]`                               | No          | —           |
| `overlay` | Mappe di traduzione dagli ID nodo rrweb alle impostazioni regionali.                    | `Record<string, Record<number, string>>` | No          | —           |

Il bundle è serializzabile in JSON. Se la raccolta non è configurata, `overlay` rimane vuoto senza invalidare il flusso di eventi. Un errore del loader del catalogo interessa solo quella impostazione regionale; un errore più ampio della raccolta restituisce un overlay complessivo vuoto. Anche l&#39;elenco delle impostazioni regionali e l&#39;overlay vengono incorporati come eventi personalizzati, così un&#39;esportazione dei soli eventi conserva i metadati di riproduzione localizzata per il replayer `gt-rrweb`.

## `RecorderConfig` [#recorder-config]

`RecorderConfig` contiene un campo obbligatorio, `locales: readonly string[]`. Inserisci per prima l&#39;impostazione regionale visibile durante l&#39;acquisizione; le successive vengono raccolte al termine dell&#39;acquisizione. Il registratore esegue la raccolta solo quando l&#39;elenco contiene almeno due impostazioni regionali.

## `RecorderStatus` [#recorder-status]

`RecorderStatus` può essere `'idle' | 'recording' | 'preparing'`. `preparing` comprende sia la preparazione dei font prima dell&#39;acquisizione sia la raccolta delle impostazioni regionali dopo l&#39;acquisizione.

## `FrameOption` [#frame-option]

`FrameOption` è `'none' | '16:9' | { aspect: number }`. Usa un rapporto d&#39;aspetto personalizzato, finito e positivo, espresso come larghezza divisa per altezza. Zero, i valori negativi e `NaN` si comportano come se non ci fosse alcun riquadro.

`'none'` lascia invariato il layout del documento e riproduce l&#39;intero viewport registrato; `contentSelector` non ritaglia una registrazione senza riquadro. Per `'16:9'` o un rapporto d&#39;aspetto personalizzato, applica `position: fixed` all&#39;elemento selezionato prima della registrazione: inquadrare contenuti con posizionamento statico può spostarli fuori dal viewport.

## Stili e font [#styles-fonts]

Il registratore mantiene i collegamenti ai fogli di stile anziché serializzarne il CSS. Di conseguenza, le riproduzioni possono dipendere dalla raggiungibilità dell&#39;host del foglio di stile originale.

Prima della cattura, il registratore incorpora i file dei font referenziati da regole `@font-face` leggibili. Vengono ignorati i fogli di stile non leggibili, i file di font vuoti o non caricati correttamente e i singoli file di font di dimensioni superiori a 5 MiB. Per i font ignorati viene applicato un fallback in base all&#39;ambiente di riproduzione.

## `DEFAULT_CONTENT_SELECTOR` [#content-selector]

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

## `GT_EVENT` [#gt-event]

| Campo     | Tag          | Scopo                                                                                                 |
| --------- | ------------ | ----------------------------------------------------------------------------------------------------- |
| `nav`     | `gt-nav`     | Registra la navigazione nella SPA.                                                                    |
| `locales` | `gt-locales` | Registra l&#39;elenco tracciato delle impostazioni regionali e l&#39;impostazione regionale sorgente. |
| `i18n`    | `gt-i18n`    | Memorizza l&#39;overlay raccolto dopo lo snapshot completo.                                           |

## Sitemap

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