Velt Recorder Control Panel

The VeltRecorderControlPanel can be configured in either Floating mode or Thread mode.

Default: "floating"

Floating mode will show a preview in the bottom left of the page, no matter where you put the component.

Thread mode will show the component wherever it is placed.

To configure the mode, set the mode attribute to floating or thread:

<VeltRecorderControlPanel mode="floating" />
<VeltRecorderControlPanel mode="thread" />

Whenever a recording is created, the VeltRecorderControlPanel component emits a callback event called onRecordedData with data from the VeltRecorderPlayer that was used to create the recording.

This is the response object that you get back:

import { VeltRecorderControlPanel } from '@veltdev/react'

const SomeComponent = () => {

    const onRecordedData = (id,tag) => {
        console.log(id,tag)
    }
    return (
    	//... rest of the component code...
      <VeltRecorderControlPanel mode="thread" onRecordedData={onRecordedData} />

      //... rest of the component code...
    )
}

export default SomeComponent;