// Voice and video recording functionality let mediaRecorder; let recordedChunks = []; let isRecording = false; let recordingType = null; // 'voice' or 'video' // Toggle voice recording async function toggleVoiceRecording() { if (isRecording) { stopRecording(); } else { await startVoiceRecording(); } } // Toggle video recording async function toggleVideoRecording() { if (isRecording) { stopRecording(); } else { await startVideoRecording(); } } // Start voice recording async function startVoiceRecording() { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); mediaRecorder = new MediaRecorder(stream); recordedChunks = []; mediaRecorder.ondataavailable = (event) => { if (event.data.size > 0) { recordedChunks.push(event.data); } }; mediaRecorder.onstop = async () => { const blob = new Blob(recordedChunks, { type: 'audio/webm' }); // Create a temporary file object const file = new File([blob], `voice_message_${Date.now()}.webm`, { type: 'audio/webm' }); // Send the voice message await sendFileMessage(file); // Stop the tracks stream.getTracks().forEach(track => track.stop()); }; mediaRecorder.start(); isRecording = true; recordingType = 'voice'; // Update UI to show recording state updateRecordingUI(true); console.log('Voice recording started'); } catch (error) { console.error('Error starting voice recording:', error); showAlert('Microphone access denied. Please allow microphone access to record voice messages.', 'error'); } } // Start video recording async function startVideoRecording() { try { const stream = await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: 640 }, height: { ideal: 480 } }, audio: true }); mediaRecorder = new MediaRecorder(stream); recordedChunks = []; mediaRecorder.ondataavailable = (event) => { if (event.data.size > 0) { recordedChunks.push(event.data); } }; mediaRecorder.onstop = async () => { const blob = new Blob(recordedChunks, { type: 'video/webm' }); // Create a temporary file object const file = new File([blob], `video_message_${Date.now()}.webm`, { type: 'video/webm' }); // Send the video message await sendFileMessage(file); // Stop the tracks stream.getTracks().forEach(track => track.stop()); }; mediaRecorder.start(); isRecording = true; recordingType = 'video'; // Update UI to show recording state updateRecordingUI(true); console.log('Video recording started'); } catch (error) { console.error('Error starting video recording:', error); showAlert('Camera access denied. Please allow camera and microphone access to record video messages.', 'error'); } } // Stop recording function stopRecording() { if (mediaRecorder && isRecording) { mediaRecorder.stop(); isRecording = false; recordingType = null; // Update UI to show stopped state updateRecordingUI(false); console.log('Recording stopped'); } } // Update UI based on recording state function updateRecordingUI(isRecording) { const voiceBtn = document.getElementById('recordVoiceBtn'); const videoBtn = document.getElementById('recordVideoBtn'); if (isRecording) { // Add recording class to the active button if (recordingType === 'voice') { voiceBtn.classList.add('recording'); voiceBtn.textContent = '●'; // Solid circle to indicate recording } else if (recordingType === 'video') { videoBtn.classList.add('recording'); videoBtn.textContent = '●'; // Solid circle to indicate recording } } else { // Remove recording class from both buttons voiceBtn.classList.remove('recording'); videoBtn.classList.remove('recording'); // Reset button texts voiceBtn.textContent = '●'; videoBtn.textContent = '◉'; } } // Handle window unload to clean up resources window.addEventListener('beforeunload', () => { if (isRecording) { stopRecording(); } }); // Also stop recording when leaving the page window.addEventListener('pagehide', () => { if (isRecording) { stopRecording(); } });