# General Translation Integrations: 回放录制
URL: https://generaltranslation.com/zh/docs/integrations/rrweb/guides/replaying-recordings.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 如何使用 React 组件或 DOM 播放器 API 嵌入 gt-rrweb bundle，并控制区域设置切换。

嵌入录制好的操作演示，让观看者以自己的区域设置观看。

播放器会渲染录制，并提供播放控件、基于点击的光标、进度拖动、明暗主题、全屏播放，以及在 bundle 中包含区域设置元数据时显示的区域设置控件。在 React 视图中请使用 React 组件，若需自行管理播放器生命周期则使用 DOM 函数；两者均来自 `gt-rrweb/replay`。

## 在 React 中回放 [#react]

渲染 [`GTReplayer`](/docs/integrations/rrweb/reference/replayer#gt-replayer) 并传入 bundle。播放器会占满容器宽度。带 frame 的录制会提供自身的宽高比，而不带 frame 的录制则沿用父元素给定的高度，因此请为父元素设定尺寸，或传入 `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`，请将这些事件作为 bundle 传入：

```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 wrapper，因此即使你直接调用 DOM API，项目也必须安装 React 和 React DOM 18 或更高版本。

```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]

当 bundle 包含 `locales` 且 `switchLocalesAllowed` 不为 `false` 时，会显示区域设置控件。切换时会原地替换文本叠加层，无需重建 rrweb 会话。

* 设置 `switchLocalesAllowed={false}` 可将嵌入内容固定为单一区域设置。
* 若 bundle 不含区域设置元数据或叠加层，则按原样回放录制的源内容。

## 在本地检查 bundle [#debug]

开发时开启 `debug`，即可将 recording JSON 文件拖放到播放器上，替换当前生效的 bundle。若 JSON 无效或文件并非 recording，则只会显示提示信息，而不会替换会话。

普通嵌入场景请保持 `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.