Lightweight user session recorder based on JSON
In browser:
<script src="dist/dist.js"></script>In Node.js
npm install --save @alexcambose/recjsimport Recjs from 'recjs';...
<body>
<div id="someElement"></div>
</body>
...const recjs = new Recjs();
recjs.recorder.record(); // starts recording
setTimeout(() => {
recjs.recorder.stop(); // stops recording after 3 seconds
console.log(recjs.recorder.getData()) // gets recording data
}, 3000);const recjs = new Recjs();
recjs.recorder.record(); // starts recording
setTimeout(() => {
recjs.recorder.stop(); // stops recording after 3 seconds
recjs.player.play(recjs.recorder.getData(), () => console.log('Finished')); // plays current recording and logs when finishes
}, 3000);| Param | Type | Default | Description |
|---|---|---|---|
| $0 | Object |
||
| [$0.events] | array |
['scroll', 'mousemove', 'keypress', 'click', 'contextmenu'] |
User events that will be recorded |
| [$0.fps] | integer |
30 |
Number of frames per second |
| [$0.document] | object |
window.document |
Document object to be used. (in case of an iframe) |
Example
const recjs = new Recjs({
events: ['scroll'],
fps: 60
});Recorder class
Kind: global class
- Recorder
- .record()
- .isRecording() ⇒
boolean - .stop()
- .pause()
- .getData(stringify) ⇒
object|string
Starts recording
Kind: instance method of Recorder
| Param | Type | Description |
|---|---|---|
| [$0.onRecording] | function |
Calls each recorded frame |
Example
recjs.recorder.record({
onRecording: () => console.log('Next frame')
})Check if it is recording
Kind: instance method of Recorder
Returns: boolean - True if it's recording
Example
recjs.recorder.isRecording()Stops recording
Kind: instance method of Recorder
Example
recjs.recorder.stop()Pauses current recording
Kind: instance method of Recorder
Example
recjs.recorder.pause()Returns recorded data
Kind: instance method of Recorder
| Param | Type | Default |
|---|---|---|
| stringify | boolean |
false |
Example
recjs.recorder.getData(true)Player class
Kind: global class
- Player
- .play(data)
- .pause()
- .stop()
- .setFrameIndex(index)
- .currentFrame() ⇒
object - .currentFrameIndex() ⇒
number - .isPlaying() ⇒
boolean
Starts playing a recording
Kind: instance method of Player
| Param | Type | Description |
|---|---|---|
| data | object |
Recorded data |
| [$0.onPlaying] | function |
Calls when playing finishes |
| [$0.onEnd] | function |
Calls each frame |
Example
recjs.player.play(recjs.recorder.getData(), {
onEnd: () => console.log('Finished playing'),
onPlaying: () => console.log('Next frame')
})Pauses playing
Kind: instance method of Player
Example
recjs.player.pause()Stops playing
Kind: instance method of Player
Example
recjs.player.stop()Set current frame
Kind: instance method of Player
| Param | Type | Description |
|---|---|---|
| index | number |
Frame index |
Example
recjs.player.setFrameIndex(87)Get current frame
Kind: instance method of Player
Returns: object - Frame object
Example
recjs.player.currentFrame()Get current frame index
Kind: instance method of Player
Returns: number - Frame index
Example
recjs.player.currentFrameIndex()Is playing
Kind: instance method of Player
Returns: boolean - Returns true if it is playing
Example
recjs.player.isPlaying()