Nucleic Photon Magnetizer

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

    1.0.128-rc.1 • Public • Published


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


    From NPM

    The plugin is on NPM as @filerobot/webcam

    npm install --save @filerobot/webcam


    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.


    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)


    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.




    npm i @filerobot/webcam

    DownloadsWeekly Downloads






    Unpacked Size

    44.9 kB

    Total Files


    Last publish


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