@siteed/expo-audio-stream 1.7.2 → 1.8.0

package/src/WebRecorder.web.ts

@@ -1,7 +1,7 @@
 // src/WebRecorder.ts
 
 import { AudioAnalysis } from './AudioAnalysis/AudioAnalysis.types'
-import { ConsoleLike, RecordingConfig } from './ExpoAudioStream.types'
+import { ConsoleLike, RecordingConfig, WebRecordingOptions } from './ExpoAudioStream.types'
 import {
     EmitAudioAnalysisFunction,
     EmitAudioEventFunction,
@@ -53,6 +53,11 @@ export class WebRecorder {
     private audioAnalysisData: AudioAnalysis // Keep updating the full audio analysis data with latest events
     private packetCount: number = 0
     private logger?: ConsoleLike
+    private compressedMediaRecorder: MediaRecorder | null = null
+    private compressedChunks: Blob[] = []
+    private compressedSize: number = 0
+    private pendingCompressedChunk: Blob | null = null
+    private audioChunks: Float32Array[] = []
 
     constructor({
         audioContext,
@@ -121,6 +126,11 @@ export class WebRecorder {
         if (recordingConfig.enableProcessing) {
             this.initFeatureExtractorWorker()
         }
+
+        // Initialize compressed recording if enabled
+        if (recordingConfig.compression?.enabled) {
+            this.initializeCompressedRecorder()
+        }
     }
 
     async init() {
@@ -155,18 +165,8 @@ export class WebRecorder {
                     return
                 }
 
-                // Handle the audio blob (e.g., send it to the server or process it further)
-                this.logger?.debug(
-                    `Received audio blob from processor len:${pcmBufferFloat?.length}`,
-                    event
-                )
-                // Concatenate the incoming Float32Array to the existing buffer
-                const newBuffer = new Float32Array(
-                    this.audioBufferSize + pcmBufferFloat.length
-                )
-                newBuffer.set(this.audioBuffer, 0)
-                newBuffer.set(pcmBufferFloat, this.audioBufferSize)
-                this.audioBuffer = newBuffer
+                // Store chunks instead of concatenating
+                this.audioChunks.push(pcmBufferFloat)
                 this.audioBufferSize += pcmBufferFloat.length
 
                 const sampleRate =
@@ -197,9 +197,24 @@ export class WebRecorder {
                 // Track the number of packets
                 this.packetCount += 1
 
+                // Prepare compression data if available
+                let compressionData
+                if (this.pendingCompressedChunk) {
+                    compressionData = {
+                        data: this.pendingCompressedChunk,
+                        size: this.pendingCompressedChunk.size,
+                        totalSize: this.compressedSize,
+                        mimeType: 'audio/webm',
+                        format: 'opus',
+                        bitrate: this.config.compression?.bitrate ?? 128000,
+                    }
+                    this.pendingCompressedChunk = null
+                }
+
                 this.emitAudioEventCallback({
-                    data,
+                    data: pcmBufferFloat,
                     position: this.position,
+                    compression: compressionData,
                 })
                 this.position += duration // Update position
 
@@ -331,80 +346,175 @@ export class WebRecorder {
         this.source.connect(this.audioWorkletNode)
         this.audioWorkletNode.connect(this.audioContext.destination)
         this.packetCount = 0
+
+        if (this.compressedMediaRecorder) {
+            this.compressedMediaRecorder.start(this.config.interval ?? 1000)
+        }
     }
 
-    stop(): Promise<Float32Array> {
+    async stop(options?: WebRecordingOptions): Promise<{ pcmData: Float32Array; compressedBlob?: Blob }> {
         return new Promise((resolve, reject) => {
-            try {
-                if (this.audioWorkletNode) {
-                    // this.source.disconnect(this.audioWorkletNode);
-                    // this.audioWorkletNode.disconnect(this.audioContext.destination);
-                    this.audioWorkletNode.port.postMessage({ command: 'stop' })
+            let isCleanupDone = false
 
-                    // Set a timeout to reject the promise if no message is received within 5 seconds
-                    const timeout = setTimeout(() => {
-                        this.audioWorkletNode.port.removeEventListener(
-                            'message',
-                            onMessage
-                        )
-                        reject(
-                            new Error(
-                                "Timeout error, audioWorkletNode didn't complete."
-                            )
-                        )
-                    }, 5000)
+            const cleanup = () => {
+                if (isCleanupDone) return
+                isCleanupDone = true
+
+                if (this.audioContext) {
+                    this.audioContext.close()
+                }
+                if (this.audioWorkletNode) {
+                    this.audioWorkletNode.disconnect()
+                }
+                if (this.source) {
+                    this.source.disconnect()
+                }
 
-                    // Listen for the recordedData message to confirm stopping
-                    const onMessage = async (event: AudioWorkletEvent) => {
-                        const command = event.data.command
-                        if (command === 'recordedData') {
-                            clearTimeout(timeout) // Clear the timeout
+                this.stopMediaStreamTracks()
+            }
+            try {
+                this.logger?.debug(`Stopping WebRecorder ${this.audioChunks.length} chunks - this.compressedChunks.length=${this.compressedChunks.length}`)
+
+                // If skipFinalConsolidation is true and we have compressed data, return early
+                if (options?.skipFinalConsolidation && this.compressedMediaRecorder) {
+                    this.compressedMediaRecorder.onstop = () => {
+                        const compressedBlob = new Blob(this.compressedChunks, {
+                            type: 'audio/webm;codecs=opus',
+                        })
+                        cleanup()
+                        // Return the last chunk as pcmData to maintain interface compatibility
+                        resolve({
+                            pcmData: this.audioChunks[this.audioChunks.length - 1] || new Float32Array(),
+                            compressedBlob,
+                        })
+                    }
+                    this.compressedMediaRecorder.stop()
+                    return
+                }
 
-                            const rawPCMDataFull =
-                                event.data.recordedData?.slice(0)
+                // Handle compressed recording first
+                if (this.compressedMediaRecorder) {
+                    this.compressedMediaRecorder.onstop = () => {
+                        const compressedBlob = new Blob(this.compressedChunks, {
+                            type: 'audio/webm;codecs=opus',
+                        })
 
-                            if (!rawPCMDataFull) {
-                                reject(new Error('Failed to get recorded data'))
-                                return
-                            }
+                        // Process chunks in batches
+                        requestAnimationFrame(() => {
+                            const combinedBuffer = new Float32Array(this.audioBufferSize)
+                            let offset = 0
+                            let chunkIndex = 0
+                            const CHUNKS_PER_BATCH = 10 // Process 5 seconds worth of chunks at a time (10 * 500ms = 5s)
 
-                            // Compute duration of the recorded data
-                            const duration =
-                                rawPCMDataFull.byteLength /
-                                (this.audioContext.sampleRate *
-                                    (this.exportBitDepth /
-                                        this.numberOfChannels))
-                            this.logger?.debug(
-                                `Received recorded data -- Duration: ${duration} vs ${rawPCMDataFull.byteLength / this.audioContext.sampleRate} seconds`
-                            )
                             this.logger?.debug(
-                                `recordedData.length=${rawPCMDataFull.byteLength} vs transmittedData.length=${this.audioBufferSize}`
+                                `Processing ${this.audioChunks.length} chunks in batches of ${CHUNKS_PER_BATCH}`
                             )
 
-                            // Remove the event listener after receiving the final data
-                            this.audioWorkletNode.port.removeEventListener(
+                            const processNextBatch = () => {
+                                const endIndex = Math.min(chunkIndex + CHUNKS_PER_BATCH, this.audioChunks.length)
+                                
+                                // Process a batch of chunks
+                                for (let i = chunkIndex; i < endIndex; i++) {
+                                    const chunk = this.audioChunks[i]
+                                    combinedBuffer.set(chunk, offset)
+                                    offset += chunk.length
+                                }
+
+                                chunkIndex = endIndex
+
+                                if (chunkIndex < this.audioChunks.length) {
+                                    // Process next batch in next frame
+                                    requestAnimationFrame(processNextBatch)
+                                } else {
+                                    // All chunks processed
+                                    this.audioBuffer = combinedBuffer
+                                    queueMicrotask(() => {
+                                        cleanup()
+                                        resolve({
+                                            pcmData: this.audioBuffer,
+                                            compressedBlob,
+                                        })
+                                    })
+                                }
+                            }
+
+                            processNextBatch()
+                        })
+                    }
+                    this.compressedMediaRecorder.stop()
+                }
+
+                // Handle audio worklet data
+                if (this.audioWorkletNode) {
+                    const onMessage = (event: AudioWorkletEvent) => {
+                        if (event.data.command === 'recordedData') {
+                            this.audioWorkletNode?.port.removeEventListener(
                                 'message',
                                 onMessage
                             )
 
-                            const convertedPCM = await convertPCMToFloat32({
-                                buffer: rawPCMDataFull.buffer,
-                                skipWavHeader: true,
-                                bitDepth: this.exportBitDepth,
+                            queueMicrotask(async () => {
+                                try {
+                                    const rawPCMDataFull =
+                                        event.data.recordedData?.slice(0)
+                                    if (!rawPCMDataFull) {
+                                        cleanup()
+                                        reject(
+                                            new Error(
+                                                'Failed to get recorded data'
+                                            )
+                                        )
+                                        return
+                                    }
+
+                                    // Convert PCM data if needed based on bit depth
+                                    if (this.exportBitDepth !== this.bitDepth) {
+                                        const convertedData =
+                                            await convertPCMToFloat32({
+                                                buffer: rawPCMDataFull.buffer,
+                                                bitDepth: this.exportBitDepth,
+                                                skipWavHeader: true,
+                                                logger: this.logger,
+                                            })
+                                        this.audioBuffer =
+                                            convertedData.pcmValues
+                                    } else {
+                                        this.audioBuffer = rawPCMDataFull
+                                    }
+
+                                    if (!this.compressedMediaRecorder) {
+                                        cleanup()
+                                        resolve({ pcmData: this.audioBuffer })
+                                    }
+                                } catch (error) {
+                                    cleanup()
+                                    reject(error)
+                                }
                             })
-
-                            resolve(convertedPCM.pcmValues) // Resolve the promise with the collected buffers
                         }
                     }
+
                     this.audioWorkletNode.port.addEventListener(
                         'message',
                         onMessage
                     )
-                }
+                    this.audioWorkletNode.port.postMessage({ command: 'stop' })
 
-                // Stop all media stream tracks to stop the browser recording
-                this.stopMediaStreamTracks()
+                    // Safety timeout
+                    setTimeout(() => {
+                        this.audioWorkletNode?.port.removeEventListener(
+                            'message',
+                            onMessage
+                        )
+                        cleanup()
+                        reject(new Error('Timeout while stopping recording'))
+                    }, 5000)
+                } else if (!this.compressedMediaRecorder) {
+                    cleanup()
+                    resolve({ pcmData: this.audioBuffer })
+                }
             } catch (error) {
+                cleanup()
                 reject(error)
             }
         })
@@ -414,6 +524,7 @@ export class WebRecorder {
         this.source.disconnect(this.audioWorkletNode) // Disconnect the source from the AudioWorkletNode
         this.audioWorkletNode.disconnect(this.audioContext.destination) // Disconnect the AudioWorkletNode from the destination
         this.audioWorkletNode.port.postMessage({ command: 'pause' })
+        this.compressedMediaRecorder?.pause()
     }
 
     stopMediaStreamTracks() {
@@ -484,5 +595,40 @@ export class WebRecorder {
         this.source.connect(this.audioWorkletNode)
         this.audioWorkletNode.connect(this.audioContext.destination)
         this.audioWorkletNode.port.postMessage({ command: 'resume' })
+        this.compressedMediaRecorder?.resume()
+    }
+
+    private initializeCompressedRecorder() {
+        try {
+            const mimeType = 'audio/webm;codecs=opus'
+            if (!MediaRecorder.isTypeSupported(mimeType)) {
+                this.logger?.warn(
+                    'Opus compression not supported in this browser'
+                )
+                return
+            }
+
+            this.compressedMediaRecorder = new MediaRecorder(
+                this.source.mediaStream,
+                {
+                    mimeType,
+                    audioBitsPerSecond:
+                        this.config.compression?.bitrate ?? 128000,
+                }
+            )
+
+            this.compressedMediaRecorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    this.compressedChunks.push(event.data)
+                    this.compressedSize += event.data.size
+                    this.pendingCompressedChunk = event.data
+                }
+            }
+        } catch (error) {
+            this.logger?.error(
+                'Failed to initialize compressed recorder:',
+                error
+            )
+        }
     }
 }

package/src/events.ts

@@ -7,6 +7,7 @@ import ExpoAudioStreamModule from './ExpoAudioStreamModule'
 
 const emitter = new LegacyEventEmitter(ExpoAudioStreamModule)
 
+// Internal event payload from native module
 export interface AudioEventPayload {
     encoded?: string
     buffer?: Float32Array
@@ -17,6 +18,12 @@ export interface AudioEventPayload {
     totalSize: number
     mimeType: string
     streamUuid: string
+    compression?: {
+        data?: string | Blob // Base64 (native) or Float32Array (web) encoded compressed data chunk
+        position: number
+        eventDataSize: number
+        totalSize: number
+    }
 }
 
 export function addAudioEventListener(

package/src/useAudioRecorder.tsx

@@ -7,9 +7,11 @@ import {
     AudioDataEvent,
     AudioRecording,
     AudioStreamStatus,
+    CompressionInfo,
     ConsoleLike,
     RecordingConfig,
     StartRecordingResult,
+    WebRecordingOptions,
 } from './ExpoAudioStream.types'
 import ExpoAudioStreamModule from './ExpoAudioStreamModule'
 import {
@@ -26,13 +28,14 @@ export interface UseAudioRecorderProps {
 
 export interface UseAudioRecorderState {
     startRecording: (_: RecordingConfig) => Promise<StartRecordingResult>
-    stopRecording: () => Promise<AudioRecording>
+    stopRecording: (options?: WebRecordingOptions) => Promise<AudioRecording>
     pauseRecording: () => Promise<void>
     resumeRecording: () => Promise<void>
     isRecording: boolean
     isPaused: boolean
-    durationMs: number // Duration of the recording
-    size: number // Size in bytes of the recorded audio
+    durationMs: number
+    size: number
+    compression?: CompressionInfo
     analysisData?: AudioAnalysis
 }
 
@@ -41,6 +44,7 @@ interface RecorderReducerState {
     isPaused: boolean
     durationMs: number
     size: number
+    compression?: CompressionInfo
     analysisData?: AudioAnalysis
 }
 
@@ -53,7 +57,14 @@ type RecorderAction =
               isPaused: boolean
           }
       }
-    | { type: 'UPDATE_STATUS'; payload: { durationMs: number; size: number } }
+    | {
+          type: 'UPDATE_STATUS'
+          payload: {
+              durationMs: number
+              size: number
+              compression?: CompressionInfo
+          }
+      }
     | { type: 'UPDATE_ANALYSIS'; payload: AudioAnalysis }
 
 const defaultAnalysis: AudioAnalysis = {
@@ -84,7 +95,8 @@ function audioRecorderReducer(
                 isPaused: false,
                 durationMs: 0,
                 size: 0,
-                analysisData: defaultAnalysis, // Reset analysis data
+                compression: undefined,
+                analysisData: defaultAnalysis,
             }
         case 'STOP':
             return { ...state, isRecording: false, isPaused: false }
@@ -98,12 +110,22 @@ function audioRecorderReducer(
                 isPaused: action.payload.isPaused,
                 isRecording: action.payload.isRecording,
             }
-        case 'UPDATE_STATUS':
-            return {
+        case 'UPDATE_STATUS': {
+            const newState = {
                 ...state,
                 durationMs: action.payload.durationMs,
                 size: action.payload.size,
+                compression: action.payload.compression
+                    ? {
+                          size: action.payload.compression.size,
+                          mimeType: action.payload.compression.mimeType,
+                          bitrate: action.payload.compression.bitrate,
+                          format: action.payload.compression.format,
+                      }
+                    : undefined,
             }
+            return newState
+        }
         case 'UPDATE_ANALYSIS':
             return {
                 ...state,
@@ -129,9 +151,12 @@ export function useAudioRecorder({
         isPaused: false,
         durationMs: 0,
         size: 0,
+        compression: undefined,
         analysisData: undefined,
     })
 
+    const startResultRef = useRef<StartRecordingResult | null>(null)
+
     const analysisListenerRef = useRef<EventSubscription | null>(null)
     // analysisRef is the current analysis data (last 10 seconds by default)
     const analysisRef = useRef<AudioAnalysis>({ ...defaultAnalysis })
@@ -261,6 +286,7 @@ export function useAudioRecorder({
                 encoded,
                 mimeType,
                 buffer,
+                compression,
             } = eventData
             logger?.debug(`[handleAudioEvent] Received audio event:`, {
                 fileUri,
@@ -271,6 +297,7 @@ export function useAudioRecorder({
                 lastEmittedSize,
                 streamUuid,
                 encodedLength: encoded?.length,
+                compression,
             })
             if (deltaSize === 0) {
                 // Ignore packet with no data
@@ -290,6 +317,21 @@ export function useAudioRecorder({
                         fileUri,
                         eventDataSize: deltaSize,
                         totalSize,
+                        compression:
+                            compression && startResultRef.current?.compression
+                                ? {
+                                      data: compression.data,
+                                      size: compression.totalSize,
+                                      mimeType:
+                                          startResultRef.current.compression
+                                              ?.mimeType,
+                                      bitrate:
+                                          startResultRef.current.compression
+                                              ?.bitrate,
+                                      format: startResultRef.current.compression
+                                          ?.format,
+                                  }
+                                : undefined,
                     })
                 } else if (buffer) {
                     // Coming from web
@@ -299,6 +341,21 @@ export function useAudioRecorder({
                         fileUri,
                         eventDataSize: deltaSize,
                         totalSize,
+                        compression:
+                            compression && startResultRef.current?.compression
+                                ? {
+                                      data: compression.data,
+                                      size: compression.totalSize,
+                                      mimeType:
+                                          startResultRef.current.compression
+                                              ?.mimeType,
+                                      bitrate:
+                                          startResultRef.current.compression
+                                              ?.bitrate,
+                                      format: startResultRef.current.compression
+                                          ?.format,
+                                  }
+                                : undefined,
                     }
                     onAudioStreamRef.current?.(webEvent)
                     logger?.debug(
@@ -317,7 +374,8 @@ export function useAudioRecorder({
         try {
             const status: AudioStreamStatus = ExpoAudioStream.status()
             logger?.debug(
-                `Status: paused: ${status.isPaused} durationMs: ${status.durationMs} size: ${status.size}`
+                `Status: paused: ${status.isPaused} durationMs: ${status.durationMs} size: ${status.size}`,
+                status.compression
             )
 
             // Check and update recording state
@@ -344,6 +402,7 @@ export function useAudioRecorder({
                     payload: {
                         durationMs: status.durationMs,
                         size: status.size,
+                        compression: status.compression,
                     },
                 })
             }
@@ -372,6 +431,8 @@ export function useAudioRecorder({
                 await ExpoAudioStream.startRecording(options)
             dispatch({ type: 'START' })
 
+            startResultRef.current = startResult
+
             if (enableProcessing) {
                 logger?.debug(`Enabling audio analysis listener`)
                 const listener = addAudioAnalysisListener(
@@ -466,6 +527,7 @@ export function useAudioRecorder({
         isRecording: state.isRecording,
         durationMs: state.durationMs,
         size: state.size,
+        compression: state.compression,
         analysisData: state.analysisData,
     }
 }