feat: add onStart, onStop, onPause and onResume callbacks

Author: OrbisK

playgrounds/nuxt/app/components/recorder-demo.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
 const audio = ref()
 const video = ref()
+
+const onStop = ()=>{
+  console.log("onstop")
+}
 const { start, stop, pause, resume, data, state, isMimeTypeSupported, isSupported, mimeType } = useMediaRecorder({
   constraints: {
     audio: true,
     video: false,
   },
+  onStop,
 })
 function handleStop() {
   console.log('stop')

src/useMediaRecorder.ts

@@ -15,11 +15,31 @@ interface UseMediaRecorderOptions extends ConfigurableNavigator {
    * Options to pass to the MediaRecorder constructor.
    */
   mediaRecorderOptions?: MaybeRef<MediaRecorderOptions>
+  /**
+   * Callback when recording starts.
+   */
+  onStart?: () => any
+  /**
+   * Callback when recording pauses.
+   */
+  onPause?: () => any
+  /**
+   * Callback when recording resumes.
+   */
+  onResume?: () => any
+  /**
+   * Callback when recording stops.
+   */
+  onStop?: () => any
 }
 
 const defaultOptions: UseMediaRecorderOptions = {
   constraints: { audio: false, video: false },
-  mediaRecorderOptions: {}
+  mediaRecorderOptions: {},
+  onStart: () => {},
+  onPause: ()=> {},
+  onResume: ()=> {},
+  onStop: ()=> {},
 }
 
 export function useMediaRecorder(options: UseMediaRecorderOptions = {}) {
@@ -43,10 +63,6 @@ export function useMediaRecorder(options: UseMediaRecorderOptions = {}) {
     return mediaRecorder.value?.mimeType
   })
 
-  const updateStates = () => {
-    state.trigger()
-  }
-
   const {
     mediaRecorderOptions,
     constraints
@@ -90,12 +106,30 @@ export function useMediaRecorder(options: UseMediaRecorderOptions = {}) {
     newMediaRecorder.onstop = () => {
       stream.value?.getTracks().forEach(t => t.stop())
       result.value = data.value
-      updateStates()
+      state.trigger()
+      mimeType.trigger()
+      options.onStop?.()
+    }
+    newMediaRecorder.onpause = ()=>{
+      state.trigger()
+      mimeType.trigger()
+      options.onPause?.()
+    }
+    newMediaRecorder.onresume = ()=>{
+      state.trigger()
+      mimeType.trigger()
+      options.onResume?.()
+    }
+    newMediaRecorder.onstart = ()=>{
+      state.trigger()
+      mimeType.trigger()
+      options.onStart?.()
+    }
+    newMediaRecorder.onerror = ()=>{
+      state.trigger()
+      mimeType.trigger()
+      // TODO: error handling
     }
-    newMediaRecorder.onpause = updateStates
-    newMediaRecorder.onresume = updateStates
-    newMediaRecorder.onstart = updateStates
-    newMediaRecorder.onerror = updateStates
   }, { immediate: true })
 
   tryOnScopeDispose(() => {

tests/index.spec.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { useMediaRecorder } from '../src'
 
 describe('useMediaRecorder', () => {
@@ -149,4 +149,31 @@ describe('useMediaRecorder', () => {
     await stop()
     expect(data.value.length).toBeGreaterThan(0)
   })
+
+  it('should call all lifecycle hooks', async () => {
+    const onStop = vi.fn()
+    const onStart = vi.fn()
+    const onPause = vi.fn()
+    const onResume = vi.fn()
+
+    const {
+      start,
+      pause,
+      resume,
+      stop,
+    } = useMediaRecorder({ constraints: { audio: true }, onStop, onStart, onPause, onResume })
+
+    await start()
+    pause()
+    await new Promise(resolve => setTimeout(resolve, 10))
+    resume()
+    stop()
+
+    await vi.waitFor( () => {
+      expect(onStart).toHaveBeenCalledTimes(1)
+      expect(onPause).toHaveBeenCalledTimes(1)
+      expect(onResume).toHaveBeenCalledTimes(1)
+      expect(onStop).toHaveBeenCalledTimes(1)
+    })
+  })
 })