@reechy-tools/
recorder

import { BrowserRecorder } from '@reechy-tools/recorder'

const recorder = new BrowserRecorder({
  screen: true,
  pip: { shape: 'rounded', mirrored: true },
  maxDuration: 300,  // auto-stop at 5 min
})

await recorder.init()
recorder.start()

const blob = await recorder.stop()  // → WebM

import { useRecorder, usePip } from '@reechy-tools/recorder/react'

const recorder = useRecorder({ screen: true, pip: { shape: 'rounded' } })

// Spread on your container → Tailwind state styling
<div {...recorder.dataAttrs}
  className="[&[data-recording]]:ring-2 [&[data-recording]]:ring-red-500"
>
  <video ref={el => { if (el) el.srcObject = recorder.screenStream }} />
</div>