recjs
Lightweight user session recorder based on JSON
Installation
In browser:
<script src="dist/dist.js"></script>In Node.js
npm install --save @alexcambose/recjsimport Recjs from 'recjs';Usage
...
<body>
<div id="someElement"></div>
</body>
...Example 1
const recjs = new Recjs({
el: '#someElement',
});
recjs.recorder.record(); // starts recording
setTimeout(() => {
recjs.recorder.stop(); // stops recording after 3 seconds
console.log(recjs.recorder.getData()) // gets recording data
}, 3000);Example 2
const recjs = new Recjs({
el: '#someElement',
});
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);API Reference
Classes
Recjs
new Recjs($0)
| Param | Type | Default | Description |
|---|---|---|---|
| $0 | Object |
||
| $0.el | string |
Target element that is going to be recorded | |
| [$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({
el: '#someElement',
events: ['scroll'],
fps: 60
});Recorder
Recorder class
Kind: global class
-
Recorder
- .record()
-
.isRecording() ⇒
boolean - .stop()
- .pause()
-
.getData(stringify) ⇒
object|string
recorder.record()
Starts recording
Kind: instance method of Recorder
Example
recjs.recorder.record()
recorder.isRecording() ⇒ boolean
Check if it is recording
Kind: instance method of Recorder
Returns: boolean - True if it's recording
Example
recjs.recorder.isRecording()recorder.stop()
Stops recording
Kind: instance method of Recorder
Example
recjs.recorder.stop()recorder.pause()
Pauses current recording
Kind: instance method of Recorder
Example
recjs.recorder.pause()
recorder.getData(stringify) ⇒ object | string
Returns recorded data
Kind: instance method of Recorder
| Param | Type | Default |
|---|---|---|
| stringify | boolean |
false |
Example
recjs.recorder.getData(true)Player
Player class
Kind: global class
-
Player
- .play(data, onEnd)
- .pause()
- .stop()
- .setFrameIndex(index)
-
.currentFrame() ⇒
object -
.currentFrameIndex() ⇒
number -
.isPlaying() ⇒
boolean
player.play(data, onEnd)
Starts playing a recording
Kind: instance method of Player
| Param | Type | Description |
|---|---|---|
| data | object |
Recorded data |
| onEnd | function |
Calls when playing finishes |
Example
recjs.player.play(recjs.recorder.getData(), () => {
console.log('Finished playing')
})player.pause()
Pauses playing
Kind: instance method of Player
Example
recjs.player.pause()player.stop()
Stops playing
Kind: instance method of Player
Example
recjs.player.stop()player.setFrameIndex(index)
Set current frame
Kind: instance method of Player
| Param | Type | Description |
|---|---|---|
| index | number |
Frame index |
Example
recjs.player.setFrameIndex(87)
player.currentFrame() ⇒ object
Get current frame
Kind: instance method of Player
Returns: object - Frame object
Example
recjs.player.currentFrame()
player.currentFrameIndex() ⇒ number
Get current frame index
Kind: instance method of Player
Returns: number - Frame index
Example
recjs.player.currentFrameIndex()
player.isPlaying() ⇒ boolean
Is playing
Kind: instance method of Player
Returns: boolean - Returns true if it is playing
Example
recjs.player.isPlaying()