A Vue component that can record the screen
npm install screen-recorder-vue简体中文 | English
``bash`
npm install screen-recorder-vue --save
- 1 . Simple use
`vue
`
- 2 . Enable preview and customize some information
`vue
start-btn-text="🛫 start"
start-btn-style="color: #48bfa7"
end-btn-text="🛑 end"
end-btn-style="color: red;"
:video-options="videoOptions"
/>
`
- 3 . Listening event callback
`vue
@recording-start="onStart"
@recording-end="onEnd"
@recording-unsupport="onUnsupport"
@recording-error="onError"
/>
`
- 4 . Custom view
`vue
`
| propsName | required | type | default | desc |
| ----------------- | -------- | --------------------- | ---------- | ------------------------------------------------------------------------------------------------------ |
| short-key | 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 |video-options
| | false | MediaTrackConstraints | - | video options |start-btn-text
| | false | string | 开始录屏 | the text for start-button |start-btn-style
| | false | string | - | the style for start-button |end-btn-text
| | false | string | 结束录屏 | the text for end-button |end-btn-style
| | false | string | - | the style for end-button |
| eventsName | paramList | desc |
| --------------------- | ----------------------------------- | ------------------------ |
| recording-start | [ mediaStream: MediaStream ] | recorder start |recording-end
| | [ blobUrl: string, blob: Blob ] | recorder end |recording-unsupport
| | [] | recorder API unsupported |recording-error
| | [ err: unknown ] | recorder error |
| slotsName | paramList and type | desc |
| --------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| start | { startEvent: Function, endEvent: Function } | Customize the view that triggers the start screen recording event；startEvent : start screen recording, endEvent
: end screen recording |end
| | { endEvent: Function, startEvent: Function } | Customize the view that triggers the end screen recording event; endEvent
: end screen recording, startEvent : start screen recording |preview
| | { 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 |