npm package: @scaleflex/widget-screen-capture
Description: Scaleflex plugin that captures video from display or application.
Latest version: 4.8.13

# `@scaleflex/widget-screen-capture`

[![Plugins][plugins-image]](#plugins)
[![Website][filerobot-image]][sfx-url]
[![Version][filerobot-version]][version-url]
[![Scaleflex team][made-by-image]][sfx-url]
[![License][license-image]][license-url]
[![CodeSandbox][codeSandbox-image]][codeSandbox-url]


<div align='center'>
<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://assets.scaleflex.com/Corporate+Branding/%5B2025%5D+ALL+LOGOS+%2B+ICONS/SCALEFLEX/VXP+logo/Horizontal+White/VXP+logo+WHITE.png?vh=663932" width="140"/>
</div>

The screen capture records the device's screen with processing the recorded video for uploading in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core).

## Usage

### NPM

```bash
npm install --save @scaleflex/widget-screen-capture
```

### YARN

```bash
yarn add @scaleflex/widget-screen-capture
```

then

```js
import ScreenCapture from '@scaleflex/widget-screen-capture'
...
...
...
scaleflexWidget.use(ScreenCapture, propertiesObject)
```

### CDN

The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.ScreenCapture`

```js
const ScreenCapture = window.ScaleflexWidget.ScreenCapture
...
...
...
scaleflexWidget.use(ScreenCapture, propertiesObject)
```

### Plugin's styles

```js
import '@scaleflex/widget-core/dist/style.css'
import '@scaleflex/widget-screen-capture/dist/style.css'
```

or if you prefer the minified version

```js
import '@scaleflex/widget-core/dist/style.min.css'
import '@scaleflex/widget-screen-capture/dist/style.min.css'
```

> The plugin's css file should be imported after the [Core's css file](../@scaleflex/widget-core/#modules-styles) for having the styles shown correctly.

## Properties

### `title`

<u>Type:</u> `string`.

<u>Default:</u> `'Screen cast'`

The title shown in the top bar of the panel.

### `preferredVideoMimeType`

<u>Type:</u> `string`.

<u>Default:</u> `null`

The mime type for the recorded video to be saved with if you provided un-supported mime type then the browser's default would be used, if you left it `null` then if found any suitable type inside [`allowedFileTypes`](../core/README.md/#restrictions) it would be used.

### `displayMediaConstraints`

<u>Type:</u> `object`.

<u>Default:</u>

```js
video: {
  width: 1280,
  height: 720,
  frameRate: {
    ideal: 3,
    max: 5
  },
  cursor: 'motion',
  displaySurface: 'monitor'
}
```

The options being passed for [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) method of [`navigator.mediaDevices`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices). Check the available options/properties from [`MDN Docs`](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints#properties_of_shared_screen_tracks) Whether to show the video's recording length or not while it is in progress.

### `userMediaConstraints`

<u>Type:</u> `object`.

<u>Default:</u>

```js
{
  audio: true
}
```

The options being passed for [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) method of [`navigator.mediaDevices`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices). Check the available options/properties from [`MDN Docs`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/audio) Whether to show the video's recording length or not while it is in progress.

### `locale`

<u>Type:</u> `object`.

<u>Default:</u>

```js
strings: {
  startCapturing: 'Begin screen capturing',
  stopCapturing: 'Stop screen capturing',
  submitRecordedFile: 'Submit captured video',
  streamActive: 'Stream active',
  streamPassive: 'Stream passive',
  micDisabled: 'Microphone access denied by user',
  recording: 'Recording'
}
```

Customizing some of the translations or the language's strings and replace the default locale.

<!-- Variables -->

[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-screen-capture
[license-url]: https://opensource.org/licenses/MIT
[sfx-url]: https://www.scaleflex.com/
[version-url]: https://www.npmjs.com/package/@scaleflex/widget-screen-capture
[codeSandbox-url]: https://codesandbox.io/p/sandbox/scalelfex-widget-v4-sandbox-dtp6l3?file=%2Fsrc%2Findex.js

[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-screen-capture?label=Version&style=for-the-badge&logo=npm
[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox