Canvas recording
Canvas is a special HTML element that is not commonly tracked. Instead, Smartlook captures a video of this element, which is then embedded into the recording in place of the recorded canvas.
Flutter-based websites
If you built your website using Flutter, you may need to enable this feature. Without enabling this feature, the session recording could be blank.
To enable recording in Flutter, add
data-sl="canvas-xx"to the body element inweb/index.html.If you are also using Flutter on your iOS or Android app, you can refer to the mobile Flutter SDK installation.
Getting started
Recording can be enabled by setting the data-sl attribute on the canvas element or its predecessors.
Attribute value specifies the recording quality.
| Value | Video size | FPS |
|---|---|---|
| canvas-lq | 1 MB/min | 1 |
| canvas-mq | 1.5 MB/min | 2 |
| canvas-hq | 2 MB/min | 3 |
Examples
Single canvas element
<canvas data-sl="canvas-mq"></canvas>
const canvasElement = document.querySelector("#my-canvas")
canvasElement.dataset.sl = "canvas-mq"
All canvas elements in the document
<body data-sl="canvas-mq">
...
</body>
document.body.dataset.sl = "canvas-mq"
Replaying Compatibility
We recommend replaying in chromium-based browsers (Chrome, Edge, Opera, etc.). Safari, Firefox and others do not support all the possibly recorded formats.
Recording Compatibility
| Browser | Since version |
|---|---|
| Chrome | 49 |
| Edge | 79 |
| Firefox | 29 |
| Opera | 35 |
| Safari | 14 |
| Safari on iOS | 14 |
| WebView Android | 47 |
| Opera Android | 36 |
| Samsung Internet | 5 |
Current limitation
Recording canvas is limited by reading drawing buffers, which means smartlook is able to record only paints that happen after smartlook is initialized.
In other words if your canvas is not redrawn after smartlook's initialization then it is not captured and recording will contain blank space. Typically this is the case when you might have some "static" canvas which is only rendered on the page load. There is a possibility to get around this issue. You can use flag
preserveDrawingBuffer: truewhen callingHTMLCanvasElement.getContext.
Cross-origin content in canvas can't be recorded due to security reasons.
The only solution for this issue is to use only same-origin content.
Updated about 2 years ago