Extends Camera
Class responsible for recording
#constructor([opts])
Create recorder
Create recorder
Options
HTMLElement on which track all events
{})
Define custom event callbacks for each event
['mousemove','click','scroll','resize'])
Events to track
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');
}
}
});
#getMovie
Get recorded movie
Get recorded movie
Movie
#setEvents(events)
Set an array of events that will be binded to the target. This method overrides the previous set of events.
Set an array of events that will be binded to the target. This method overrides the previous set of events.
this
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
Bind all events to the target and start recording
#stopRecording
Unbind all events and return recorded data
Unbind all events and return recorded data
Movie
:
Recorded movie
Extends Camera
Class responsible of playing recorded data
#constructor([opts])
Create player
Create player
Options
HTMLElement on which play data
{})
Define custom event callbacks for each event
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
Return cursor element
HTMLElement
#getCursorX(frame)
Return cursor horizontal position, expressed in pixels
Return cursor horizontal position, expressed in pixels
Frame on which get position, in case of null will use current frame
number
#getCursorY(frame)
Return cursor vertical position, expressed in pixels
Return cursor vertical position, expressed in pixels
Frame on which get position, in case of null will use current frame
number
#play
Play the movie
Play the movie
this
#setMovie(movie)
Set movie containing frames to watch
Set movie containing frames to watch
Movie to play
this
let movie = new cimice.Movie();
player.setMovie(movie);
#stop
Stop the movie if it's playing
Stop the movie if it's playing
this
Class containing recorded frames
#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.
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.
Frame instance or object
(
Frame
|
undefined
)
:
Added frame
let frame1 = movie.addFrame({eventType: 'click'});
// Or
let frame = new cimice.Frame({eventType: 'click'});
let frame2 = movie.addFrame(frame);
#constructor([opts])
Create movie
Create movie
Options
[])
Array of frames
0)
Top position of the movie, relative to document
0)
Left position of the movie, relative to document
0)
The initial horizontal scroll position inside player target
0)
The initial vertical scroll position inside player target
'')
Base64 encoded HTML string
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
Get the collection of frames
Array
.<
Frame
>
:
Array of frames
#setFrames(Array, frames)
Set a new collection of frames.
Set a new collection of frames.
of frames or also a single Frame/object
this
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
Returns movie and related frames in JSON format. Generally coulde be used to extract data during the recording and send back to server
string
:
JSON data
let json = JSON.stringify(movie);
let xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.send(json);
Class representing a single frame
#constructor([opts])
Create a frame
Create a frame
Options
0)
X cursor position, in pixels
0)
Y cursor position, in pixels
0)
X scroll length, in pixels
0)
Height of the frame, in pixels
0)
Width of the frame, in pixels
0)
Timestamp of the frame
{})
Custom options
'')
Event type, eg. 'click', 'mousemove'
let frame = new cimice.Frame({
eventType: 'click',
cursorX: 100,
cursorY: 100,
options: { customProp: 'customValue' }
});
#toJSON
Returns frame in JSON format
Returns frame in JSON format
string
:
String in JSON format
let frame = new cimice.Frame({
eventType: 'click',
cursorX: 100,
cursorY: 100,
});
console.log(JSON.stringify(frame));
Fires on movie play
Fires on playing on every frame
Frame playing
Fires on movie stop
Fires on recording of every event
Event object
Fires when start recording
Fires when stop recording