# General Translation Integrations: 快速开始
URL: https://generaltranslation.com/zh/docs/integrations/rrweb/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 安装 gt-rrweb，录制一次产品导览，即可基于已发布的翻译在每种区域设置下回放。

`gt-rrweb` 能把一次录制的产品导览变成可在每种区域设置下发布的回放。只需录制一次流程，将其中的文本与你现有的翻译目录配对，观看者便能用自己的语言观看。

## 开始之前 [#before-start]

你需要：

* React 与 React DOM 18 或更高版本。即使只使用共享 replay 入口的 DOM API，也同样需要这些 peer 依赖。
* 一个会发布翻译目录的浏览器应用。
* 一个按区域设置加载已发布目录的函数，即应用本身使用的那个加载器。

## 快速开始 [#quickstart]

### 1. 安装 `gt-rrweb`

安装 `gt-rrweb`，以及它在捕获和回放时所依赖的 rrweb 相关包。

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>
</Tabs>

### 2. 暴露翻译哈希值

录制器通过 DOM 哈希值，将渲染出的 [`<T>`](/docs/react/reference/components/t) 内容与其已发布的翻译进行匹配。请在现有配置中启用 [`_tagIds`](/docs/react/reference/config#tag-ids)，让这些哈希值能够出现在 DOM 中。

```json title="gt.config.json"
{
  "_tagIds": true
}
```

### 3. 添加录制器

在翻译 provider 内部挂载一次 [`GTRecorder`](/docs/integrations/rrweb/reference/recorder#gt-recorder)，并将应用所使用的翻译目录加载器传给它。此后，任何后代组件都可以通过 [`useRecorder()`](/docs/integrations/rrweb/reference/recorder#use-recorder) 控制录制会话。

```tsx title="src/RecordingTools.tsx"
'use client';

import { GTRecorder, useRecorder, type RecorderBundle } from 'gt-rrweb';
import loadTranslations from './loadTranslations';

function download(bundle: RecorderBundle) {
  const url = URL.createObjectURL(
    new Blob([JSON.stringify(bundle)], { type: 'application/json' })
  );
  const link = document.createElement('a');
  link.href = url;
  link.download = 'walkthrough.json';
  link.click();
  URL.revokeObjectURL(url);
}

function Controls() {
  const { start, stop, status } = useRecorder();

  return (
    <div>
      <button onClick={() => start({ locales: ['en', 'es', 'fr'] })}>
        Record
      </button>
      <button onClick={stop} disabled={status !== 'recording'}>
        Stop
      </button>
    </div>
  );
}

export default function RecordingTools() {
  return (
    <>
      <Controls />
      <GTRecorder
        harvest={{ loadTranslations, sourceLocale: 'en' }}
        onComplete={download}
      />
    </>
  );
}
```

传递给 `start()` 的第一个区域设置即为录制所用的区域设置；其后的每个区域设置都会从翻译目录中采集。停止时会等待该采集完成，并以最终生成的 bundle 调用 `onComplete`，同时返回该 bundle。

### 4. 录制产品导览

点击 **Record**，在源区域设置下走完整个流程，然后点击 **Stop**。点击、导航、DOM 变更、滚动位置和页面内容都会被捕获；表单输入值会被遮蔽，鼠标移动遥测数据不会记录。发布前请先审校录制内容，参见 [Store the bundle](/docs/integrations/rrweb/guides/recording-walkthroughs#store-bundle)。

### 5. 回放 bundle

导入保存的 JSON，并在需要展示产品导览的位置渲染 [`GTReplayer`](/docs/integrations/rrweb/reference/replayer#gt-replayer)。

```tsx title="src/Walkthrough.tsx"
'use client';

import { GTReplayer, type GTReplayerBundle } from 'gt-rrweb/replay';
import recording from './walkthrough.json';

const bundle = recording as GTReplayerBundle;

export default function Walkthrough() {
  return <GTReplayer bundle={bundle} style={{ height: '480px' }} />;
}
```

播放器会以录制时的源区域设置启动，并为 bundle 中列出的区域设置显示切换控件。

该类型断言描述的是录制器生成的 JSON 文件，并不会校验任意上传的文件。对于未加取景框的录制，请像示例中那样为其指定明确的回放高度。

## Next steps

- /docs/integrations/rrweb/guides/configuring-recordings
- /docs/integrations/rrweb/guides/recording-walkthroughs
- /docs/integrations/rrweb/guides/replaying-recordings

## Sitemap

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