Canvas and WebGL

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.

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.

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

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 and converted into a video 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.

Note: Due to limitations of the current video codec, the replay of the canvas recording can have a black (or other solid color) background as it’s impossible to encode the alpha channel. We’re keeping an eye on the subject and we’ll update to newer versions of the codec once it becomes available.

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’re using a canvas above your frontend layer (with higher zIndex), you might notice a black screen during the replay of the recorded sessions. That happens because the web API doesn’t allow us to capture the alpha channel yet. If that’s the case with your web application, add the data-openreplay-hidden HTML attribute to the problematic canvas element to hide it completely from the session recording.

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