An Angular component that can record the screen
npm install screen-recorder-angular简体中文 | English
``bash`
npm install screen-recorder-angular --save
- 1 . Simple use
- in app.module.ts
`ts
import { ScreenRecorderModule } from 'screen-recorder-angular';
@NgModule({
// ...
imports: [
// ...
ScreenRecorderModule
]
})
`
- in app.component.html
`html`
- 2 . Enable preview and customize some information
- in app.module.ts
`ts
import { ScreenRecorderModule } from 'screen-recorder-angular';
@NgModule({
// ...
imports: [
// ...
ScreenRecorderModule
]
})
`
- in app.component.ts
`ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// your other content...
videoOptions: MediaTrackConstraints = {
width: 1920,
height: 1080,
frameRate: 60,
};
}
`
- in app.component.html
`html`
shortKey="Alt+Shift+R"
startBtnText="🛫 开始"
startBtnStyle="color:#48bfa7"
endBtnText="🛑 结束"
endBtnStyle="color: red"
[videoOptions]="videoOptions"
>
- 3 . Listening event callback
- in app.module.ts
`ts
import { ScreenRecorderModule } from 'screen-recorder-angular';
@NgModule({
// ...
imports: [
// ...
ScreenRecorderModule
]
})
`
- in app.component.ts
`ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// your other content...
onStart = (event: { mediaStream: MediaStream }) => {
/ Your logic code /
}
onError = (event: { err: unknown }) => {
/ Your logic code /
}
onUnsupport = () => {
/ Your logic code /
}
onEnd = (event: { url: string, blob: Blob }) => {
/ Your logic code /
}
}
`
- in app.component.html
`html`
(onRecordingStart)="onStart($event)"
(onRecordingEnd)="onEnd($event)"
(onRecordingUnsupport)="onUnsupport()"
(onRecordingError)="onError($event)"
>
- 4 . Custom view
- in app.module.ts
`ts
import { ScreenRecorderModule } from 'screen-recorder-angular';
@NgModule({
// ...
imports: [
// ...
ScreenRecorderModule
]
})
`
- in app.component.ts
`ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// your other content...
recording = false
start = (startEvent: Function) => {
startEvent();
this.recording = true;
};
customRecordingEnd = ({ url }: { url: string }) => {
this.recording = false;
console.log(url);
// to do sth for url
};
}
`
- in app.component.html
`html
(onRecordingEnd)="customRecordingEnd($event)"
>
autoplay
width="500"
style="display: block;"
[srcObject]="mediaStream"
>
`
| propsName | required | type | default | desc |
| --------------- | -------- | --------------------- | ---------- | ------------------------------------------------------------------------------------------------------ |
| shortKey | false | string | - | shortcut key for starting, if you set shortcut, ESC will be set as the shortcut key to end recording |preview
| | false | boolean | false | show preview |videoOptions
| | false | MediaTrackConstraints | - | video options |startBtnText
| | false | string | 开始录屏 | the text for start-button |startBtnStyle
| | false | string | - | the style for start-button |endBtnText
| | false | string | 结束录屏 | the text for end-button |endBtnStyle
| | false | string | - | the style for end-button |
| eventsName | paramList | desc |
| ---------------------- | ----------------------------------- | ------------------------ |
| onRecordingStart | { mediaStream: MediaStream } | recorder start |onRecordingEnd
| | { blobUrl: string, blob: Blob } | recorder end |onRecordingUnsupport
| | void | recorder API unsupported |onRecordingError
| | { err: unknown } | recorder error |
| projection-selector | context-parameter-list | desc |
| ---------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| startContent | { startEvent: Function, endEvent: Function } | Customize the view that triggers the start screen recording event；startEvent : start screen recording, endEvent
: end screen recording |endContent
| | { endEvent: Function, startEvent: Function } | Customize the view that triggers the end screen recording event; endEvent
: end screen recording, startEvent : start screen recording |previewContent
| | { mediaStream: MediaStream } | Customize video preview,mediaStream`: it is the captured screen media stream, which can be assigned to the scrobject of video to preview and play |