# General Translation Integrations: Reproducción de grabaciones
URL: https://generaltranslation.com/es/docs/integrations/rrweb/guides/replaying-recordings.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Cómo incrustar un bundle de gt-rrweb con el componente de React o la API del player de DOM, y controlar el cambio de configuración regional.

Incrusta un walkthrough grabado y deja que cada espectador lo vea en su propia configuración regional.

El player renderiza la grabación con controles de reproducción, un cursor basado en clics, desplazamiento por la línea de tiempo, temas claro y oscuro, reproducción a pantalla completa y controles de configuración regional cuando el bundle contiene metadatos de configuración regional. Usa el componente de React en vistas de React o la función de DOM cuando gestiones tú mismo el ciclo de vida del player; ambos provienen de `gt-rrweb/replay`.

## Reproducción en React [#react]

Renderiza [`GTReplayer`](/docs/integrations/rrweb/reference/replayer#gt-replayer) con el bundle. El player ocupa todo el ancho de su contenedor. Una grabación con frame aporta su propia relación de aspecto, mientras que una grabación sin frame conserva la altura que le proporciona su elemento padre, por lo que debes dimensionar el elemento padre o pasar `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` solo se aplica cuando esa configuración regional aparece en `bundle.locales`; de lo contrario, la reproducción comienza en la configuración regional de origen. El componente vuelve a crear el player cuando cambia `bundle`, `initialLocale`, `switchLocalesAllowed` o `debug`.

Si solo almacenaste `bundle.events`, pasa esos eventos como un bundle:

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

Las grabaciones creadas por `gt-rrweb` incrustan metadatos de configuración regional y de capa en el flujo de eventos, por lo que una exportación que solo contenga eventos aún puede reproducir contenido localizado.

## Reproducción con la API del DOM [#dom-api]

Llama a [`createGTReplayer()`](/docs/integrations/rrweb/reference/replayer#create-gt-replayer) con un elemento del DOM en cualquier aplicación de navegador. Conserva el identificador devuelto y llama a `destroy()` cuando la vista contenedora deje de existir.

El entry point `gt-rrweb/replay` también exporta el wrapper de React, por lo que tu proyecto debe instalar React y React DOM 18 o posterior incluso cuando llames directamente a la API del DOM.

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

// Cuando se elimina la vista contenedora:
player.destroy();
```

## Controlar el cambio de configuración regional [#locale-switching]

Los controles de configuración regional aparecen cuando el bundle incluye `locales` y `switchLocalesAllowed` no es `false`. Al cambiar, se reemplaza la capa de texto en el mismo documento, sin reconstruir la sesión de rrweb.

* Establece `switchLocalesAllowed={false}` para fijar una incrustación a una sola configuración regional.
* Un bundle sin metadatos de configuración regional ni capas superpuestas reproduce el contenido original grabado tal cual.

## Inspeccionar bundles localmente [#debug]

Activa `debug` durante el desarrollo para arrastrar un archivo JSON de grabación sobre el player y sustituir el bundle activo. Si el JSON no es válido o el archivo no es una grabación, se mostrará un aviso en lugar de reemplazar la sesión.

Deja `debug` desactivado en los embebidos habituales; su valor predeterminado es `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.