• Flutter 3.41 o posterior (Dart SDK ^3.0.0).
• Un backend de OpenReplay v1.26.0 o posterior. Los backends más antiguos indican que no admiten frames: los eventos se siguen grabando, pero la pantalla no.

El paquete no tiene dependencias de pub: el protocolo de transmisión, el procesamiento por lotes, gzip y multipart están implementados en Dart, y todo lo nativo pasa por un único platform channel.

flutter pub add openreplay

O añádelo a tu pubspec.yaml:

dependencies:
  openreplay: ^1.0.9

Debes pasar el projectKey a start(). Puedes obtener este valor desde tu panel de OpenReplay en ‘Preferences > Projects’.

Envuelve tu aplicación en OpenReplayWidget y luego inicia el tracker. El envoltorio es obligatorio: proporciona el repaint boundary desde el que se capturan los frames, por lo que sin él no se graba nada.

import 'package:flutter/material.dart';
import 'package:openreplay/openreplay.dart';

void main() {
  runApp(const OpenReplayWidget(child: MyApp()));
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) async {
      await OpenReplay.instance.start(
        projectKey: 'YOUR_PROJECT_KEY',
        // not required if you're using our SaaS version
        serverUrl: 'https://your.instance.com/ingest',
      );
    });
  }

  @override
  Widget build(BuildContext context) => MaterialApp(
        // records screen transitions
        navigatorObservers: [ORNavigatorObserver()],
        home: const HomePage(),
      );
}

Es seguro llamar a start() antes del primer frame: la captura solo comienza una vez que OpenReplayWidget se ha maquetado.

Añade ORNavigatorObserver a tu MaterialApp (o CupertinoApp, o cualquier Navigator) para que las rutas que se añaden y se retiran de la pila aparezcan en la línea de tiempo de la reproducción:

MaterialApp(
  navigatorObservers: [ORNavigatorObserver()],
  // ...
)

Las rutas se reportan mediante route.settings.name. Las rutas sin nombre recurren a su posición en la pila (route/2), por lo que las rutas con nombre producen líneas de tiempo mucho más legibles.

Consulta cómo sanear los datos en las reproducciones de Flutter para más detalles.

Las opciones se pasan como OROptions a start():

await OpenReplay.instance.start(
  projectKey: 'YOUR_PROJECT_KEY',
  options: const OROptions(
    logs: false,
    targetLongEdge: 1080,
  ),
);

• crashes: bool Captura los errores de Dart. Los crashes nativos siguen necesitando un reporter nativo. Valor predeterminado: true.
• analytics: bool Captura toques, deslizamientos, pantallas y entradas. Valor predeterminado: true.
• performances: bool Captura CPU, memoria, batería y estado térmico. Valor predeterminado: true.
• logs: bool Captura la salida de debugPrint. Valor predeterminado: true.
• screen: bool Habilita la captura de frames. Valor predeterminado: true.
• screenshotBatchSize: ScreenshotBatchSize Frames almacenados en el búfer antes de empaquetar y subir un lote: low (10), normal (20) o high (30). Valor predeterminado: normal.
• targetLongEdge: int Borde más largo de un frame capturado, en píxeles. Limita el coste por frame para que no varíe con el tamaño de la pantalla. Valor predeterminado: 720.
• dedupeFrames: bool Omite los frames cuyos píxeles son idénticos byte a byte al anterior. La reproducción no se ve afectada: el reproductor mantiene la última instantánea igual o anterior al momento actual. Valor predeterminado: true.
• maskPlatformViews: bool Cubre las platform views (WebView, mapas, vista previa de la cámara) con un marcador de posición. Se renderizan en capas nativas que Flutter no puede leer, por lo que sin esta opción aparecen en blanco. Valor predeterminado: true.
• wifiOnly: bool Reservado; aún no se aplica. Valor predeterminado: true.
• debugLogs: bool Habilita los logs propios del SDK. Valor predeterminado: false.
• debugImages: bool Vuelca los frames capturados para depuración. Valor predeterminado: false.

Se proporcionan dos presets: OROptions.defaults (todo lo anterior) y OROptions.defaultDebug (lo mismo, con debugLogs: true).

serverUrl apunta por defecto a OpenReplay Cloud. Los despliegues self-hosted lo pasan a start() o lo establecen de antemano:

OpenReplay.instance.serverUrl = 'https://your.instance.com/ingest';

Si tienes alguna pregunta sobre este proceso, no dudes en contactarnos en nuestro Slack o consulta nuestro Foro.