Примечание: запись canvas доступна только в нашем предложении Dedicated Cloud.

OpenReplay может записывать содержимое элементов <canvas> с поддержкой WebGL.

Примечание: если вы используете контекст WebGL, обязательно добавьте { preserveDrawingBuffer: true } в параметры .getContext, чтобы предотвратить появление пустых кадров, поскольку извлечение данных изображения из canvas обычно опирается на слой отрисовки, который по умолчанию пропускается.

Это должно быть сделано на уровне бэкенда. Чтобы включить запись canvas, просто выполните openreplay -e, а затем добавьте приведённый ниже блок для обновления сервиса http.

http:
  env:
    RECORD_CANVAS: true
    CANVAS_QUALITY: low
    CANVAS_FPS: 1

После этого сохраните и выйдите из конфигурации с помощью :wq, чтобы OpenReplay мог применить изменения.

Вы можете точно настроить приведённые ниже параметры в зависимости от ваших потребностей. На самом деле некоторым приложениям может потребоваться более высокая частота кадров. Хотя захват и кодирование снимков выполняются в фоновом режиме (web-worker) и не влияют на производительность вашего приложения, выбор высоких значений приведёт к большему потреблению пропускной способности на стороне конечного пользователя и потребует больше дискового пространства на вашем экземпляре OpenReplay (бэкенд). Изображения/снимки, захваченные трекером, отправляются на бэкенд, а затем обрабатываются для целей воспроизведения сессий.

• CANVAS_QUALITY: 'low' | 'medium' | 'high': задаёт качество записываемых снимков. По умолчанию: low.
• CANVAS_FPS: number: определяет количество кадров в секунду, с которым записываются элементы canvas. По умолчанию: 1.

Пространство имён canvas в параметрах JavaScript SDK включает следующие опции:

canvas?: {
  disableCanvas?: boolean
  fixedCanvasScaling?: boolean
  useAnimationFrame?: boolean
  fileExt?: 'webp' | 'png' | 'jpeg' | 'avif'
}

• disableCanvas: отключает запись canvas для запущенной сессии. По умолчанию: true.
• fixedCanvasScaling: принудительно выполняет захват canvas в нативном разрешении 600x600 на мониторах с высоким DPI. По умолчанию: false.
• useAnimationFrame: включает синхронную запись для более стабильной отрисовки элементов webGL. Это может вносить накладные расходы/задержку, поэтому подходит только для приложений с низким FPS. По умолчанию: false.
• fileExt: выбирает формат (webp|png|jpeg|avif) записываемых изображений. По умолчанию: webp (для поддержки альфа-канала в WebGL).

С точки зрения конфиденциальности содержимое элементов canvas не может быть очищено.

Для живых сессий (также известных как Assist) никаких особых настроек не требуется. Canvas будет включён и захвачен по умолчанию, а данные будут передаваться по протоколу P2P. Для обеспечения оптимального использования сети данные передаются только тогда, когда агент наблюдает за живой сессией и содержимое canvas изменяется.

Если у вас есть какие-либо вопросы об этом процессе, свяжитесь с нами в нашем Slack или загляните на наш Форум.