# General Translation Integrations: API рекордера
URL: https://generaltranslation.com/ru/docs/integrations/rrweb/reference/recorder.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Захватывает поток событий rrweb и локализованный текстовый оверлей. Справочник по API рекордера gt-rrweb.

Импортируйте значения рекордера из `gt-rrweb`. Для записи требуются `react`, `react-dom` и `@rrweb/types`, а также необязательная peer-зависимость `@rrweb/record`.

## Обзор [#overview]

| API                                             | Описание                                                                     |
| ----------------------------------------------- | ---------------------------------------------------------------------------- |
| [`GTRecorder`](#gt-recorder)                    | Подключает конфигурацию рекордера и оверлей записи.                          |
| [`GTRecorderProps`](#gt-recorder-props)         | Пропсы, принимаемые `GTRecorder`.                                            |
| [`useRecorder`](#use-recorder)                  | Запускает и останавливает рекордер на уровне модуля.                         |
| [`UseRecorder`](#use-recorder-result)           | Элементы управления рекордером и текущий статус, возвращаемые `useRecorder`. |
| [`RecordingOverlay`](#recording-overlay)        | Отрисовывает встроенный элемент управления остановкой в портале.             |
| [`RecordingOverlayProps`](#overlay-props)       | Пропсы, принимаемые `RecordingOverlay`.                                      |
| [`RecorderBundle`](#recorder-bundle)            | Завершённый поток событий, список локалей и оверлей.                         |
| [`RecorderConfig`](#recorder-config)            | Список локалей, начинающийся с исходной локали и передаваемый в `start()`.   |
| [`RecorderStatus`](#recorder-status)            | Состояние жизненного цикла рекордера.                                        |
| [`FrameOption`](#frame-option)                  | Конфигурация кадра захвата.                                                  |
| [Стили и шрифты](#styles-fonts)                 | Поведение таблиц стилей и шрифтов во время захвата и воспроизведения.        |
| [`DEFAULT_CONTENT_SELECTOR`](#content-selector) | Селектор содержимого в рамке по умолчанию.                                   |
| [`GT_EVENT`](#gt-event)                         | Пользовательские теги событий rrweb, встроенные в поток.                     |

## `GTRecorder` [#gt-recorder]

Подключите `GTRecorder` один раз рядом с корнем приложения. В режиме ожидания он ничего не отображает, а во время записи показывает `RecordingOverlay`.

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

Конфигурация рекордера сохраняется в виде снимка при запуске сеанса. Изменение Prop во время захвата не влияет на кадр, параметры сбора или callback завершения этого сеанса.

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

| Prop              | Описание                                                                             | Тип                                | Необязательно | По умолчанию               |
| ----------------- | ------------------------------------------------------------------------------------ | ---------------------------------- | ------------- | -------------------------- |
| `enabled`         | Включает конфигурацию и рендеринг рекордера.                                         | `boolean`                          | Да            | `true`                     |
| `contentSelector` | Выбирает область для выделения рамкой.                                               | `string`                           | Да            | `DEFAULT_CONTENT_SELECTOR` |
| `frame`           | Перекомпоновывает выбранную область в кадр захвата.                                  | `FrameOption`                      | Да            | `'none'`                   |
| `expose`          | Добавляет в `window[name]` обработчик с методами `start` и `stop` для автоматизации. | `string \| false`                  | Да            | `false`                    |
| `onComplete`      | Получает готовый бандл после каждого успешного завершения записи.                    | `(bundle: RecorderBundle) => void` | Да            | —                          |
| `harvest`         | Настраивает сбор оверлеев для локалей.                                               | `HarvestOptions`                   | Да            | `{}`                       |
| `labels`          | Переопределяет подписи для записи и остановки.                                       | `{ rec?: string; stop?: string }`  | Да            | Встроенные подписи         |

Выгрузка страницы прерывает активный сеанс. Прерванный сеанс не выполняет сбор переводов и не вызывает `onComplete`.

## `useRecorder` [#use-recorder]

`useRecorder()` подписывается на рекордер уровня модуля и возвращает [`UseRecorder`](#use-recorder-result).

Параллельные вызовы `start()` игнорируются. Вызов `stop()` при отсутствии активной записи возвращает `null`; вызов во время подготовки к запуску отменяет ожидающий сеанс и возвращает `null`.

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

| Значение      | Описание                                                    | Тип                                         |
| ------------- | ----------------------------------------------------------- | ------------------------------------------- |
| `status`      | Текущее состояние жизненного цикла.                         | `RecorderStatus`                            |
| `isRecording` | Указывает, имеет ли `status` значение `recording`.          | `boolean`                                   |
| `start`       | Запускает сеанс после встраивания шрифтов.                  | `(config: RecorderConfig) => Promise<void>` |
| `stop`        | Останавливает запись, собирает переводы и возвращает бандл. | `() => Promise<RecorderBundle \| null>`     |

## `RecordingOverlay` [#recording-overlay]

`RecordingOverlay` — это основанный на портале элемент управления, используемый `GTRecorder`. Он принимает [`RecordingOverlayProps`](#overlay-props). В большинстве приложений он не монтируется напрямую.

## `RecordingOverlayProps` [#overlay-props]

| Prop     | Описание                                                                    | Тип                               | Необязательно | По умолчанию       |
| -------- | --------------------------------------------------------------------------- | --------------------------------- | ------------- | ------------------ |
| `onStop` | Обрабатывает нажатие кнопки остановки.                                      | `() => void`                      | Нет           | —                  |
| `aspect` | Задаёт соотношение сторон кадра захвата; `null` сохраняет исходные размеры. | `number \| null`                  | Да            | `null`             |
| `labels` | Переопределяет подписи для записи и остановки.                              | `{ rec?: string; stop?: string }` | Да            | Встроенные подписи |

## `RecorderBundle` [#recorder-bundle]

| Поле      | Описание                                                    | Тип                                      | Необязательно | По умолчанию |
| --------- | ----------------------------------------------------------- | ---------------------------------------- | ------------- | ------------ |
| `events`  | События rrweb, включая встроенные события локали и оверлея. | `eventWithTime[]`                        | Нет           | —            |
| `locales` | Отслеженные локали, где исходная локаль указана первой.     | `string[]`                               | Нет           | —            |
| `overlay` | Карты соответствия локалей идентификаторам узлов rrweb.     | `Record<string, Record<number, string>>` | Нет           | —            |

Бандл сериализуется в JSON. При отсутствии настройки сбора `overlay` остаётся пустым, не влияя на поток событий. Сбой загрузчика каталога затрагивает только соответствующую локаль; более общий сбой сбора приводит к возврату пустого итогового оверлея. Список локалей и оверлей также встраиваются в виде пользовательских событий, поэтому экспорт, содержащий только события, сохраняет метаданные локализованного воспроизведения для проигрывателя `gt-rrweb`.

## `RecorderConfig` [#recorder-config]

`RecorderConfig` содержит одно обязательное поле: `locales: readonly string[]`. Первой укажите локаль, отображаемую во время записи; остальные локали будут собраны после завершения записи. Рекордер выполняет сбор только в том случае, если список содержит как минимум две локали.

## `RecorderStatus` [#recorder-status]

`RecorderStatus` может принимать значения `'idle' | 'recording' | 'preparing'`. `preparing` включает подготовку шрифтов перед захватом и сбор локалей после него.

## `FrameOption` [#frame-option]

`FrameOption` — это `'none' | '16:9' | { aspect: number }`. Используйте конечное положительное пользовательское соотношение сторон, заданное как ширина, делённая на высоту. Ноль, отрицательные значения и `NaN` обрабатываются так же, как отсутствие кадра захвата.

`'none'` оставляет разметку документа без изменений и воспроизводит записанную область просмотра целиком; `contentSelector` не обрезает запись без кадра захвата. Для `'16:9'` или пользовательского соотношения сторон задайте выбранному элементу `position: fixed` до начала записи: кадрирование содержимого со статичным позиционированием может вывести его за пределы области просмотра.

## Стили и шрифты [#styles-fonts]

Рекордер сохраняет ссылки на таблицы стилей, а не сериализует их CSS. Поэтому воспроизведение может зависеть от того, доступен ли по-прежнему исходный хост таблицы стилей.

Перед захватом рекордер встраивает файлы шрифтов, на которые ссылаются доступные для чтения правила `@font-face`. Он пропускает недоступные для чтения таблицы стилей, пустые файлы шрифтов и файлы, которые не удалось загрузить, а также отдельные файлы шрифтов размером более 5 МиБ. Для пропущенных шрифтов подбирается запасной вариант в зависимости от среды воспроизведения.

## `DEFAULT_CONTENT_SELECTOR` [#content-selector]

`DEFAULT_CONTENT_SELECTOR` имеет значение `main, [data-gt-content]`.

## `GT_EVENT` [#gt-event]

| Поле      | Тег          | Назначение                                                   |
| --------- | ------------ | ------------------------------------------------------------ |
| `nav`     | `gt-nav`     | Регистрирует навигацию в SPA.                                |
| `locales` | `gt-locales` | Регистрирует список отслеживаемых локалей и исходную локаль. |
| `i18n`    | `gt-i18n`    | Хранит собранный оверлей после полного снимка.               |

## Sitemap

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