useMediaRecorder

import { useMediaRecorder } from '@vincent.ri/react-tils'
// or only this hook
import { useMediaRecorder } from '@vincent.ri/react-tils/useMediaRecorder'

const [on, setOn] = useState(false)
const { stream } = useUserMedia({ audio: true }, { enabled: on })
const recorder = useMediaRecorder(stream)
const finish = async () => {
  const blob = await recorder.stop()
  if (blob) await transcribe(new File([blob], 'note', { type: blob.type }))
  setOn(false)
}
return recorder.recording
  ? <button onClick={finish}>Stop</button>
  : <button onClick={() => (stream ? recorder.start() : setOn(true))}>{stream ? 'Record' : 'Allow microphone'}</button>

function useMediaRecorder(stream: MediaStream | null, options?: MediaRecorderOptions): MediaRecorderState

export type MediaRecorderOptions = {
  /** Formats to try, in order; the first one the browser can record is used. Default: Opus in WebM, then MP4 (Safari), then Ogg, for audio; VP9/VP8 WebM, then MP4, for video. */
  mimeTypes?: string[];
};
export type MediaRecorderState = {
  /** `false` on the server, during hydration, and in browsers without `MediaRecorder`. */
  supported: boolean;
  recording: boolean;
  /** The format actually recorded, e.g. `audio/webm;codecs=opus` or `audio/mp4`. Use it for the file extension and upload. */
  mimeType: string | null;
  /** The last finished recording. */
  blob: Blob | null;
  error: Error | null;
  /** Start recording `stream`. Does nothing while recording or without a stream. */
  start: () => void;
  /** Stop and resolve with the finished recording, including its last chunk. */
  stop: () => Promise<Blob | null>;
};