@alexcambose/recjs
v1.0.3
Published
Lightweight user session recorder based on JSON
Downloads
4
Maintainers
alexcamboseReadme
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
Kind: global class
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()