ng-replay
v1.0.6
Published
An angular library to record and replay user events (keyboard, mouse and scroll events).
Downloads
1
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