How to configure and use Tab Recorder
1. Add the element
Place the Tab Recorder element on the Bubble page where you want recording to be available.

2. Configure the main fields
Set the main properties of the element according to your use case:
- Default camera device
- Default microphone device
- Show webcam in pre-record
- Countdown default
- Maximum recording duration in seconds
- Capture microphone
- Capture tab audio
- Save to Bubble on stop
- Output file name
- Attach to
- UI colors for modal, toolbar, buttons, countdown, and toggles

3. Configure the recording limit
Set the field max_duration_seconds to define the maximum allowed recording time.
Example:
- 180 = 3 minutes
When the countdown reaches zero during recording, the plugin stops automatically, finalizes the video, uploads it to Bubble if enabled, and returns the final URL.

4. Add workflows to open the recorder
Create a workflow in Bubble and use the action:
Open recorder UI
This opens the recording interface so the user can prepare the recording.

5. Let the user choose devices
When the UI opens, the user can:
- Select a camera
- Select a microphone
- Turn camera on or off
- Turn microphone on or off
- Choose the countdown option before recording
- See the maximum recording time available

6. Start recording
You can start recording in two ways:
- Let the user click the start button in the plugin UI
- Or use the Start recording action from a Bubble workflow

7. Understand the recording flow
If countdown is set to immediate:
- The user clicks start
- The browser opens the tab/window selection dialog
- The user selects the tab
- Recording starts immediately

If countdown is set to 3, 5, or 10 seconds:
- The user clicks start
- The browser opens the tab/window selection dialog
- The user selects the tab
- The plugin shows the countdown
- Recording starts after the countdown ends

8. Control the recording
During recording, the floating toolbar allows the user to:
- Stop recording
- Pause recording
- Resume recording
- Mute/unmute microphone
- Cancel the recording

9. Save the final video
If save_to_bubble_on_stop is enabled:
- The plugin uploads the final video automatically to Bubble
- The final file URL is published in the plugin state

10. Use plugin states in workflows
You can use exposed states to track and react to the recording lifecycle, such as:
- is_open
- is_recording
- is_paused
- countdown_value
- remaining_seconds
- remaining_time_text
- url_bubble_video
- error_message
- selected_camera_id
- selected_microphone_id
- is_camera_enabled
- is_microphone_enabled

11. Use plugin events in workflows
You can trigger Bubble workflows from plugin events such as:
- ui_opened
- ui_closed
- devices_loaded
- countdown_started
- recording_started
- recording_paused
- recording_resumed
- recording_stopped
- recording_ready
- video_saved
- upload_error
- recording_error
- permission_denied

12. Recommended setup
For a controlled and reliable recording flow, recommended settings are:
- max_duration_seconds = 180
- save_to_bubble_on_stop = yes
- capture_microphone = yes, when needed
- capture_tab_audio = yes, when supported by the browser
- countdown_default = 3 or immediate, depending on the use case

13. Important notes
- The browser must allow camera, microphone, and tab capture permissions
- Some features depend on browser and operating system permissions
- The plugin is designed to record the current browser tab, not necessarily the full screen
- Video size depends on duration, bitrate, codec, and whether audio is included
- The maximum duration helps control upload size and storage usage

Demo editor:
https://bubble.io/page?id=mentions-20237&tab=Design&name=tab_recording&type=page&elements=cmrAU

Live demo:
https://mentions-20237.bubbleapps.io/version-test/tab_recording

Documentation:
https://mentions-20237.bubbleapps.io/version-test/help_tab_recording