Vue Use Media Recorder

Appearance

Composables ​

useMediaRecorder ​

vue
<script setup>
import { useMediaRecorder } from '@orbisk/vue-use-media-recorder'

const {
  data,
  stream,
  start,
  pause,
  resume,
  stop,
  state,
  isSupported,
  isMimeTypeSupported,
  mimeType,
  mediaRecorder,
} = useMediaRecorder(options)

start()
</script>

options ​

ts
interface UseMediaRecorderOptions extends ConfigurableNavigator {
  /**
   * The constraints parameter is a MediaStreamConstraints object specifying the types of media to request, along with any requirements for each type.
   */
  constraints?: MaybeRef<MediaStreamConstraints>
  /**
   * Options to pass to the MediaRecorder constructor.
   */
  mediaRecorderOptions?: MaybeRef<MediaRecorderOptions>
  /**
   * Callback when recording starts.
   */
  onStart?: (ev: Event) => any
  /**
   * Callback when recording pauses.
   */
  onPause?: (ev: Event) => any
  /**
   * Callback when recording resumes.
   */
  onResume?: (ev: Event) => any
  /**
   * Callback when recording stops.
   */
  onStop?: (ev: Event) => any
  /**
   * Callback when an error occurs.
   */
  onError?: (ev: Event) => any
}
ts
const defaultOptions: UseMediaRecorderOptions = {
  constraints: { audio: false, video: false },
  mediaRecorderOptions: {},
  onStart: () => {
  },
  onPause: () => {
  },
  onResume: () => {
  },
  onStop: () => {
  },
  onError: () => {
  },
}

constraints ​

Type: constraints?: MaybeRef<MediaStreamConstraints>

The constraints object is passed to the navigator.mediaDevices.getUserMedia method. It is used to specify the media types and settings for the stream.

WARNING

By default, the constraints object is {audio: false, video: false}. You should set at least one of the properties to true to get a stream/data.

mediaRecorderOptions ​

Type: mediaRecorderOptions?: MaybeRef<MediaRecorderOptions>

See MDN

ts
interface MediaRecorderOptions {
  audioBitsPerSecond?: number
  bitsPerSecond?: number
  mimeType?: string
  videoBitsPerSecond?: number
}

Events ​

  • onStart: Emitted when the MediaRecorder starts recording.
  • onPause: Emitted when the MediaRecorder pauses recording.
  • onResume: Emitted when the MediaRecorder resumes recording.
  • onStop: Emitted when the MediaRecorder stops recording.
  • onError: Emitted when an error occurs.

values ​

data ​

  • Type: Ref<Blob[]>
  • Initial value: ref([])

An array of Blobs that are created by the MediaRecorder. The Blobs are created when the MediaRecorder is stopped. Or when the timeslice is set and the timeslice is reached.

stream ​

  • Type: ShallowRef<MediaStream | undefined>
  • Initial value: shallowRef()

state ​

  • Type: ShallowRef<MediaRecorderState | undefined>
  • Initial value: shallowRef()

The current state of the MediaRecorder. The state can be one of the following:

  • undefined - The MediaRecorder is not initialized.
  • 'inactive' - The MediaRecorder is not recording.
  • 'recording' - The MediaRecorder is recording data.
  • 'paused' - The MediaRecorder is paused.

mimeType ​

  • Type: ComputedRef<string | undefined>
  • Initial value: computed(()=>{})

The mimeType of the MediaRecorder. The mimeType is set when the MediaRecorder is initialized and the stream is available. You can also set the mimeType manually via mediaRecorderOptions.mimeType.

WARNING

If you set the mimeType manually (not recommended), make sure that the mimeType is supported by the browser. You can check if the mimeType is supported via isMimeTypeSupported.

isMimeTypeSupported ​

  • Type: ComputedRef<boolean>

If you set the mimeType manually, you can check if the mimeType is supported by the browser via this computed ref.

isSupported ​

  • Type: ComputedRef<boolean>

If the MediaRecorder API (and the selected MIME type) is supported by the browser.

mediaRecorder ​

  • Type: ComputedRef<MediaRecorder | undefined>
  • Initial value: computed(()=>{})

The MediaRecorder instance. The MediaRecorder is created when the stream is available.

methods ​

start(timeslice: number | undefined): Promise<void> ​

Creates the stream and the MediaRecorder instance. The stream is created with the constraints object. The MediaRecorder is created with the stream and the mediaRecorderOptions object.

pause(): void ​

resume(): void ​

stop(): void ​