Canvas and WebGL

Note: Canvas recording is enabled in our all our SaaS offerings. The settings -- which are set to their default values -- cannot be changed.

OpenReplay can record the content of <canvas> elements with support for WebGL.

Note: if you’re using WebGL context, make sure you’re adding { preserveDrawingBuffer: true } to .getContext options to prevent blank frames, since extracting image data from canvas usually relies on drawing layer that’s omitted by default.

This has to e done at the backend level. To enable canvas recording, simply run openreplay -e then add the below block to update the http service.

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

Once done, save and exit the config using :wq so OpenReplay can take care of applying the changes.

You can finetune the below options depending on your needs. In fact, some applications may require a higher framerate. Even though snapshot capture and encoding is done in the background (web-worker) and doesn’t impact your app’s performance, going for high values would use more bandwidth on the end user’s level and would require more disk storage on your OpenReplay instance (backend). The images/snapshots, captured by the tracker, are sent to the backend and then processed for session replay purposes.

• CANVAS_QUALITY: 'low' | 'medium' | 'high': Sets the quality of the recorded snapshots. Defaults to low.
• CANVAS_FPS: number: Defines the number of frames per second at which the canvas elements are recorded. Defaults to 1.

The canvas namespace of the JavaScript SDK options comes with the following options:

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

• disableCanvas: Disable canvas recording for the started session. Default: true.
• fixedCanvasScaling: Force canvas capture at a native 600x600 resolution on high DPI monitors. Default: false.
• useAnimationFrame: Enables synchronous recording for a more stable rendering of webGL elements. This may introduce an overhead/lag so it’s suited for low FPS applications only. Default: false.
• fileExt: Choose the format (webp|png|jpeg|avif) of the recorded images. Default: webp (for alpha channel support in WebGL).

Privacy wise, the content of the canvas elements cannot be sanitized.

For live sessions (a.k.a. Assist), no particular settings are necessary. Canvas will be enabled and captured by default and data will be transmitted via the P2P protocol. To ensure optimal network usage, data is only streamed when an agent is watching to the live session and the canvas’ content is changing.

If you have any questions about this process, feel free to reach out to us on our Slack or check out our Forum.