Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alexcambose/recjs

Lightweight user session recorder based on JSON
https://github.com/alexcambose/recjs

dom json movies recording screen session spy user

Last synced: 3 months ago
JSON representation

Lightweight user session recorder based on JSON

Host: GitHub
URL: https://github.com/alexcambose/recjs
Owner: alexcambose
License: mit
Created: 2018-01-10T18:51:08.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2018-01-24T19:08:05.000Z (about 7 years ago)
Last Synced: 2024-05-21T04:21:15.026Z (9 months ago)
Topics: dom, json, movies, recording, screen, session, spy, user
Language: JavaScript
Size: 176 KB
Stars: 13
Watchers: 3
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # recjs

[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)

[![Build Status](https://travis-ci.org/alexcambose/recjs.svg?branch=master)](https://travis-ci.org/alexcambose/recjs)

Lightweight user session recorder based on JSON

## Installation

In browser:

```html

```

In Node.js

```bash

npm install --save @alexcambose/recjs

```

```javascript

import Recjs from 'recjs';

```

## Usage

```html

...

    


...

```

### Example 1

```javascript

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);

```

### Example 2

```javascript

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);

```

## API Reference

## Classes



Recjs



Recorder



Recorder class



Player



Player class







## Recjs

**Kind**: global class



### new Recjs($0)

| 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**

```js

const recjs = new Recjs({

    events: ['scroll'],

    fps: 60

});

```



## Recorder

Recorder class

**Kind**: global class

* [Recorder](#Recorder)

    * [.record()](#Recorder+record)

    * [.isRecording()](#Recorder+isRecording) ⇒ boolean

    * [.stop()](#Recorder+stop)

    * [.pause()](#Recorder+pause)

    * [.getData(stringify)](#Recorder+getData) ⇒ object \| string



### recorder.record()

Starts recording

**Kind**: instance method of [Recorder](#Recorder)

| Param | Type | Description |

| --- | --- | --- |

| [$0.onRecording] | function | Calls each recorded frame |

**Example**

```js

recjs.recorder.record({

   onRecording: () => console.log('Next frame')

})

```



### recorder.isRecording() ⇒ boolean

Check if it is recording

**Kind**: instance method of [Recorder](#Recorder)

**Returns**: boolean - True if it's recording

**Example**

```js

recjs.recorder.isRecording()

```



### recorder.stop()

Stops recording

**Kind**: instance method of [Recorder](#Recorder)

**Example**

```js

recjs.recorder.stop()

```



### recorder.pause()

Pauses current recording

**Kind**: instance method of [Recorder](#Recorder)

**Example**

```js

recjs.recorder.pause()

```



### recorder.getData(stringify) ⇒ object \| string

Returns recorded data

**Kind**: instance method of [Recorder](#Recorder)

| Param | Type | Default |

| --- | --- | --- |

| stringify | boolean | false |

**Example**

```js

recjs.recorder.getData(true)

```



## Player

Player class

**Kind**: global class

* [Player](#Player)

    * [.play(data)](#Player+play)

    * [.pause()](#Player+pause)

    * [.stop()](#Player+stop)

    * [.setFrameIndex(index)](#Player+setFrameIndex)

    * [.currentFrame()](#Player+currentFrame) ⇒ object

    * [.currentFrameIndex()](#Player+currentFrameIndex) ⇒ number

    * [.isPlaying()](#Player+isPlaying) ⇒ boolean



### player.play(data)

Starts playing a recording

**Kind**: instance method of [Player](#Player)

| Param | Type | Description |

| --- | --- | --- |

| data | object | Recorded data |

| [$0.onPlaying] | function | Calls when playing finishes |

| [$0.onEnd] | function | Calls each frame |

**Example**

```js

recjs.player.play(recjs.recorder.getData(), {

   onEnd: () => console.log('Finished playing'),

   onPlaying: () => console.log('Next frame')

})

```



### player.pause()

Pauses playing

**Kind**: instance method of [Player](#Player)

**Example**

```js

recjs.player.pause()

```



### player.stop()

Stops playing

**Kind**: instance method of [Player](#Player)

**Example**

```js

recjs.player.stop()

```



### player.setFrameIndex(index)

Set current frame

**Kind**: instance method of [Player](#Player)

| Param | Type | Description |

| --- | --- | --- |

| index | number | Frame index |

**Example**

```js

recjs.player.setFrameIndex(87)

```



### player.currentFrame() ⇒ object

Get current frame

**Kind**: instance method of [Player](#Player)

**Returns**: object - Frame object

**Example**

```js

recjs.player.currentFrame()

```



### player.currentFrameIndex() ⇒ number

Get current frame index

**Kind**: instance method of [Player](#Player)

**Returns**: number - Frame index

**Example**

```js

recjs.player.currentFrameIndex()

```



### player.isPlaying() ⇒ boolean

Is playing

**Kind**: instance method of [Player](#Player)

**Returns**: boolean - Returns true if it is playing

**Example**

```js

recjs.player.isPlaying()

```