NgReplay

An angular library to record and replay user events (keyboard, mouse and scroll events).

This library was generated with Angular CLI version 15.0.0.

Installation 🔧

npm i ng-replay

The installation has a post install script that will update your projects angular.json to add the assets configuration for the libraries assets. Note: Your angular.json might need to be reformatted after the installation.:hand_over_mouth:
Confirm that these properties have been update in your angular.json.
project->architect->build->options->assets
If these properties where not added, please add them manually.

  {
     glob": "**/*",
    "input": "./node_modules/ng-replay/assets",
    "output": "/assets/"
  }

⚠️ Note: After the installation is done, please don't forget to import the module NgReplayModule, in the appropriate module when using in an Angular project.
e.g.

import { NgReplayModule } from 'ng-replay';

@NgModule({
    declarations: [
      ... component declarations
    ],
    imports: [
      NgReplayModule
      ... other imports
    ],
    ... rest of module configuration
})

export class AppModule { }

Usage 👨‍🔧

• Update the constructor of app.component.ts to setup Ng-Replay.

...imports

import { NgReplayService } from 'ng-replay';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(private ngReplay: NgReplayService){
    ngReplay.setup();
  }

  .... rest of code
}

• You can also specify the position of the play and record controls in the setup method as a percentage of the top and left of the screen. Where 0 >= top =< 95 and 0 >= top =< 95.
  Example, positioning at the top left of the screen:

constructor(private ngReplay: NgReplayService){
    ngReplay.setup(0, 94);
  }

• You can then start the application, once running your should see controls at the bottom right of your screen. The record control will start a session to record and then save the content to a file when stopping the recording. The play control will replay a recorded session after the prompt to select a file, chosen from the previously saved files.

• Before each replay after selecting a file you can set the replay speed as a percentage of the original speed (0% - 100%), or leave the default value and continue the replay.

Supported events 🎏

The libary currently only supports these events/actions.

• alphanumeric key presses
• backspace key press
• tab key press
• mouse click event
• page scroll event
• element scroll event