Canvas & WebGL
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:
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.canvasManualSnapshot is the frame per second rate used in manual snapshotting mode. See
Manual Snapshotting below.
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.
samplingStrategy.canvasClearWebGLBuffer: (advanced) set to false to disable webgl buffer clearing (if the canvas flickers when recording).
samplingStrategy.canvasInitialSnapshotDelay: (advanced) time (in milliseconds) to wait before the initial snapshot of canvas/video elements.
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!
Highlight is able to record websites that use WebGL in the
To enable WebGL recording, enable canvas recording by following the steps above.
If you use WebGL(2) and fail to see a canvas recorded or see a transparent image, setup manual snapshotting.
Manual snapshotting hooks into your WebGL render function to call
you paint to the WebGL context. To set this up, pass the following options to highlight first:
Now, hook into your WebGL rendering code and call
Libraries like Three.js export an onAfterRender method that you can use to call
Webcam Recording and Inlining Video Resources
If you use
<video> element, you'll need to inline the
<video> elements for them to appear correctly in the playback. Do this by enabling the