ruclib-screen-recorder

This library provides a feature to record and download the screen with and without Audio

RUC Library Installation Guide

Users can easily install the RUC (Ruxptest Library) from npm. Additionally, they can also choose to install individual components based on their requirements. Install RUC Library.

To install the entire RUC library:

npm install @uxpractice/ruc-lib

Install Individual Component

If you only need the ScreenRecorder component:

For Angular 15:

npm install @ruc-lib/[email protected] @angular/material@^15.0.0 @angular/cdk@^15.0.0

For Angular 16:

npm install @ruc-lib/[email protected] @angular/material@^16.0.0 @angular/cdk@^16.0.0

For Angular 17:

npm install @ruc-lib/[email protected] @angular/material@^17.0.0 @angular/cdk@^17.0.0

For Angular 18:

npm install @ruc-lib/[email protected] @angular/material@^18.0.0 @angular/cdk@^18.0.0

For Angular 19:

npm install @ruc-lib/[email protected] @angular/material@^19.0.0 @angular/cdk@^19.0.0

For Angular 20:

npm install @ruc-lib/[email protected]

Note: When installing in Angular 15-19 apps, you must specify the matching @angular/material and @angular/cdk versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.

Version Compatibility

Please ensure you install the correct version of @ruc-lib/screen-recorder based on your Angular version.

| Angular Version | Compatible @ruc-lib/screen-recorder Version | |--------------------|---------------------------------------------------| | 15.x.x | npm install @ruc-lib/screen-recorder@^3.2.0 | | 16.x.x | npm install @ruc-lib/screen-recorder@^3.2.0 | | 17.x.x | npm install @ruc-lib/screen-recorder@^4.0.0 | | 18.x.x | npm install @ruc-lib/screen-recorder@^4.0.0 | | 19.x.x | npm install @ruc-lib/screen-recorder@^4.0.0 | | 20.x.x | npm install @ruc-lib/screen-recorder@^4.0.0 |

Usage

To use the screen recorder component in your project, follow the integration guidelines provided in the documentation.

Using Selector

1. Import RuclibScreenRecorderModule from @ruclib/screen-recorder into component.ts file.
2. Use the selector in your HTML file.

<uxp-ruclib-screen-recorder [rucInputData]="recorderConfig" [customTheme]="'custom-theme'"></uxp-ruclib-screen-recorder>

Component Inputs

| Input | Type | Description | |----------------|-------------------------|--------------------------------------------------| | rucInputData | ScreenRecorderOptions | The main configuration object for the component. | | customTheme | string | An optional CSS class for custom theming. |

ScreenRecorderOptions

This is the main configuration object for the Screen recording.

| Property | Type | Description | |-------------------------------|----------------------------------|------------------------------------------------------| | position | 'left' \| 'right' (Optional) | Position of icon | | displayFormat | 'icon' \| 'text' | Screen option format like - icpn and text | | defaultAudioState | boolean (Optional) | true for audio on, false for audio off | | showAudioToggle | boolean (Optional) | If true, displays audio option | | icons | ScreenRecorderIcons (Optional) | For custom icons (e.g., CSS classes for icon fonts) | | showTimer | boolean (Optional) | Show timer | | categoryLabelStyle | 'basic' \| 'widget' (Optional) | The display style for category labels. | | showCategoryLabels | boolean (Optional) | If true, displays the category labels. | | showPauseResume | boolean | Show pause resume option. | | downloadFileName | string (Optional) | Download file name | | showPlaybackControls | boolean (Optional) | To show/hide the video player preview | | showDownloadButton | boolean | To show download button | | useUTCForTimer | boolean (Optional) | If true, displays the UTC time labels. | | allowSpecificAreaSelection | boolean (Optional) | Record specific screen | | accessibilityLabels | accessibilityLabels(Optional) | Accessibility related texts |

ScreenRecorderIcons

This values defines the configuration for screen recorder icons.

| Property | Type | Description | |----------------------|-----------|--------------------------------------------------------------------| | record | string | Default: '●' (filled circle) or a material icon class | | recordWithAudio | string | Alternative if specific icon for "record with audio" is needed | | recordWithoutAudio | number | Alternative if specific icon for "record without audio" is needed | | stop | string | Default: '■ ' (filled square) or a material icon class | | pause | string | Default: '❚❚' or a material icon class |
| resume | string | Default: '►' (play symbol) or a material icon class | | play | string | Default: '►' (play symbol) or a material icon class | | download | number | Default: '💾' (floppy disk) or a material icon class | | audioOn | string | Default: '🔊' (speaker high volume) or a material icon class | | audioOff | string | Default: '🔇' (muted speaker) or a material icon class |

accessibilityLabels

This values defines the configuration for screen recorder accessibilityLabels.

| Property | Type | Description | |--------------------|-----------|-----------------| | recordButton | string | label text | | stopButton | string | label text | | pauseButton | number | label text | | resumeButton | string | label text | | audioToggleButton| string | label text |
| downloadButton | string | label text | | playbackVideo | string | label text |

Example Configuration

Here's an example of how to configure the Metered Progress Bar in your component's TypeScript file.

import { Component } from '@angular/core';
import { ScreenRecorderOptions, ScreenRecorderPosition, DisplayFormat } from '@ruclib/screen-recorder'; // Adjust import path


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  recorderOptions: {
    position: 'Left',
    displayFormat: 'icon',
    showAudioToggle: true,
    defaultAudioState: true,
    downloadFileName: 'screen-recording.webm',
    showTimer: true,
    showPauseResume: true,
    showPlaybackControls: true,
    showDownloadButton: true,
    useUTCForTimer: false,
    allowSpecificAreaSelection: true,
    icons: {
      record: 'fiber_manual_record',
      stop: 'stop',
      pause: 'pause',
      resume: 'play_arrow',
      play: 'play_circle_filled',
      download: 'download',
      audioOn: 'volume_up',
      audioOff: 'volume_off',
    },
    accessibilityLabels: {
      recordButton: 'Start Recording',
      stopButton: 'Stop Recording',
      pauseButton: 'Pause Recording',
      resumeButton: 'Resume Recording',
      audioToggleButton: 'Toggle Audio',
      downloadButton: 'Download Recording',
      playbackVideo: 'Screen Recording Playback',
    },
  };
}

⚠️ IMPORTANT: Custom Theme Usage in Angular Material

When implementing custom themes, such as:

.custom-theme-1 {
  @include angular-material-theme($custom-theme);
}

// You must also include the typography mixin to ensure text styles are applied correctly as shown below:
.custom-theme-1 {
  @include angular-material-theme($custom-theme);
  @include mat.typography-level($theme-custom-typography-name, body-1);
}

Contribution

Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.

Acknowledgements

Thank you for choosing the Screen Recorder Component Library. If you have any feedback or suggestions, please let us know!