import { VeltRecorderControlPanel } from '@veltdev/react'

const SomeComponent = () => {

    const onRecordedData = (id,tag) => {
        console.log(id,tag)
    }
    return (
        <div>
            <VeltRecorderControlPanel mode="thread" onRecordedData={onRecordedData} />
        </div>
    )
}

export default SomeComponent;
  • React / Next.js

  • HTML

1

Floating Mode vs. Thread Mode

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" />
2

onRecordedData callback

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:

FieldTypeExample
idstring“recorder_id”
tagstring<snippyly-recorder-player recorder-id=\"RECORDER_ID\"></snippyly-recorder-player>
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;