ng-replay
v1.0.6
Published
An angular library to record and replay user events (keyboard, mouse and scroll events).
Downloads
15
Maintainers
Readme
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 :wrench:
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/"
}
:warning: 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 :man_mechanic:
- 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
and0 >= 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. Theplay
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 :flags:
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