Record user actions as replayable dom (experimental)
const record = require('fn-record/record')
const play = require('fn-record/play')
// start recording
const stop = record()
setTimeout(function later() {
// serializable json recording
const recording = stop()
// playback
play(recording)
}, 1000)
- Install:
npm install --save fn-record
- Require:
require('fn-record')
Record the dom and all changes
- function stop stop callback
Callback to stop recording and return captured changes
- object recording captured changes
Replay a previously recorded session
- Player player Player controls
-
object recording - Previously captured changes
-
object options - Playback options
// Display pressed keyboard shortcuts
const Keys = require('fn-record/lib/ui/keys')
// Display cursor position
const Cursor = require('fn-record/lib/ui/cursor')
// Display playback controls [play pause seek speed doenload]
const Controls = require('fn-record/lib/ui/controls')
/* defaults */
export const options = {
type: 'tab', // target to render to. [tab, popup, iframe]
plugins: [ Keys, Cursor, Controls ], // Display plugins to use
// pass in window object directly instead create based on type
context: createContext(type),
}
Start playback
- Promise finished Promise for playback completion
- number from - Float between 0 and 1 definin start point
Jump to point
- object seekResult data about start position
- number seekResult.index pointer to change number to start from
- object[] seekResult.plugins plugins to use for playback
- number from - Float between 0 and 1 definin start point
Stop playback
Listen for progress
- function callback(progress) - callback to call on progress change
- number progress - number between 0 and 1 defining progress
A plugin is a class that can be used to add additional visualization of the recorded data.
- Player player - Control context for playback
- HTMLElement $view - Parent node for UI widgets
- object change change object
- string change.type [=attributes]
- string change.name attribute name,
- number change.target pointer to target node
- string change.value attribute value
- Node target - DOM node assosiated with pointer
- object change change object
- string change.type [=childList]
- number change.target pointer to target node
- object change.value childList changes
- object[] change.value.added snapshots of added nodes
- number[] change.value.removed pointers to removed nodes
- Node target - DOM node assosiated with pointer
- object change change object
- string change.type [=characterData]
- number change.target pointer to target node
- string change.value text value
- Node target - DOM node assosiated with pointer
- object change change object
- string change.type [=pointerdown]
- number change.target pointer to target node
- object change.value coordinates relative to target
- number change.value.x x coordinate relative to target
- number change.value.y x coordinate relative to target
- Node target - DOM node assosiated with pointer
- object change change object
- string change.type [=pointerup]
- number change.target pointer to target node
- object change.value coordinates relative to target
- number change.value.x x coordinate relative to target
- number change.value.y x coordinate relative to target
- Node target - DOM node assosiated with pointer
- object change change object
- string change.type [=move]
- number change.target pointer to target node
- object change.value coordinates relative to target
- number change.value.x x coordinate relative to target
- number change.value.y x coordinate relative to target
- Node target - DOM node assosiated with pointer
- object change change object
- string change.type [=keydown]
- string change.value Name of pressed key
- object change change object
- string change.type [=keyup]
- string change.value Name of pressed key
Unless stated otherwise all works are:
- Copyright © Øystein Ø. Olsen
and licensed under: