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
How to setup
Taking Screenshots
- Add the CamCapture element to your page. It will show the camera preview. Resize the element to your desired size.
- Double-click the element and fill in its parameters
- Max file size (specifies what can be the max weight of the video you can upload to bubble)
- File uploads enabled (check it if you intend to upload the video to bubble after the recording is finished)
- Camera to use (front or back)
- Mirror (mirror the camera image horizontally)
- Turn on automatically (the browser will ask camera access permission automatically on load)
- Enable microphone
- Max video length (sec) (the recording will stop automatically when this number is reached)
- Preferred video extension (optional)
- Preferred MIME type (optional)
- File name (what your file will be called when you download it)
- Download on finish (yes / no)
- Add a “Take Photo” button to your page.
- Double-click the button you’ve added. And then click “Edit workflows”.
- In the event workflow page set the “Only when” field value to “CamCapture’s is paused is no”.
- Add the “Take picture with Cam Capture” action also from the Element Actions.
- Add a new image element to the page to display the result. Set the source of the image to “CamCapture’s Local image url”.
- 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
- Add the Cam Capture element to your page. It will show the camera preview. Resize the element to your desired size.
- Add a “Record” and a “Stop” button to your page.
- Double-click the Record button. And then click “Edit workflows”.
- Set the value of the Only when field to “CamCapture’s is recording is no and CamCapture’s is saving s no”.
- Add the action “Start recording CamCapture”.
- Now double-click the Stop button. And then click “Edit workflows”.
- Set the value of the Only when field to “CamCapture is recording is yes and CamCapture is saving is no”.
- Then add a Stop recording CamCapture action to this event.
- Lastly, add a video player element to display the recorded video. The video player element is available as a separate plugin element inside CamCapture.
- Set its source to “CamCapture’s captured video”
- 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”.
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 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