This article covers the following:
- About Canvas Elements Recording in Wingify Session Recordings
- Supported Canvas Types
- Supported Browsers
- Support for Flutter-based Websites
- Enable Canvas Recording in Wingify Session Recordings
- Limitations
- Best Practices
- FAQs
About Canvas Elements Recording in Wingify Session Recordings
Canvas elements are used for data visualization on web pages. They are not typically tracked or recorded in session recordings. Wingify’s session recordings automatically detects and records canvas elements. This includes 2D, 3D, WebGL elements, and the UI rendered by Flutter-based applications. The enhanced recordings provide a more accurate and insightful analysis of user behavior within dynamic website content, including the visual presentation of Flutter-based apps.
With the canvas element recording feature in Wingify, you can:
- Ensure session recordings capture all canvas elements on a web page. For example, you have a web-based analytics dashboard that visualizes data through interactive charts and graphs. With this feature enabled, Wingify captures the user’s interactions with the charts (such as hovering, clicking, or filtering data) and replays them accurately in the session recording.
- Choose the video’s recording resolution and frame rate (FPS) to balance clarity and performance.
- Hide the canvas elements containing sensitive user data (through recording settings) to ensure privacy and data compliance.
Supported Canvas Types
- 2D
- 3D
- WebGL
Attention: You may observe slight flickering or fluttering on the screen when session recordings replay WebGL canvases. This is because the drawing buffer in WebGL clears frequently. To reduce the flickering, you may set preserveDrawingBuffer to true. For more information, see WebGL Tips. However, configuring this setting may impact the website's performance. Use it only when necessary.
Supported Browsers
Wingify supports canvas elements in session recordings on all the latest browsers that run the most up-to-date canvas API.
Support for Flutter-based Websites
Wingify supports canvas recording for Flutter-based websites. To use this feature, enable canvas recording in session recordings and follow the Flutter SDK documentation for detailed instructions.
Enable Canvas Recording in Wingify Session Recordings
- Canvas elements may contain sensitive information. They do not get masked or anonymized. Wingify does not capture canvas elements by default for data protection and compliance purposes. Enable canvas recording only if you are sure your application's canvas elements do not contain any Personally Identifiable Information (PII) or sensitive data.
- If you want to record a canvas element containing PII or sensitive information, you may anonymize it through recording settings. Alternatively, you may add the nls_protected class to the parent hierarchy of the canvas element. This prevents the canvas element from being shown in future session recordings. A blank canvas replaces the recorded canvas element.
To enable canvas recording in Wingify session recordings:
- Go to Insights > Session Recordings.
- Click the Settings icon.
- Check the Show Canvas elements in recordings box to enable it for your account. A warning pop-up displays the terms and conditions. Ensure you read them carefully before clicking Proceed.
- Configure the video recording and quality settings. Use the slider to set the Recording Frame Rate and select the Recording Resolution. By default, they are set to 2 fps and 480 p, respectively.
Note: Higher resolution and frame rates impact the website’s performance and enlarge recording sizes. High-detail canvases may also experience reduced clarity. We recommend starting with the default settings and adjusting them as needed. - Click Save.
Once the configuration is saved successfully, a confirmation message appears. Now, all future session recordings will display canvas elements, too.
Limitations
- Wingify records canvas content only when it is visible. If an element is hidden using CSS or the page with the canvas element is minimized, Wingify automatically skips it.
- Wingify does not capture repeated hovering, text selection, or text highlighting over a canvas element.
- Wingify does not track or record dead clicks on canvases.
Best Practices
- For optimal performance, begin with default video quality settings. Then, incrementally adjust resolution and FPS based on your performance needs.
- To ensure data protection and safeguard sensitive data, leverage Wingify’s masking capabilities. For example, you can configure session recordings to exclude URLs or anonymize canvas elements containing PII. Or, for Flutter-based websites, you can mask a widget on a screen using vwoWrapper or pause the recording when you need to hide a screen.
FAQs
-
Do recordings capture canvas updates in real-time?
Yes, Wingify records canvas updates dynamically to ensure accurate playback.
-
What happens if a page contains multiple canvas elements?
Wingify records all visible canvas elements unless you exclude them explicitly.
-
Can users interact with recorded canvas elements during session recording playback?
No, session recordings are view-only and do not allow interaction with recorded canvas elements.
-
Can I pause the canvas recording for a specific session?
No, you cannot pause canvas recording for a specific session.
-
Does canvas recording capture real-time video streams?
If the video is rendered using a canvas element, then Wingify captures it.
Need more help?
For more information or further assistance, contact Wingify Support.