fix(recording): improve recording capture quality and align preview button loading state

ts_web/services/recorder.service.ts

@@ -150,7 +150,8 @@ export class RecorderService {
       // Get video stream based on mode
       const displayMediaOptions: DisplayMediaStreamOptions = {
         video: {
-          displaySurface: options.mode === 'viewport' ? 'browser' : 'monitor'
+          displaySurface: options.mode === 'viewport' ? 'browser' : 'monitor',
+          frameRate: { ideal: 60 },
         } as MediaTrackConstraints,
         audio: false
       };
@@ -207,7 +208,10 @@ export class RecorderService {
         ? 'video/webm;codecs=vp9'
         : 'video/webm';
 
-      this.mediaRecorder = new MediaRecorder(combinedStream, { mimeType });
+      this.mediaRecorder = new MediaRecorder(combinedStream, {
+        mimeType,
+        videoBitsPerSecond: 8_000_000, // 8 Mbps for smooth, high-quality capture
+      });
       this.recordedChunks = [];
 
       this.mediaRecorder.ondataavailable = (e) => {