Skip to main content

Recording

Liqvid is designed mainly for producing interactive tutorials. This requires recording a lot of human actions, such as typing or pointing. These effects are provided by a suite of recording packages.

Recording functionality itself is provided in the @liqvid/recording package. There are also several @lqv/* plugins for more particular types of recordings. The easiest way to get started with these is by cloning their demos:

These plugins can also be used with animation engines other than Liqvid. To get started, clone the demos for your framework:

As a consumer, you only need <RecordingControl>, AudioRecording, and VideoRecording, as well as the plugins in the next section. If you want to write your own recording plugins, you'll need to understand RecordingManager, but it's probably easiest to look at the source of our recording plugins.

Plugins vs integrations​

Plugins are different from the integrations covered in the previous section. Concretely, plugins

  • live in the @lqv namespace.

  • may not depend on the main liqvid package. May not depend on @liqvid/* packages other than @liqvid/recording and @liqvid/utils.

  • must be compatible with other animation engines such as Remotion, GSAP, or plain HTML <audio> and <video> elements.

  • tend to be fairly complex packages, having to do with recording human interactions.

whereas integrations:

  • live in the @liqvid namespace, and are only intended to be used with Liqvid.

  • tend to be thin compatibility layers with third-party libraries.

Usage​

To install:

npm install @liqvid/recording

To use:

import {Playback, Script} from "liqvid";
import {AudioRecording, RecordingControl} from "@liqvid/recording";

const controls = [<RecordingControl plugins={[AudioRecording]} />]
const playback = new Playback({duration: 10000});

<Player controls={controls} playback={playback}>
  {/* ... */}
</Player>

You also need to add this to your CSS:

@import "https://unpkg.com/@liqvid/recording/dist/style.css";
danger

Warning: by default, Player will pause/play whenever the canvas is clicked. Since this is annoying while recording, @liqvid/recording disables this when it is loaded as a control. Therefore, once you are done recording, you need to make sure that you are using data-affords="click" as needed.

Exports​

AudioRecording​

Audio recording plugin. Pass to plugins prop on <RecordingControl>.

danger

The audio recording produced by the browser will not have the metadata needed for seeking. To fix the recording and make it available as mp4: 

liqvid audio convert audio.webm

MarkerRecording​

Plugin for recording markers. Pass to plugins prop on <RecordingControl>.

<RecordingControl>​

Liqvid recording control.

Props​

  • plugins: RecordingPlugin[]
    Recording plugins to use.

Recorder​

Abstract class for recording interactions.

Methods​

  • beginRecording(): void
    Begin recording.

  • pauseRecording(): void
    Pause recording.

  • resumeRecording(): void
    Resume recording from paused.

  • endRecording(): Promise<IntransigentReturn> | void
    End recording.

  • finalizeRecording()
    Finalize recording data. Parameters:

RecordingManager​

Class for managing recording sessions.

Methods​

  • beginRecording(plugins): void
    Begin recording. Parameters:

    • plugins: Record<string, Recorder>
      Named map of recording plugins to use.

  • capture(key, value): void
    Commit a piece of recording data. Parameters:

    • key: string
      Key for recording source.
    • value: unknown
      Data to record.

  • endRecording(): Promise<unknown>
    End recording and collect finalized data from recorders.

  • getTime(): number
    Get current recording time.

  • pauseRecording(): void
    Pause recording.

  • resumeRecording(): void Resume recording from paused state.

Properties​

  • active: boolean
    Whether recording is currently in progress.

  • paused: boolean
    Whether recording is currently paused.

VideoRecording​

Video recording plugin. Pass to plugins prop on <RecordingControl>.

compress()​

Truncate numerical precision to reduce filesize.

Parameters​

  • o: any
    Data to compress.

  • precision?: number = 2
    Number of decimal points to include.