Help centerMobile SDKRest APIIntegrations
Go to Smartlook

Canvas recording

Suggest Edits

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

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

BrowserSince version
Chrome49
Edge79
Firefox29
Opera35
Safari14
Safari on iOS14
WebView Android47
Opera Android36
Samsung Internet5

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: true when calling HTMLCanvasElement.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 over 1 year ago