npm package: @scaleflex/widget-webcam
Description: Scaleflex plugin that takes photos or records videos using the device's camera.
Latest version: 4.8.13

# `@scaleflex/widget-webcam`

[![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 webcam plugin for [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core) gives the possibility to take a photo and record video from the built-in camera and process them for uploading directly.

## Usage

### NPM

```bash
npm install --save @scaleflex/widget-webcam
```

### YARN

```bash
yarn add @scaleflex/widget-webcam
```

then

```js
import Webcam from '@scaleflex/widget-webcam'
...
...
...
scaleflexWidget.use(Webcam, propertiesObject)
```

### CDN

The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.Webcam`

```js
const Webcam = window.ScaleflexWidget.Webcam
...
...
...
scaleflexWidget.use(Webcam, propertiesObject)
```

### Plugin's styles

```js
import '@scaleflex/widget-core/dist/style.css'
import '@scaleflex/widget-webcam/dist/style.css'
```

or if you prefer the minified version

```js
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](../@scaleflex/widget-core/#modules-styles) for having the styles shown correctly.


## Properties

### `title`

<u>Type:</u> `string`.

<u>Default:</u> `'Camera'`

The title shown in the top bar of the panel.

### `countdown: `

<u>Type:</u> `number`.

<u>Default:</u> `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`

<u>Type:</u> `array`.

<u>Default:</u> `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`

<u>Type:</u> `boolean`.

<u>Default:</u> `true`

Defines if you need to mirror the (preview image) or not.

### `facingMode`

<u>Type:</u> `string`.

<u>Default:</u> `'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`

<u>Type:</u> `string`.

<u>Default:</u> `'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`

<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.

### `showRecordingLength`

<u>Type:</u> `boolean`.

<u>Default:</u> `true`

Whether to show the video's recording length or not while it is in progress.

### `isRecordIconHidden`

<u>Type:</u> `boolean`.

<u>Default:</u> `false`

If set to `true`, the record button in webcam will be disabled preventing users from recording videos.

### `locale`

<u>Type:</u> `object`.

<u>Default:</u>

```js
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.

<!-- Variables -->

[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-webcam
[license-url]: https://opensource.org/licenses/MIT
[sfx-url]: https://www.scaleflex.com/
[version-url]: https://www.npmjs.com/package/@scaleflex/widget-webcam
[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-webcam?label=Version&style=for-the-badge&logo=npm
[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox