# General Translation Integrations: Воспроизведение записей
URL: https://generaltranslation.com/ru/docs/integrations/rrweb/guides/replaying-recordings.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Как встроить бандл gt-rrweb с помощью React-компонента или DOM-API плеера и управлять переключением локалей.

Встройте записанное пошаговое демо, чтобы зрители могли смотреть его на своей локали.

Плеер воспроизводит запись с элементами управления воспроизведением, курсором с отображением кликов, перемоткой, светлой и тёмной темами, полноэкранным режимом и элементами управления локалью, если бандл содержит метаданные локали. Используйте React-компонент в React-представлениях или DOM-функцию, если вы сами управляете жизненным циклом плеера; и то, и другое доступно из `gt-rrweb/replay`.

## Воспроизведение в React [#react]

Отрендерите [`GTReplayer`](/docs/integrations/rrweb/reference/replayer#gt-replayer), передав ему бандл. Плеер занимает всю ширину контейнера. Запись с кадром захвата задаёт собственное соотношение сторон, а запись без кадра захвата сохраняет высоту, заданную родительским элементом, поэтому задайте размер родительского элемента или передайте `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` применяется только в том случае, если эта локаль присутствует в `bundle.locales`; в противном случае воспроизведение начинается с исходной локали. Компонент пересоздаёт плеер при изменении `bundle`, `initialLocale`, `switchLocalesAllowed` или `debug`.

Если вы сохранили только `bundle.events`, передайте эти события как бандл:

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

Записи, созданные с помощью `gt-rrweb`, встраивают метаданные о локали и оверлее в поток событий, поэтому экспорт, содержащий только события, всё равно позволяет воспроизвести локализованный контент.

## Воспроизведение через DOM API [#dom-api]

В любом браузерном приложении вызовите [`createGTReplayer()`](/docs/integrations/rrweb/reference/replayer#create-gt-replayer), передав DOM-элемент. Сохраните возвращённый дескриптор и вызовите `destroy()`, когда родительское представление будет удалено.

Точка входа `gt-rrweb/replay` также экспортирует React-обёртку, поэтому в проекте должны быть установлены React и React DOM версии 18 или выше — даже если вы обращаетесь к DOM API напрямую.

```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',
});

// При удалении родительского представления:
player.destroy();
```

## Управление переключением локалей [#locale-switching]

Элементы управления локалью появляются, если бандл содержит `locales`, а `switchLocalesAllowed` не равен `false`. При переключении текстовый оверлей заменяется на месте, без пересборки сессии rrweb.

* Укажите `switchLocalesAllowed={false}`, чтобы закрепить встраивание за одной локалью.
* Бандл без метаданных о локалях или без оверлеев воспроизводит записанный исходный текст как есть.

## Локальная проверка бандлов [#debug]

Включите `debug` во время разработки, чтобы можно было перетащить JSON-файл записи на плеер и заменить активный бандл. Если JSON некорректен или файл не является записью, вместо замены сессии выводится уведомление.

Для обычных встраиваний оставьте `debug` выключенным; по умолчанию он равен `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.