Camera Capture and Video Recorder

Demo to preview the plugin:

Introduction

This plugin lets you make screenshots and record videos on desktop and mobile devices. It supports front and back camera recording, mirroring, and custom output format selection.

Prerequisites

The device must be using a browser that supports media recorder. You can check if your browser is included here https://caniuse.com/mediarecorder
💡
To use this plugin for you and your app users and access your camera and microphone, please ensure that your browser settings allow access to these devices. You may need to check and adjust your browser's permissions for camera and microphone access. Once you've ensured the settings are configured correctly, the plugin will prompt you to grant access when needed.
‼️
MediaRecorder API used for recording videos with this plugin is not currently supported for Firefox version 124 and 125
Image without caption

How to setup

Taking Screenshots

  1. Add the CamCapture element to your page. It will show the camera preview. Resize the element to your desired size.
Image without caption
  1. Double-click the element and fill in its parameters
    1. Max file size (specifies what can be the max weight of the video you can upload to bubble)
    2. File uploads enabled (check it if you intend to upload the video to bubble after the recording is finished)
    3. Camera to use (front or back)
    4. Mirror (mirror the camera image horizontally)
    5. Turn on automatically (the browser will ask camera access permission automatically on load)
    6. Enable microphone
    7. Max video length (sec) (the recording will stop automatically when this number is reached)
    8. Preferred video extension (optional)
    9. Preferred MIME type (optional)
    10. File name (what your file will be called when you download it)
    11. Download on finish (yes / no)
  1. Add a “Take Photo” button to your page.
Image without caption
  1. Double-click the button you’ve added. And then click “Edit workflows”.
  1. In the event workflow page set the “Only when” field value to “CamCapture’s is paused is no”.
Image without caption
  1. Add the “Take picture with Cam Capture” action also from the Element Actions.
Image without caption
  1. Add a new image element to the page to display the result. Set the source of the image to “CamCapture’s Local image url”.
Image without caption
  1. Click preview and test the setup. You will be prompted to give the camera access permission. After granting the permission, click the “Take Photo” button and you should see your screenshot in the preview image element.

Recording And Saving Videos

  1. Add the Cam Capture element to your page. It will show the camera preview. Resize the element to your desired size.
Image without caption
  1. Add a “Record” and a “Stop” button to your page.
Image without caption
  1. Double-click the Record button. And then click “Edit workflows”.
  1. Set the value of the Only when field to “CamCapture’s is recording is no and CamCapture’s is saving s no”.
Image without caption
  1. Add the action “Start recording CamCapture”.
Image without caption
Image without caption
  1. Now double-click the Stop button. And then click “Edit workflows”.
  1. Set the value of the Only when field to “CamCapture is recording is yes and CamCapture is saving is no”.
Image without caption
  1. Then add a Stop recording CamCapture action to this event.
Image without caption
Image without caption
  1. Lastly, add a video player element to display the recorded video. The video player element is available as a separate plugin element inside CamCapture.
  1. Set its source to “CamCapture’s captured video”
Image without caption
  1. Test your setup. Click preview. Then hit the record button, and then the Stop button. Your recorded video should appear in the video element.

How to save videos?

Follow the instructions above to set up a video capture workflow.
Double click the CamCapture element and set the “File uploads enabled” to “yes”.
Image without caption
Now when you stop the recording the video will be saved to the Bubble data store.
If you want to track the progress of your video upload, you should display your own progress bar. One way to do this is by adding Bubble’s “Progress Bar” plugin to your page. You can then set the value of the progress bar to “Cam Capture’s upload percentage”.

Additional Features

Pause / resume

Pause (freeze) the camera preview and resume it. You can take a picture while the camera is paused.

Start / stop

By default, the camera starts automatically on page load. You can disable this behaviour by unchecking the “Start automatically” box in the plugin properties and instead use the “start” action to control when to begin accessing the user’s camera. Use “stop” to stop accessing the camera, which turns off the webcam usage indicator light the device might have.

Mirror

Mirrors the camera feed and resulting image.

Front / back camera

Some devices feature both front and back cameras. You can retrieve a list of all cameras that can be used from the plugin and select which to use in the plugin properties. You can also change the camera in use dynamically using the plugin’s “Conditional” tab.

Changelogs

Update 05/07/2024 - Version 1.26.0

  • Fixed empty image upload in the database

Update 04/28/2024 - Version 1.25.0

  • Fixed recording size and length

Update 03/07/2024 - Version 1.24.0

  • Access camera for Firefox and event, fields fixes

Update 03/04/2024 - Version 1.23.0

  • Fixed mobile camera options, requested permissions on devices, and mirroring on the back camera

Update 12/7/2023 - Version 1.22.0

  • Updated display of content in the "Video Player" element

Update: 10/16/2023 - Version 1.16.0

  • improved - Updated description

Update: 09/18/2023 - Version 1.15.0

  • improved -Updated description

Update: 09/13/2023 - Version 1.14.0

  • improved - Updated description

Update: 09/13/2023 - Version 1.13.0

  • improved - Minor updates

Update: 06/29/2023 - Version 1.12.0

  • fixed - Added option to specify a preferred file extension and/or MIME type.

Update: 03/02/2023 - Version 1.11.1

  • fixed - Fixed an issue when starting a recording after having turned off camera could fail.

Update: 20/01/2023 - Version 1.11.0

  • fixed - Added an action to copy debug information to clipboard for error reporting.

Update: 07/09/2022 - Version 1.10.0

  • fixed - Added ability to set a custom video / audio bitrate for recordings.

Update: 07/03/2022 - Version 1.9.0

  • fixed - Added ability to get current recorded duration and set a max video length.

Update: 27/04/2022 - Version 1.8.0

  • fixed - Remove auto pausing on taking a picture. Use “pause” action along with “take a picture” instead.

Update: 27/04/2022 - Version 1.7.2

  • fixed - Fix file upload max size.

Update: 09/02/2022 - Version 1.7.1

  • fixed - Fix issue uploading files when “File uploads enabled” is on.

Update: 24/01/2022 - Version 1.7.0

  • fixed - Added video player element.

Update: 11/11/2021 - Version 1.6.3

  • fixed - Check supported constraints before constraining user media requests

Update: 11/11/2021 - Version 1.6.2

  • fixed - Handle corner case failing initialization.

Update: 11/11/2021 - Version 1.6.1

  • fixed - Fix duplicated logging

Update: 11/10/2021 - Version 1.6.0

  • fixed - Added debug feature. Fixed possible race condition when facing mode set dynamically.

Update: 11/09/2021 - Version 1.5.1

  • fixed - Fix “Started” value.

Update: 12/31/2020 - Version 1.5.0

  • fixed - Add check for image capture support.

Update: 11/16/2020 - Version 1.4.0

  • fixed - Add reset function. Minor bug fixes.

Update: 11/13/2020 - Version 1.3.0

  • fixed - Add file name option. Minor bug fixes.

Update: 10/30/2020 - Version 1.2.1

  • fixed - Fix inconsistent behavior on turning off the camera.

Update: 10/30/2020 - Version 1.2.0

  • fixed - Added video recording feature.

Update: 10/08/2020 - Version 1.1.2

  • fixed - Typo

Update: 10/06/2020 - Version 1.1.1

  • fixed - Fix enumerating facing modes on iphone.

Update: 10/06/2020 - Version 1.1.0

  • fixed - Added ability to start / stop camera.

Update: 01/12/2019 - Version 1.0.1

  • fixed - Plugin not working in groups and popups.

Update: 12/18/2018 - Version 1.0

  • Initial release