Fork of from frontend fork from v 16latest29 june

I'll add screen/tab recording functionality to the new meeting page with two recording options: normal microphone recording and meeting recording with screen/tab sharing.

Added Screen/Tab Recording Functionality

I've implemented a comprehensive screen recording solution with two recording options:

🎯 Key Features:

1. Two Recording Types:

📱 Microphone Recording: Traditional audio recording from microphone only
💻 Meeting Recording: Combines microphone + screen/tab audio for online meetings

2. Enhanced Audio Recorder:

✅ Screen Sharing Integration: Uses getDisplayMedia() API for screen/tab capture
✅ Audio Mixing: Combines microphone and screen audio streams using Web Audio API
✅ Fallback Handling: Falls back to microphone-only if screen sharing is denied
✅ Stream Management: Proper cleanup of all audio streams

3. Improved UI:

✅ Recording Type Selection: Radio buttons with clear descriptions
✅ Visual Indicators: Different icons and colors for each recording type
✅ Permission Guidance: Helpful information about screen sharing requirements
✅ Real-time Status: Shows current recording type and status

4. Browser Permissions:

When "Meeting Recording" is selected:

Microphone Permission: Requests access to microphone
Screen Share Permission: Browser shows screen/tab sharing dialog
Audio Capture: Captures both microphone and tab/screen audio
Combined Stream: Mixes both audio sources into single recording

🔧 Technical Implementation:

Screen Sharing Flow:

// 1. Get microphone stream
const micStream = await navigator.mediaDevices.getUserMedia({ audio: true })

// 2. Get screen/tab stream with audio
const screenStream = await navigator.mediaDevices.getDisplayMedia({ 
  video: true, 
  audio: true 
})

// 3. Mix audio streams using Web Audio API
const audioContext = new AudioContext()
const destination = audioContext.createMediaStreamDestination()
// Connect both sources to destination

User Experience:

Clear Options: Visual distinction between recording types
Permission Guidance: Explains what permissions are needed
Fallback Support: Continues with microphone if screen sharing fails
Status Indicators: Shows current recording mode and progress

🎉 Perfect for:

Online Meetings: Zoom, Teams, Google Meet recordings
Webinars: Capture presenter audio and your questions
Training Sessions: Record both instructor and your notes
Client Calls: Professional meeting recordings with full audio

The system now supports both traditional microphone recording and advanced meeting recording with screen/tab audio capture! 🚀