Canvas Recording

Highlight can record the contents of <canvas> elements, with support for 2D and 3D contexts. Canvas recording can be enabled and configured via the H.init options, set up depending on the type of HTML5 Canvas application you are building. For example, a video game WebGL application or three.js visualization may require a higher snapshotting framerate to ensure the replay has enough frames to understand what was happening.

Enable canvas recording by configuring H.init() in the following way:

H.init('<YOUR_PROJECT_ID>', {
  enableCanvasRecording: true,        // enable canvas recording
  samplingStrategy: {
    canvas: 2,                        // snapshot at 2 fps
    canvasMaxSnapshotDimension: 480,  // snapshot at a max 480p resolution
  },
})

With these settings, the canvas is serialized as a 480p video at 2FPS.

samplingStrategy.canvas is the frame per second rate used to record the HTML canvas. A value < 5 is recommended to ensure the recording is not too large and does not have issues with playback.

samplingStrategy.canvasFactor: a resolution scaling factor applied to both dimensions of the canvas.

samplingStrategy.canvasMaxSnapshotDimension: max recording resolution of the largest dimension of the canvas.

Privacy controls do not apply to canvas recording at this time.

Enabling canvas recording should not have any impact on the performance your application. We've recently changed our uploading client to use browser web-workers to ensure that data serialization cannot block the rendering of your application. If you run into any issues please let us know!

WebGL Recording

Highlight is able to record websites that use WebGL in the <canvas> element.

To enable WebGL recording, enable canvas recording by following the steps above.

Webcam Recording and Inlining Video Resources

If you use src=blob: <video> elements in your app (for example, you are using javascript to dynamically generate a video stream) or are streaming a webcam feed to a <video> element, you'll need to inline the <video> elements for them to appear correctly in the playback. Do this by enabling the inlineImages setting.

H.init('<YOUR_PROJECT_ID>', {
  ..., 
  inlineImages: true,
})