# General Translation Integrations: API del grabador
URL: https://generaltranslation.com/es/docs/integrations/rrweb/reference/recorder.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Captura un flujo de eventos de rrweb y una superposición de texto localizado. Referencia de la API del grabador de gt-rrweb.

Importa los valores del grabador desde `gt-rrweb`. La grabación requiere `react`, `react-dom` y `@rrweb/types`, además de la dependencia entre pares opcional `@rrweb/record`.

## Descripción general [#overview]

| API                                             | Descripción                                                                               |
| ----------------------------------------------- | ----------------------------------------------------------------------------------------- |
| [`GTRecorder`](#gt-recorder)                    | Monta la configuración de la grabadora y la superposición de grabación.                   |
| [`GTRecorderProps`](#gt-recorder-props)         | Props que acepta `GTRecorder`.                                                            |
| [`useRecorder`](#use-recorder)                  | Inicia y detiene la grabadora de nivel de módulo.                                         |
| [`UseRecorder`](#use-recorder-result)           | Controles de la grabadora y estado actual que devuelve `useRecorder`.                     |
| [`RecordingOverlay`](#recording-overlay)        | Muestra el control integrado para detener la grabación en un portal.                      |
| [`RecordingOverlayProps`](#overlay-props)       | Props que acepta `RecordingOverlay`.                                                      |
| [`RecorderBundle`](#recorder-bundle)            | Flujo de eventos completado, lista de configuraciones regionales y superposición.         |
| [`RecorderConfig`](#recorder-config)            | Lista de configuraciones regionales, con la de origen primero, que se pasa a `start()`.   |
| [`RecorderStatus`](#recorder-status)            | Estado del ciclo de vida de la grabadora.                                                 |
| [`FrameOption`](#frame-option)                  | Configuración del marco de captura.                                                       |
| [Estilos y fuentes](#styles-fonts)              | Comportamiento de las hojas de estilo y las fuentes durante la captura y la reproducción. |
| [`DEFAULT_CONTENT_SELECTOR`](#content-selector) | Selector predeterminado de contenido enmarcado.                                           |
| [`GT_EVENT`](#gt-event)                         | Etiquetas de eventos personalizados de rrweb integradas en el flujo.                      |

## `GTRecorder` [#gt-recorder]

Monta `GTRecorder` una sola vez cerca de la raíz de la aplicación. No renderiza nada cuando está inactivo y muestra `RecordingOverlay` durante la grabación.

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

La configuración del grabador se toma como instantánea al iniciar una sesión. Los cambios en las props durante la captura no modifican el marco, las opciones de recopilación ni el callback de finalización de esa sesión.

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

| Prop              | Descripción                                                                        | Tipo                               | Opcional | Predeterminado             |
| ----------------- | ---------------------------------------------------------------------------------- | ---------------------------------- | -------- | -------------------------- |
| `enabled`         | Habilita la configuración y el renderizado del grabador.                           | `boolean`                          | Sí       | `true`                     |
| `contentSelector` | Selecciona la región que se encuadrará.                                            | `string`                           | Sí       | `DEFAULT_CONTENT_SELECTOR` |
| `frame`           | Reorganiza la región seleccionada en un marco de captura.                          | `FrameOption`                      | Sí       | `'none'`                   |
| `expose`          | Añade un identificador `window[name]` con `start` y `stop` para la automatización. | `string \| false`                  | Sí       | `false`                    |
| `onComplete`      | Recibe el paquete finalizado tras cada detención correcta.                         | `(bundle: RecorderBundle) => void` | Sí       | —                          |
| `harvest`         | Configura la generación de superposiciones de configuración regional.              | `HarvestOptions`                   | Sí       | `{}`                       |
| `labels`          | Reemplaza las etiquetas de grabación y detención.                                  | `{ rec?: string; stop?: string }`  | Sí       | Etiquetas integradas       |

Descargar la página aborta la sesión activa. Una sesión abortada no recopila traducciones ni llama a `onComplete`.

## `useRecorder` [#use-recorder]

`useRecorder()` se suscribe al grabador de nivel de módulo y devuelve [`UseRecorder`](#use-recorder-result).

Las llamadas simultáneas a `start()` se ignoran. Llamar a `stop()` sin una grabación activa devuelve `null`; llamarlo mientras se prepara el inicio cancela la sesión pendiente y devuelve `null`.

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

| Valor         | Descripción                                                          | Tipo                                        |
| ------------- | -------------------------------------------------------------------- | ------------------------------------------- |
| `status`      | Estado actual del ciclo de vida.                                     | `RecorderStatus`                            |
| `isRecording` | Indica si `status` es `recording`.                                   | `boolean`                                   |
| `start`       | Inicia una sesión después de incrustar las fuentes.                  | `(config: RecorderConfig) => Promise<void>` |
| `stop`        | Detiene la captura, recopila las traducciones y devuelve el paquete. | `() => Promise<RecorderBundle \| null>`     |

## `RecordingOverlay` [#recording-overlay]

`RecordingOverlay` es el control basado en portal que usa `GTRecorder`. Acepta [`RecordingOverlayProps`](#overlay-props). La mayoría de las aplicaciones no lo montan directamente.

## `RecordingOverlayProps` [#overlay-props]

| Prop     | Descripción                                                                                    | Tipo                              | Opcional | Predeterminado       |
| -------- | ---------------------------------------------------------------------------------------------- | --------------------------------- | -------- | -------------------- |
| `onStop` | Gestiona el botón de detención.                                                                | `() => void`                      | No       | —                    |
| `aspect` | Define la relación de aspecto del marco de captura; `null` conserva las dimensiones naturales. | `number \| null`                  | Sí       | `null`               |
| `labels` | Reemplaza las etiquetas de grabación y detención.                                              | `{ rec?: string; stop?: string }` | Sí       | Etiquetas integradas |

## `RecorderBundle` [#recorder-bundle]

| Campo     | Descripción                                                                       | Tipo                                     | Opcional | Predeterminado |
| --------- | --------------------------------------------------------------------------------- | ---------------------------------------- | -------- | -------------- |
| `events`  | Eventos de rrweb, incluidos los eventos de configuraciones regionales y de superposición integrados. | `eventWithTime[]`                        | No       | —              |
| `locales` | Configuraciones regionales registradas, con la configuración regional de origen primero.                              | `string[]`                               | No       | —              |
| `overlay` | Mapas de traducción de configuraciones regionales a ID de nodo de rrweb.                             | `Record<string, Record<number, string>>` | No       | —              |

El paquete se puede serializar como JSON. Si la recopilación no está configurada, `overlay` queda vacío sin invalidar el flujo de eventos. Un fallo del cargador del catálogo afecta únicamente a esa configuración regional; un fallo más amplio de la recopilación devuelve una superposición general vacía. La lista de configuraciones regionales y la superposición también se integran como eventos personalizados, de modo que una exportación que solo incluya eventos conserva los metadatos de reproducción localizada para el reproductor de `gt-rrweb`.

## `RecorderConfig` [#recorder-config]

`RecorderConfig` contiene un campo obligatorio: `locales: readonly string[]`. Coloca primero el local visible durante la captura; las demás se recopilan después de detener la captura. El grabador solo ejecuta la recopilación cuando la lista contiene al menos dos locales.

## `RecorderStatus` [#recorder-status]

`RecorderStatus` puede ser `'idle' | 'recording' | 'preparing'`. `preparing` abarca tanto la preparación de fuentes antes de la captura como la recopilación de configuraciones regionales después de ella.

## `FrameOption` [#frame-option]

`FrameOption` es `'none' | '16:9' | { aspect: number }`. Usa una relación de aspecto personalizada finita y positiva, expresada como el ancho dividido entre el alto. El cero, los valores negativos y `NaN` se comportan como si no hubiera marco.

`'none'` deja el diseño del documento sin cambios y reproduce el viewport grabado por completo; `contentSelector` no recorta una grabación sin marco. Para `'16:9'` o una relación de aspecto personalizada, aplica `position: fixed` al elemento seleccionado antes de grabar; enmarcar contenido con posicionamiento static puede desplazarlo fuera del viewport.

## Estilos y fuentes [#styles-fonts]

El grabador conserva los enlaces a las hojas de estilo en lugar de serializar su CSS. Por eso, las reproducciones pueden depender de que el host original de la hoja de estilo siga estando accesible.

Antes de la captura, el grabador incrusta los archivos de fuentes a los que hacen referencia las reglas `@font-face` legibles. Omite las hojas de estilo ilegibles, los archivos de fuentes vacíos o con errores, y los archivos de fuentes individuales de más de 5 MiB. Las fuentes omitidas recurren a contenido alternativo según el entorno de reproducción.

## `DEFAULT_CONTENT_SELECTOR` [#content-selector]

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

## `GT_EVENT` [#gt-event]

| Campo     | Etiqueta     | Propósito                                                          |
| --------- | ------------ | ------------------------------------------------------------------ |
| `nav`     | `gt-nav`     | Registra la navegación en la SPA.                                  |
| `locales` | `gt-locales` | Registra la lista de configuraciones regionales rastreada y la configuración regional de origen.      |
| `i18n`    | `gt-i18n`    | Almacena la superposición recopilada tras la instantánea completa. |

## Sitemap

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