useMediaRecorder

Installation

npm install @1hook/use-media-recorder

Usage

import { useMediaRecorder } from '@1hook/use-media-recorder'

The recording automatically starts when a media stream is provided and stops when the stream is nullish.

useMediaRecorder(stream, {
  onComplete(chunks) {
    const blob = new Blob(chunks, { type: 'video/webm' })
    const url = URL.createObjectURL(blob)
    setRecordingSrc(url)
  },
})

You can pause and resume the recording:

const { pause, resume } = useMediaRecorder(stream, {
  onComplete(chunks) {
    // transform the chunks into a file or url
  },
})

Transform the recorded data into a File:

const { pause, resume } = useMediaRecorder(stream, {
  onComplete(chunks) {
    const type = 'video/webm'
    const blob = new Blob(chunks, { type })
    const file = new File([blob], 'recording.webm', { type })
    setFile(file)
  },
})

Example

Record video from the device's camera:

import { useMediaRecorder } from '@1hook/use-media-recorder'
import { useUserMedia } from '@1hook/use-user-media'
import { useState } from 'react'

export default function VideoRecorder() {
  const [recordingSrc, setRecordingSrc] = useState<string>()

  const media = useUserMedia({ video: true })

  const recorder = useMediaRecorder(media.stream, {
    onComplete(chunks) {
      const blob = new Blob(chunks, { type: 'video/webm' })
      const src = URL.createObjectURL(blob)
      setRecordingSrc(src)
    },
  })

  return (
    <div>
      {recordingSrc && <video src={recordingSrc} controls />}

      {recorder.state === 'inactive' && (
        <button onClick={media.open}>Start Recording</button>
      )}
      {recorder.state === 'recording' && (
        <button onClick={media.close}>Stop Recording</button>
      )}
    </div>
  )
}

API Reference

UseMediaRecorderOptions

The options of the useMediaRecorder hook. See MDN docs for more details.

Prop	Type	Default
`onComplete?`	`((chunks: Blob[]) => void)`	-
`onResume?`	`(() => void)`	-
`onPause?`	`(() => void)`	-
`onStart?`	`(() => void)`	-
`onStop?`	`(() => void)`	-
`timeslice?`	`number`	-
`videoBitsPerSecond?`	`number`	-
`mimeType?`	`string`	-
`bitsPerSecond?`	`number`	-
`audioBitsPerSecond?`	`number`	-

UseMediaRecorderReturn

The return value of the useMediaRecorder hook.

Prop	Type	Default
`resume`	`() => void`	-
`pause`	`() => void`	-
`state`	`RecordingState`	-