Overview
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode />
<VeltRecorderControlPanelWireframe.ThreadMode />
</VeltRecorderControlPanelWireframe>
</VeltWireframe>
Floating Mode
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode>
<VeltRecorderControlPanelWireframe.FloatingMode.Container />
<VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer />
<VeltRecorderControlPanelWireframe.FloatingMode.Loading />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar />
</VeltRecorderControlPanelWireframe.FloatingMode>
</VeltWireframe>
Container (Floating Mode)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.Container>
<VeltRecorderControlPanelWireframe.FloatingMode.Video />
<VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton />
<VeltRecorderControlPanelWireframe.FloatingMode.Paused />
<VeltRecorderControlPanelWireframe.FloatingMode.Waveform />
</VeltRecorderControlPanelWireframe.FloatingMode.Container>
</VeltWireframe>
Video (Floating Mode Container)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.Video />
</VeltWireframe>
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.Waveform />
</VeltWireframe>
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton>
<VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.On />
<VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.Off />
</VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton>
</VeltWireframe>
On (CollapsedButton)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.On />
</VeltWireframe>
Off (CollapsedButton)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.Off />
</VeltWireframe>
Paused (Floating Mode Container)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.Paused />
</VeltWireframe>
ScreenMiniContainer (Floating Mode)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer>
<VeltRecorderControlPanelWireframe.FloatingMode.Video />
<VeltRecorderControlPanelWireframe.FloatingMode.Screen />
</VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer>
</VeltWireframe>
Video (Floating Mode ScreenMiniContainer)
This is the same Video component as used in the Floating Mode Container.
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.Video />
</VeltWireframe>
Screen (Floating Mode ScreenMiniContainer)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.Screen />
</VeltWireframe>
Loading (Floating Mode)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.Loading />
</VeltWireframe>
ActionBar (Floating Mode)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.TypeIcon />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Time />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Waveform />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Pip />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Stop />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Clear />
</VeltRecorderControlPanelWireframe.FloatingMode.ActionBar>
</VeltWireframe>
TypeIcon (ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.TypeIcon />
</VeltWireframe>
Time (ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Time />
</VeltWireframe>
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Waveform />
</VeltWireframe>
Toggle (ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Pause />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Play />
</VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle>
</VeltWireframe>
Pause (Toggle)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Pause />
</VeltWireframe>
Play (Toggle)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Play />
</VeltWireframe>
Pip (ActionBar)
Picture-in-Picture button for screen recordings with camera. This allows users to view the recording in a floating window during screen capture.
Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Pip />
</VeltWireframe>
Stop (ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Stop />
</VeltWireframe>
Clear (ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Clear />
</VeltWireframe>
Thread Mode
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode>
<VeltRecorderControlPanelWireframe.ThreadMode.Video />
<VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer />
<VeltRecorderControlPanelWireframe.ThreadMode.Loading />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar />
</VeltRecorderControlPanelWireframe.ThreadMode>
</VeltWireframe>
Video (Thread Mode)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.Video />
</VeltWireframe>
Loading (Thread Mode)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.Loading />
</VeltWireframe>
ActionBar (Thread Mode)
This ActionBar is similar in structure to the Floating Mode ActionBar but specific to ThreadMode.
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.TypeIcon />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Time />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Waveform />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Pip />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Stop />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Clear />
</VeltRecorderControlPanelWireframe.ThreadMode.ActionBar>
</VeltWireframe>
TypeIcon (Thread Mode ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.TypeIcon />
</VeltWireframe>
Time (Thread Mode ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Time />
</VeltWireframe>
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Waveform />
</VeltWireframe>
Toggle (Thread Mode ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Pause />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Play />
</VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle>
</VeltWireframe>
Pause (Thread Mode Toggle)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Pause />
</VeltWireframe>
Play (Thread Mode Toggle)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Play />
</VeltWireframe>
Pip (Thread Mode ActionBar)
Picture-in-Picture button for screen recordings with camera in Thread Mode. This allows users to view the recording in a floating window during screen capture.
Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Pip />
</VeltWireframe>
Stop (Thread Mode ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Stop />
</VeltWireframe>
Clear (Thread Mode ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Clear />
</VeltWireframe>
ScreenMiniContainer (Thread Mode)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer>
<VeltRecorderControlPanelWireframe.ThreadMode.Video />
<VeltRecorderControlPanelWireframe.ThreadMode.Screen />
</VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer>
</VeltWireframe>
Video (Thread Mode ScreenMiniContainer)
This is the same Video component as used in the main Thread Mode section.
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.Video />
</VeltWireframe>
Screen (Thread Mode ScreenMiniContainer)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.Screen />
</VeltWireframe>