@scaleflex/widget-screen-capture

@scaleflex/widget-screen-capture

The screen capture records the device's screen with processing the recorded video for uploading in Scaleflex Media Asset Widget.

Usage

NPM

npm install --save @scaleflex/widget-screen-capture

YARN

yarn add @scaleflex/widget-screen-capture

then

import ScreenCapture from '@scaleflex/widget-screen-capture'
...
...
...
scaleflexWidget.use(ScreenCapture, propertiesObject)

CDN

The plugin from CDN is found inside Scaleflex global object Scaleflex.ScreenCapture

const ScreenCapture = window.ScaleflexWidget.ScreenCapture
...
...
...
scaleflexWidget.use(ScreenCapture, propertiesObject)

Plugin's styles

import '@scaleflex/widget-core/dist/style.css'
import '@scaleflex/widget-screen-capture/dist/style.css'

or if you prefer the minified version

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 for having the styles shown correctly.

Properties

title

Type: string.

Default: 'Screen cast'

The title shown in the top bar of the panel.

preferredVideoMimeType

Type: string.

Default: 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 it would be used.

displayMediaConstraints

Type: object.

Default:

video: {
  width: 1280,
  height: 720,
  frameRate: {
    ideal: 3,
    max: 5
  },
  cursor: 'motion',
  displaySurface: 'monitor'
}

The options being passed for getDisplayMedia method of navigator.mediaDevices. Check the available options/properties from MDN Docs Whether to show the video's recording length or not while it is in progress.

userMediaConstraints

Type: object.

Default:

{
  audio: true
}

The options being passed for getUserMedia method of navigator.mediaDevices. Check the available options/properties from MDN Docs Whether to show the video's recording length or not while it is in progress.

locale

Type: object.

Default:

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.