Interactive Video API Reference

Contents

• Recorder
• TypeRecorderTime
• FunctionMap

---

Recorder

The Recorder class provides functionality to record and playback video like experiences. It can:

• record and playback events, such as function calls, mouse movements, mouse clicks and slide navigation - these can either be recorded by a user, or programmed for specific times
• overlay an audio track on playback
• record entire figure state at regular intervals (like 1 second) as seek frames for the video
• allow a user to pause video at any time and interact with the figure in its current state - on resuming playback, the figure will revert to its paused state

For performance during recording, a separate javascript worker is used to parallelize state encoding. Therefore, in addition to the FigureOne library, a FigureOne worker file will need to be loaded. See the tutorials for examples on how this is done.

For tutorials and examples of how to use Recorder, see

• Tutorial 15 - Recorder Introduction
• Tutorial 16 - Recording Manual Events
• Tutorial 17 - Recording Slides
• Tutorial 18 - Recording Planned Events
• Trig 1 - Trig Functions
• Trig 2 - Names
• Trig 3 - Relationships

Notifications - The notification manager property notifications will publish the following events:

• timeUpdate: updated at period defined in property timeUpdates
• durationUpdated: updated whenever audio or video are loaded, or when recording goes beyond the current duration
• audioLoaded
• videoLoaded
• recordingStarted
• recordingStopped
• preparingToPlay
• playbackStarted
• preparingToPause
• playbackStopped
• seek
• recordingStatesComplete - recording completed and recorded states ready

@class

Properties

• state: 'recording' | 'playing' | 'idle' | 'preparingToPlay' | 'preparingToPause'
• isAudioPlaying: boolean
• duration: number

  in seconds

• stateTimeStep: number

  in seconds - change this to change the duration between recorded seek frames

• timeUpdates: number

  in seconds - how often to publish the 'timeUpdate' notification

• notifications: NotificationManager

  - use to subscribe to notifications

---

TypeRecorderTime

Recorder time format.

number | string

Use number for number of seconds, or use string with format 'm:s.s' (for example, '1:23.5' would define 1 minute, 23.5 seconds)

---

FunctionMap

Function Map

In FigureOne Recorder, state is saved in stringified javascript objects. When the state includes a function (like a trigger method in an animation for example) then that function is referenced in the state object as a unique string id.

When a geometry is loaded, functions that will be captured in state objects need to be added to a function map. Both Figure and FigureElement have attached function maps as the property fnMap. Therefore, the method is added to either the figure or element function map, with an associated unique string id, and that string id is used when the function is used. For example as defined callbacks, triggerAnimationStep and customAnimationStep callbacks, or recorder slide definitions (entryState, steadyState, leaveState, exec, execDelta).

The funciton map has:

• A map of functions
• A link to a global map of functions (a singleton)
• The ability to execute a function within the map

Properties

• global: FunctionMap

  global function map

• map: Object

  local function map where keys are unique identifiers and values are the associated functions

Add a console function to a FunctionMap and execute it with a parameter

figure.fnMap.add('toConsole', s => console.log(s));
figure.fnMap.exec('toConsole', 'hello');
Copy

---