🔗

Link to the plugin page: https://zeroqode.com/plugin/video-recorder-1641459923217x281479548148178200

Demo to preview the settings

🔗

Live Demo: https://zeroqode-demo-23.bubbleapps.io/video_recorder

🔗

Demo Editor: https://bubble.io/page?version=live&name=video_recorder&id=zeroqode-demo-23&tab=tabs-1

Introduction

With this plugin, you are able to record a video using the device camera. It allows access to the webcam and microphone when prompted by the browser, to enable recording.

Recordings can be saved in DB, AWS, and Wasabi accounts. Any type of fan videos, crowdsourced videos, or user-generated videos.

These could be video testimonials, video interviews, video contests, video auditions, video reviews, video feedback etc.

The plugin can limit video recording time, also supports pause/play, and cancel recording features. It includes many actions and events that make the implementation of your idea nice and easy. Simple to use, simple to record.

How To Setup

Place plugin element on the page

Enable file upload, should be set always as "yes"

Add a button to the page

Set workflow for this button

Add a button to the page

And set workflow

And save URL to Bubble data

💡

If you want to save the Video File URL to the App Data, use the “Create a new thing” action in the new workflow only. It will give the plugin the needed timing for the Video URL state’s value creation. Thus, use the “Video Recorder - File is uploaded” event in such a use case.

Plugin element: Video Recorder

The main element of the plugin. Show captured from camera track, record, and save it.

Plugin fields

Title	Description
Enable Logs	Show in console information about recording status.
Zoom	Zoom video in video recorder element.
Mirror Camera	Mirror the recording.

Plugin Actions

Start Recording

Stop Recording

Start Camera

Stop Camera

Pause\Resume Recording

Save Record

Reset Record

Take a photo

Plugin Exposed States

Title	Description	Type
Video Size	File size in bytes	Number
Recording Length	Length in seconds	Number
Recording Status	Recording Status	Text
Video URL	URL to the video	File
Device Supported	Return is Device is Supported	Checkbox (yes/no)
Paused	Yes when paused	Checkbox (yes/no)
Recording	Yes when recording	Checkbox (yes/no)
Photo URL	URL to a photo	Text
List of cameras	List of available cameras	Text
List of microphones	List of available microphones	Text
Codec	Video and Audio codec that is used on last recording	Text

Plugin Events

Title	Description
Camera Is Enabled	Triggered when the camera is enabled
Recording Started	Triggered then recording is started
Recording Finished	Triggered then recording is finished
File is uploaded	Triggered when video record is uploaded to cloud storage
Camera is Disabled	Triggered when the camera is disabled
Error in uploading a file	Triggered then an error is occurred in file uploading

How to set keys for AWS or Wasabi

Wasabi

Visit wasabi.com to sign up for their service, you will get an email with a link to your console. In your Wasabi console go to Billing->Payment settings then add your Payment method.

While you do receive a month's free trial to upload private files, a paid account is required to upload public files.

Next, go to the Access Keys page & create a new access key.

Insert the access key/secret from the plugins tab.

AWS

For setup uploading to AWS please read our AWS Uploader documentation

Title	Description
Access Key	AWS/Wasabi access key
Secret Key	AWS/Wasabi secret key

Changelogs

Update 20.12.22 - Version: 1.3.0.

Added action "Take a photo"

Update 28.12.22 - Version: 1.4.0.

Added "File is uploaded" event for Wasabi and AWS. Updated reset action.

Update 20.01.23 - Version: 1.5.0.

Updated description

Update 02.02.23 - Version: 1.6.0.

Updated description

Update 22.02.23 - Version: 1.7.0.

Updated description

Update 23.02.23 - Version: 1.8.0.

Deleted the icons

Update 02.03.22 - Version: 1.9.0.

Added "Select Camera" field in the "Start Camera" action

Update 20.03.22 - Version: 1.10.0.

Added Zoom feature.

Update 19.06.23 - Version: 1.11.0.

Updated description

Update 12.07.23 - Version: 1.12.0.

Updated description

Update 11.09.23 - Version: 1.14.0.

Fixed Safari browser detection.

Update 01.15.23 - Version: 1.15.0.

Minor updates

Update 15.09.23 - Version: 1.16.0.

Updated description

Update 06.10.23 - Version: 1.17.0.

Updated "List of cameras" state.

Update 17.10.23 - Version 1.18.0

Changed plugin API to V4

Update 27.10.23 - Version 1.20.0

Updated documentation

Update 09.11.23 - Version 1.21.0

Adapted for new responsive

Update 11.11.23 - Version 1.22.0

Added "folder" field for "save_record" action.

Update 13.11.23 - Version 1.23.0

Added "Record Quality" field for "Start Recording" action.

Update 18.12.23 - Version 1.26.0

Added border style options.

Update 03.01.24 - Version 1.28.0

Minor fixes

Update 17.01.24 - Version 1.29.0

Added mirror video recording

Update 08.03.24 - Version 1.30.0

Fixed Microphone remaining active during video recording despite being disabled

Update 29.04.24 - Version 1.32.0

updated mirror video recording

Update 03.05.24 - Version 1.33.0

new aspect ratio field

Update 09.05.24 - Version 1.34.0

Added Codec field for action Start Recording, added Codec state

Update 23.06.24 - Version 1.36.0

Fixed "Start Recording" action

Update 11.07.24 - Version 1.37.0

Fixed zoom in feature

Update 17.07.24 - Version 1.38.0

Fixed "List of cameras" when the access was not given before

Update 19.07.24 - Version 1.39.0

Fixed mirror feature.

Title	Description	Type
File Name	File Name of the record which is used for saving	Text
Max Recording Length	Maximal length of record in seconds	Number
Autosave	Automatically save to bubble or download record	Checkbox (yes/no)
Save To Bubble	If is “yes” - record will be saved to bubble, else will be downloaded	Checkbox (yes/no)
Record Quality	Choose the quality of your record. The only accepted values are : Low Quality, Medium Quality, High Quality, Very High Quality . Available options: Low Quality, Medium Quality, High Quality, Very High Quality	Text (optional)
Codec	By default the action uses "video/mp4;codecs=avc1" for IOS. Other browsers select codec by their own settings. Usually select "webm" or "x-matroska". Recommended use "video/webm;codecs=vp8", most modern browsers support playing video with this format. Action checks if the selected codec is supported by current browser, if not, will change to default. The selected codec is shown in an exposed state "Codec" right after the recording is started.	Text (optional)

Title	Description	Type
With Microphone	Enable microphone in record	Checkbox (yes/no)
Camera	If selected type of camera is available it will be used, else will be used first detected camera Available options: Front, Rear	Dropdown
Select Camera	Selected camera from dropdown.	Text (optional)
Aspect Radio	16/9, 4/3, 1/1	Text

Title	Description	Type
Save To	Choose the service to save the file Available options: AWS, Wasabi, Bubble, Download	Dropdown
	Fields For Storages
Bucket Name	String representing the name of the cloud storage bucket where the file will be stored	Text (optional)
Bucket Region	String representing the region of the cloud storage bucket where the file will be saved	Text (optional)
Folder	The text representing the name of the folder in the bucket where the file will be saved. The folder name should not contain the ‘%’ sign	Text (optional)
Private File	A boolean value indicating whether the saved file should be marked as private or not. It might control access permissions to the file in the cloud storage.	Checkbox (yes/no) (optional)