Merge pull request #26 from braden-w:feature/sid-322-feat-attempt-lig…

…hter-weight-recording-mechanism

feat: lighter recording mechanism (use polyfill, not RecordRTC)

package.json

@@ -39,6 +39,7 @@
 	"dependencies": {
 		"@sveltejs/adapter-cloudflare": "^2.2.0",
 		"@tauri-apps/api": "^1.2.0",
+		"audio-recorder-polyfill": "^0.4.1",
 		"recordrtc": "^5.6.2",
 		"svelte-french-toast": "1.0.4-beta.0"
 	}

src/lib/recorder/mediaRecorder.ts

@@ -1,16 +1,12 @@
-/**
- * This implementation uses the native mediaRecorder api.
- * Unfortunately, it didn't reliably work with Safari or Tauri.
- *
- * For the main implementation, see {@link ./recordRtcRecorder.ts}.
- */
+import AudioRecorder from 'audio-recorder-polyfill';
 
 let mediaRecorder: MediaRecorder | null = null;
 let recordedChunks: Blob[] = [];
 
 export async function startRecording(): Promise<void> {
 	const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-	mediaRecorder = new MediaRecorder(stream);
+	mediaRecorder = new AudioRecorder(stream);
+	if (!mediaRecorder) throw new Error('MediaRecorder is not initialized.');
 	mediaRecorder.addEventListener('dataavailable', (event: BlobEvent) => {
 		recordedChunks.push(event.data);
 	});

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { startRecording, stopRecording } from '$lib/recorder/mediaRecorder';
 	import { apiKey } from '$lib/stores/apiKey';
 	import { writeText } from '$lib/system-apis/clipboard';
 	import { registerShortcut, unregisterAllShortcuts } from '$lib/system-apis/shorcuts';
@@ -22,10 +23,6 @@
 			return;
 		}
 
-		const { startRecording, stopRecording } = /Chrome/.test(navigator.userAgent)
-			? await import('$lib/recorder/mediaRecorder')
-			: await import('$lib/recorder/recordRtcRecorder');
-
 		if (!isRecording) {
 			await setAlwaysOnTop(true);
 			await startRecording();