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 in web/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.

ValueVideo sizeFPS
canvas-lq1 MB/min1
canvas-mq1.5 MB/min2
canvas-hq2 MB/min3

Examples

HTML

<canvas data-sl="canvas-mq"></canvas>

JavaScript

Single canvas element

const canvasElement = document.querySelector("#my-canvas")
canvasElement.dataset.sl = "canvas-mq"

All canvas elements

document.body.dataset.sl = "canvas-mq"

Compatibility

There is a limitation in replaying videos from the canvas. Basically, recording can be properly replayed only in the same browser used for recording.

BrowserSince versionRecords and Replays
Chrome49WebM / VP8
Edge79WebM / VP8
Firefox29WebM / VP8
Opera35WebM / VP8
Safari14MP4 / AVC
Safari on iOS14MP4 / AVC
WebView Android47WebM / VP8
Opera Android36WebM / VP8
Samsung Internet5WebM / VP8