Launch the page, click the buttons in the order, after record is finished
Record with camera
Create on the page 1 Screen&Camera recorder element, 1 floating group, 4 buttons and 2 dropdown inputs
Add Request camera and microphone permission action to get a list of available input devices
Configure dropdown inputs as on the example
Choices style: Dynamic choices
Choices source: state cameras from the screen & camera recorder
In the microphone dropdown menu chose state microphones
Add unique ID for the floating group
Add Start camera and microphone action with the selected camera and microphone
Configure as an example:
ID container: the ID of the floating group
Camera: yes
Microphone: yes
Camera to use: the value from camera’s dropdown
Microphone to use: the value from microphone’s dropdown
Add Start screen sharing action
Add Start recording action
Ready, review the page
Plugin Element - Screen&Camera recorder
Fields:
Title
Description
Type
Enable file size limit
Automatically stops recording before reaching Bubble's maximum file size limit to prevent upload failures. Recording stops at 94% of the limit (e.g., 47MB for a 50MB limit), providing a 6% safety buffer.
REQUIREMENTS:
•Element's field 'Max file size (MB)' must be > 0
EXPOSED_STATES:
•'Current recording size (MB)' - Real-time size tracking
•'Recording size percent' - Progress towards limit (0-100%)
The plugin monitors size every 100ms and stops automatically when the safety threshold is reached, ensuring successful uploads within Bubble's file size constraints.
Checkbox (yes/no)
Camera settings
Scale
Scale the camera
Number
Mirror
Mirror the camera
Checkbox (yes/no)
Vertical shift (px)
Move vertically in pixels. Allowed negative integer
Number
Horizontal shift (px)
Move horizontally in pixels. Allowed negative integer
Number
Element Actions
Start screen sharing
Start sharing screen
Title
Description
Type
System audio record
Request recording audio from system.
Supported by Google Chrome, Edge and Opera
Checkbox (yes/no)
Preview
Yes to display the shared screen in an element
Checkbox (yes/no)
Request camera and microphone permission
Request permission to share screen, camera, microphone. This actions is required for call others plugin’s actions
Title
Description
Type
Camera Record
Request access to the cameras
Checkbox (yes/no)
Microphone
Request access to the microphones
Checkbox (yes/no)
Start recording
Start recording screen and shared audio
Title
Description
Type
Record Quality
Choose the quality of your record. The only accepted values are :
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,opus”, 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)
Max Recording Length
Maximal length of record in seconds
Number (optional)
System audio record
Record shared audio
Checkbox (yes/no)
Microphone record
Record mic
Checkbox (yes/no)
File name
File name when saving to Bubble and to device
Text
Save to device
Yes - for save to the current device
Checkbox (yes/no)
Save to Bubble
Yes - for save to the Bubble storage
Checkbox (yes/no)
Make this file private
Attached this file to
(optional) Example value: Current User.
Private files uploaded with this element are permanently attached to a thing, which is used to determine who has access to view the file.
User or any Bubble’s thing
Pause or resume recording
Pause or resume the recording
Stop Sharing
Stops sharing screen and devices
Title
Description
Type
Stop sharing selected device
Screen
Yes to stop sharing the screen
Checkbox (yes/no)
Audio
Yes to stop sharing the audio
Checkbox (yes/no)
Camera
Yes to stop sharing the camera
Checkbox (yes/no)
Microphone
Yes to stop sharing the mic
Checkbox (yes/no)
Start camera and microphone
Start sharing camera and microphone
Title
Description
Type
ID container
ID of element where the camera will be placed.
Text
Camera
Yes - to start the chosen camera
Checkbox (yes/no)
Microphone
Yes - to start the chosen microphone
Checkbox (yes/no)
Camera to use
Chose camera from “cameras” state or left empty to use the first camera in the state
Text (optional)
Microphone to use
Chose camera from “microphones” state or left empty to use the first microphone in the state
Text (optional)
Draggable camera
(optional) Use this field to make the container with camera draggable. Fill-in with ID of camera element from field "id container" or of the element's wrapper.
Checkbox (yes/no)
Stop recording
Stop the started recording
Cancel recording
Stop recording without saving
Exposed states
Title
Description
Type
Microphones
A list of input audio devices
Text
Cameras
A list of input video devices
Text
Permission granted
Yes when user accepted requested permissions camera and/or microphone
Checkbox (yes/no)
Screen is sharing
Yes when screen is sharing
Checkbox (yes/no)
Camera is sharing
Yes when camera is sharing
Checkbox (yes/no)
Microphone is sharing
Yes when mic is sharing
Checkbox (yes/no)
Audio is sharing
Yes when audio is sharing
Checkbox (yes/no)
Screen type
Title of the shared screen
Text
Seconds recorded
Shows time while recording. When recording is stop, this state will be reset.
