@scaleflex/widget-webcam

The webcam plugin for Scaleflex Media Asset Widget gives the possibility to take a photo and record video from the built-in camera and process them for uploading directly.

Usage

NPM

npm install --save @scaleflex/widget-webcam

YARN

yarn add @scaleflex/widget-webcam

then

import Webcam from '@scaleflex/widget-webcam'
...
...
...
scaleflexWidget.use(Webcam, propertiesObject)

CDN

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

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

Plugin's styles

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

or if you prefer the minified version

import '@scaleflex/widget-core/dist/style.min.css'
import '@scaleflex/widget-webcam/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: 'Camera'

The title shown in the top bar of the panel.

countdown:

Type: number.

Default: 0/false

When capturing a photo, wait the amount of this countdown in seconds and then capture the photo with showing an informer message with the seconds left & Smile text when countdown is passed.

modes

Type: array.

Default: all modes allowed

The modes allowed for the user:

• video-audio: Records a video file including the audio.
• video-only: Records a video file excluding audio.
• audio-only: Records audio only but no video.
• picture: Takes a photo from the camera.

mirror

Type: boolean.

Default: true

Defines if you need to mirror the (preview image) or not.

facingMode

Type: string.

Default: 'user'

`In case device has multiple cameras this option gives the possibility to choose which one should be used:

• user: The video source is facing toward the user; this includes, for example, the front-facing camera on a smartphone.
• environment: The video source is facing away from the user, thereby viewing their environment. This is the back camera on a smartphone.
• left: The video source is facing toward the user but to their left, such as a camera aimed toward the user but over their left shoulder.
• right: The video source is facing toward the user but to their right, such as a camera aimed toward the user but over their right shoulder.

preferredImageMimeType

Type: string.

Default: 'image/jpeg'

Defines the captured image mime type ex. image/png if not defined or defined some un-supported mime type from the browser then image/jpeg would be used.

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.

showRecordingLength

Type: boolean.

Default: true

Whether to show the video's recording length or not while it is in progress.

isRecordIconHidden

Type: boolean.

Default: false

If set to true, the record button in webcam will be disabled preventing users from recording videos.

locale

Type: object.

Default:

strings: {
  smile: 'Smile!',
  takePicture: 'Take a picture',
  startRecording: 'Begin video recording',
  stopRecording: 'Stop video recording',
  allowAccessTitle: 'Please allow access to your camera',
  allowAccessDescription: 'In order to take pictures or record video with your camera, please allow camera access for this site.',
  noCameraTitle: 'Camera Not Available',
  noCameraDescription: 'In order to take pictures or record video, please connect a camera device',
  recordingStoppedMaxSize: 'Recording stopped because the file size is about to exceed the limit',
  recordingLength: 'Recording length %{recording_length}'
}

Customizing some of the translations or the language's strings and replace the default locale.