@alexcambose/recjs v1.0.3
recjs
Lightweight user session recorder based on JSON
Installation
In browser:
<script src="dist/dist.js"></script>
In Node.js
npm install --save @alexcambose/recjs
import 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()