@filerobot/webcam

The webcam plugin gives the possiblity to take a photo and record video from the built-in camera and process them for uploading directly.

Usage

From NPM

The plugin is on NPM as @filerobot/webcam

npm install --save @filerobot/webcam

then

import Webcam from '@filerobot/webcam'
...
...
...
filerobot.use(Webcam, optionsObject)

From CDN

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

const Webcam = window.Filerobot.Webcam
...
...
...
filerobot.use(Webcam, optionsObject)

Plugin's styles

import '@filerobot/core/dist/style.css'
import '@filerobot/webcam/dist/style.css'

or if you prefer the minified version

import '@filerobot/core/dist/style.min.css'
import '@filerobot/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.

Options

id: string (optional)

default: 'Webcam'

An unique identifier for the plugin to be indentified between the other plugins through it.

title: string (optional)

default: 'Camera'

The title shown in the topbar of the panel.

countdown: number (optional)

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: [] (optional)

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: boolean (optional)

default: true

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

facingMode: string (optional)

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: string (optional)

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: string (optional)

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: boolean (optional)

default: true

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

locale: object (optional)

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.