Recorder

Extends Camera

Class responsible for recording

Instance members

#constructor([opts])

Create recorder

constructor([opts])

Create recorder

Parameters

  • Object = (default {}) opts :

    Options

    • HTMLElement = opts.target

      HTMLElement on which track all events

    • Object = opts.onEvents (default {})

      Define custom event callbacks for each event

    • Array .< string > = opts.events (default ['mousemove','click','scroll','resize'])

      Events to track

Examples

let recorder = new cimice.Recorder({
    target: document.getElementById('to-rec'),
    events: ['mousemove', 'scroll'],
    onEvents: {
      'scroll': (recorder, movie, e) => {
        console.log('Override default scroll event callback');
       }
    }
});
#getEvents

Returns the array of events that will be binded to the target

getEvents

Returns the array of events that will be binded to the target

Returns

Array .< string > :

Events

#getMovie

Get recorded movie

getMovie

Get recorded movie

Returns

Movie
#setEvents(events)

Set an array of events that will be binded to the target. This method overrides the previous set of events.

setEvents(events)

Set an array of events that will be binded to the target. This method overrides the previous set of events.

Parameters

Returns

this

Examples

recorder.setEvents('resize');
console.log(recorder.getEvents());
// -> ['resize']
recorder.setEvents(['click','mousemove','scroll']);
console.log(recorder.getEvents());
// -> ['click','mousemove','scroll']
#startRecording

Bind all events to the target and start recording

startRecording

Bind all events to the target and start recording

#stopRecording

Unbind all events and return recorded data

stopRecording

Unbind all events and return recorded data

Returns

Movie :

Recorded movie

Player

Extends Camera

Class responsible of playing recorded data

Instance members

#constructor([opts])

Create player

constructor([opts])

Create player

Parameters

  • Object = (default {}) opts :

    Options

    • HTMLElement = opts.target

      HTMLElement on which play data

    • Object = opts.onEvents (default {})

      Define custom event callbacks for each event

Examples

let player = new cimice.Player({
    target: document.getElementById('to-play'),
    onEvents: {
      'scroll': (player, frame) => {
        console.log('Override default scroll event callback');
       }
    }
});
#getCursor

Return cursor element

getCursor

Return cursor element

Returns

HTMLElement
#getCursorX(frame)

Return cursor horizontal position, expressed in pixels

getCursorX(frame)

Return cursor horizontal position, expressed in pixels

Parameters

  • ( Frame | null ) frame :

    Frame on which get position, in case of null will use current frame

Returns

number
#getCursorY(frame)

Return cursor vertical position, expressed in pixels

getCursorY(frame)

Return cursor vertical position, expressed in pixels

Parameters

  • ( Frame | null ) frame :

    Frame on which get position, in case of null will use current frame

Returns

number
#play

Play the movie

play

Play the movie

Returns

this
#setMovie(movie)

Set movie containing frames to watch

setMovie(movie)

Set movie containing frames to watch

Parameters

  • Movie movie :

    Movie to play

Returns

this

Examples

let movie = new cimice.Movie();
player.setMovie(movie);
#stop

Stop the movie if it's playing

stop

Stop the movie if it's playing

Returns

this

Movie

Class containing recorded frames

Instance members

#addFrame([frame])

Add new frame to the collection. If the object passed is an instance of Frame it will added as it is, in case of simple object will create a new Frame and set actual timestamp.

addFrame([frame])

Add new frame to the collection. If the object passed is an instance of Frame it will added as it is, in case of simple object will create a new Frame and set actual timestamp.

Parameters

  • ( Frame | Object ) = (default {}) frame :

    Frame instance or object

Returns

( Frame | undefined ) :

Added frame

Examples

let frame1 = movie.addFrame({eventType: 'click'});
// Or
let frame = new cimice.Frame({eventType: 'click'});
let frame2 = movie.addFrame(frame);
#constructor([opts])

Create movie

constructor([opts])

Create movie

Parameters

  • Object = (default {}) opts :

    Options

    • Array .< ( Frame | Object ) > = opts.frames (default [])

      Array of frames

    • number = opts.top (default 0)

      Top position of the movie, relative to document

    • number = opts.left (default 0)

      Left position of the movie, relative to document

    • number = opts.scrollX (default 0)

      The initial horizontal scroll position inside player target

    • number = opts.scrollY (default 0)

      The initial vertical scroll position inside player target

    • string = opts.scene (default '')

      Base64 encoded HTML string

Examples

let frame = new cimice.Frame({eventType: 'click'});
let movie = new cimice.Movie({
    top: 100,
    left: 100,
    scene: 'SGFja2VyIERldGVjdGVkIQ==',
    frames: [
      {eventType: 'click'},
      frame,
      {eventType: 'mousemove'}
    ],
});
#getFrames

Get the collection of frames

getFrames

Get the collection of frames

Returns

Array .< Frame > :

Array of frames

#setFrames(Array, frames)

Set a new collection of frames.

setFrames(Array, frames)

Set a new collection of frames.

Parameters

  • ( Frame | Object | Array .< ( Frame | Object ) > ) Array :

    of frames or also a single Frame/object

  • frames :

Returns

this

Examples

let frame = new cimice.Frame({});
movie.setFrames(frame);
// frames -> 1
movie.setFrames([frame, {eventType: 'click'}]);
// frames -> 2
movie.setFrames({eventType: 'click'});
// frames -> 1
#toJSON

Returns movie and related frames in JSON format. Generally coulde be used to extract data during the recording and send back to server

toJSON

Returns movie and related frames in JSON format. Generally coulde be used to extract data during the recording and send back to server

Returns

string :

JSON data

Examples

let json = JSON.stringify(movie);
let xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.send(json);

Frame

Class representing a single frame

Instance members

#constructor([opts])

Create a frame

constructor([opts])

Create a frame

Parameters

  • Object = (default {}) opts :

    Options

    • number = opts.cursorX (default 0)

      X cursor position, in pixels

    • number = opts.cursorY (default 0)

      Y cursor position, in pixels

    • number = opts.scrollX (default 0)

      X scroll length, in pixels

    • number = opts.height (default 0)

      Height of the frame, in pixels

    • number = opts.width (default 0)

      Width of the frame, in pixels

    • number = opts.ts (default 0)

      Timestamp of the frame

    • Object = opts.options (default {})

      Custom options

    • string = opts.eventType (default '')

      Event type, eg. 'click', 'mousemove'

Examples

let frame = new cimice.Frame({
    eventType: 'click',
    cursorX: 100,
    cursorY: 100,
    options: { customProp: 'customValue' }
});
#toJSON

Returns frame in JSON format

toJSON

Returns frame in JSON format

Returns

string :

String in JSON format

Examples

let frame = new cimice.Frame({
    eventType: 'click',
    cursorX: 100,
    cursorY: 100,
});
console.log(JSON.stringify(frame));

Player#play

Fires on movie play

Player#playing

Fires on playing on every frame

Properties

  • Frame frame :

    Frame playing

Player#stop

Fires on movie stop

Recorder#recording

Fires on recording of every event

Properties

Recorder#startRecording

Fires when start recording

Recorder#stopRecording

Fires when stop recording