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 смог применить изменения.

Примечание: Запись canvas включена во всех наших предложениях SaaS. Настройки — которые установлены в значения по умолчанию — изменить нельзя.

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

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

Примечание: Из-за ограничений текущего видеокодека при воспроизведении записи canvas фон может быть чёрным (или другого сплошного цвета), так как закодировать альфа-канал невозможно. Мы следим за этим вопросом и перейдём на более новые версии кодека, как только они станут доступны.

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

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

Если вы используете canvas поверх слоя вашего фронтенда (с более высоким zIndex), вы можете заметить чёрный экран при воспроизведении записанных сессий. Это происходит потому, что веб-API пока не позволяет нам захватывать альфа-канал. Если это касается вашего веб-приложения, добавьте HTML-атрибут data-openreplay-hidden к проблемному элементу canvas, чтобы полностью скрыть его из записи сессии.

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