screen-recorder-angular

ScreenRecorder for Angular

An Angular component that can record the screen

简体中文 | English

Install

npm install screen-recorder-angular --save

Usage

• 1 . Simple use

  • in app.module.ts

  import { ScreenRecorderModule } from 'screen-recorder-angular';
  
  @NgModule({
    // ...
    imports: [
      // ...
      ScreenRecorderModule
    ]
  })

  • in app.component.html

    <!-- your ohter content -->
    <app-screen-recorder></app-screen-recorder>
    <!-- your ohter content -->

• 2 . Enable preview and customize some information

  • in app.module.ts

  import { ScreenRecorderModule } from 'screen-recorder-angular';
  
  @NgModule({
    // ...
    imports: [
      // ...
      ScreenRecorderModule
    ]
  })

  • in app.component.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

    <!-- your ohter content -->
    <app-screen-recorder
      [preview]="true"
      shortKey="Alt+Shift+R"
      startBtnText="🛫 开始"
      startBtnStyle="color:#48bfa7"
      endBtnText="🛑 结束"
      endBtnStyle="color: red"
      [videoOptions]="videoOptions"
    >
    </app-screen-recorder>
    <!-- your ohter content -->

• 3 . Listening event callback

  • in app.module.ts

  import { ScreenRecorderModule } from 'screen-recorder-angular';
  
  @NgModule({
    // ...
    imports: [
      // ...
      ScreenRecorderModule
    ]
  })

  • in app.component.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

    <!-- your other content -->
    <app-screen-recorder
      [preview]="true"
      (onRecordingStart)="onStart($event)"
      (onRecordingEnd)="onEnd($event)"
      (onRecordingUnsupport)="onUnsupport()"
      (onRecordingError)="onError($event)"
    >
    </app-screen-recorder>
    <!-- your other content -->

• 4 . Custom view

  • in app.module.ts

  import { ScreenRecorderModule } from 'screen-recorder-angular';
  
  @NgModule({
    // ...
    imports: [
      // ...
      ScreenRecorderModule
    ]
  })

  • in app.component.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

    <!-- your ohter content -->
    <app-screen-recorder
      [preview]="true"
      (onRecordingEnd)="customRecordingEnd($event)"
    >
      <ng-template startContent let-startEvent="startEvent">
        <!-- your custom view for startContent -->
        <button *ngIf="!recording" (click)="start(startEvent)">
          开始录屏
        </button>
      </ng-template>
  
      <ng-template endContent let-endEvent="endEvent">
        <!-- your custom view for endContent -->
        <button *ngIf="recording" (click)="endEvent()">
          结束录屏
        </button>
      </ng-template>
  
      <ng-template previewContent let-mediaStream="mediaStream">
        <!-- your custom view for previewContent -->
        <video
          muted
          autoplay
          width="500"
          style="display: block;"
          [srcObject]="mediaStream"
        >
        </video>
      </ng-template>
  
    </app-screen-recorder>
    <!-- your ohter content -->

props

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

events

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

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