TypeScript icon, indicating that this package has built-in type declarations

3.41.35 • Public • Published


Plugins Website Version Scaleflex team License CodeSandbox

Filerobot Widget logo

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



npm install --save @filerobot/webcam


yarn add @filerobot/webcam


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


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

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

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.



Type: string.

Default: 'Camera'

The title shown in the top bar of the panel.


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.


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.


Type: boolean.

Default: true

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


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.


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.


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.


Type: boolean.

Default: true

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


Type: boolean.

Default: false

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


Type: object.


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.




Package Sidebar


npm i @filerobot/webcam

Weekly Downloads






Unpacked Size

115 kB

Total Files


Last publish


  • philipka
  • amrw.js
  • amr26
  • ahmeeedmostafa
  • vitaly.shaposhnik