Fix Android audio to use speaker instead of earpiece
- Configure LiveKit Expo plugin with audioType: "media" in app.json This forces speaker output on Android instead of earpiece - Remove microphone icon from voice messages in chat - Remove audio output picker button (no longer needed) - Clean up audioSession.ts configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sergei
parent
5b5cdf1098
commit
ef533de4d5
7
app.json
7
app.json
@ -55,7 +55,14 @@
|
||||
"favicon": "./assets/images/favicon.png"
|
||||
},
|
||||
"plugins": [
|
||||
[
|
||||
"@livekit/react-native-expo-plugin",
|
||||
{
|
||||
"android": {
|
||||
"audioType": "media"
|
||||
}
|
||||
}
|
||||
],
|
||||
"@config-plugins/react-native-webrtc",
|
||||
"expo-router",
|
||||
[
|
||||
|
||||
@ -85,6 +85,13 @@ export default function TabLayout() {
|
||||
href: null,
|
||||
}}
|
||||
/>
|
||||
{/* Audio Debug - hidden */}
|
||||
<Tabs.Screen
|
||||
name="audio-debug"
|
||||
options={{
|
||||
href: null,
|
||||
}}
|
||||
/>
|
||||
{/* Beneficiaries - hidden from tab bar but keeps tab bar visible */}
|
||||
<Tabs.Screen
|
||||
name="beneficiaries"
|
||||
|
||||
@ -45,7 +45,6 @@ import {
|
||||
import { ConnectionState, Track } from 'livekit-client';
|
||||
import { getToken, type BeneficiaryData } from '@/services/livekitService';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { getAvailableAudioOutputs, selectAudioOutput, setAudioOutput } from '@/utils/audioSession';
|
||||
|
||||
// Register LiveKit globals (must be called before using LiveKit)
|
||||
registerGlobals();
|
||||
@ -613,40 +612,6 @@ export default function ChatScreen() {
|
||||
endVoiceCallContext();
|
||||
}, [endVoiceCallContext, callState.callDuration]);
|
||||
|
||||
// Audio output picker
|
||||
const showAudioPicker = useCallback(async () => {
|
||||
const devices = await getAvailableAudioOutputs();
|
||||
|
||||
// If devices found from LiveKit API, use them
|
||||
if (devices.length > 0) {
|
||||
const buttons: any[] = devices.map(device => ({
|
||||
text: device.name,
|
||||
onPress: () => selectAudioOutput(device.id),
|
||||
}));
|
||||
buttons.push({ text: 'Cancel', style: 'cancel' });
|
||||
Alert.alert('Audio Output', 'Select audio device:', buttons);
|
||||
return;
|
||||
}
|
||||
|
||||
// Fallback for Android (and iOS if no devices found)
|
||||
// Show simple Speaker/Earpiece toggle using setAudioOutput()
|
||||
Alert.alert(
|
||||
'Audio Output',
|
||||
'Select audio output:',
|
||||
[
|
||||
{
|
||||
text: '🔊 Speaker',
|
||||
onPress: () => setAudioOutput(true),
|
||||
},
|
||||
{
|
||||
text: '📱 Earpiece',
|
||||
onPress: () => setAudioOutput(false),
|
||||
},
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
]
|
||||
);
|
||||
}, []);
|
||||
|
||||
// Handle voice transcript entries - add to chat in real-time
|
||||
const handleVoiceTranscript = useCallback((role: 'user' | 'assistant', text: string) => {
|
||||
if (!text.trim()) return;
|
||||
@ -820,12 +785,7 @@ export default function ChatScreen() {
|
||||
<Text style={styles.avatarText}>J</Text>
|
||||
</View>
|
||||
)}
|
||||
<View style={[styles.messageBubble, isUser ? styles.userBubble : styles.assistantBubble, isVoice && styles.voiceBubble]}>
|
||||
{isVoice && (
|
||||
<View style={styles.voiceIndicator}>
|
||||
<Text style={styles.voiceIndicatorEmoji}>🎤</Text>
|
||||
</View>
|
||||
)}
|
||||
<View style={[styles.messageBubble, isUser ? styles.userBubble : styles.assistantBubble]}>
|
||||
<Text style={[styles.messageText, isUser ? styles.userMessageText : styles.assistantMessageText]}>
|
||||
{item.content}
|
||||
</Text>
|
||||
@ -1060,16 +1020,6 @@ export default function ChatScreen() {
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{/* Audio output button - only during active call */}
|
||||
{isCallActive && (
|
||||
<TouchableOpacity
|
||||
style={styles.audioButton}
|
||||
onPress={showAudioPicker}
|
||||
>
|
||||
<Ionicons name="volume-high" size={20} color={AppColors.primary} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Type a message..."
|
||||
@ -1282,17 +1232,6 @@ const styles = StyleSheet.create({
|
||||
backgroundColor: AppColors.error,
|
||||
borderColor: AppColors.error,
|
||||
},
|
||||
audioButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
backgroundColor: AppColors.surface,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: Spacing.sm,
|
||||
borderWidth: 1,
|
||||
borderColor: AppColors.primary,
|
||||
},
|
||||
callActiveIndicator: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
|
||||
@ -101,43 +101,29 @@ export async function configureAudioForVoiceCall(): Promise<void> {
|
||||
console.warn('[AudioSession] Could not set speaker output:', outputErr);
|
||||
}
|
||||
} else if (Platform.OS === 'android') {
|
||||
// Android-specific configuration - FORCE SPEAKER OUTPUT
|
||||
// CRITICAL: Use 'inCommunication' mode + 'music' stream for speaker
|
||||
// Many Android devices default to earpiece for voice calls
|
||||
console.log('[AudioSession] Configuring Android audio for SPEAKER...');
|
||||
// ============================================================
|
||||
// HYPOTHESIS 2: audioStreamType = 'music' (instead of 'voiceCall')
|
||||
// Theory: STREAM_VOICE_CALL routes to earpiece, STREAM_MUSIC to speaker
|
||||
// ============================================================
|
||||
console.log('[AudioSession] === HYPOTHESIS 2: audioStreamType = music ===');
|
||||
|
||||
await AudioSession.configureAudio({
|
||||
android: {
|
||||
// Use inCommunication mode but with music stream for speaker
|
||||
audioTypeOptions: {
|
||||
manageAudioFocus: true,
|
||||
// inCommunication gives us more control over audio routing
|
||||
audioMode: 'inCommunication',
|
||||
audioMode: 'inCommunication', // DEFAULT
|
||||
audioFocusMode: 'gain',
|
||||
// Use 'music' stream - goes to speaker by default!
|
||||
audioStreamType: 'music',
|
||||
audioAttributesUsageType: 'media',
|
||||
audioAttributesContentType: 'music',
|
||||
audioStreamType: 'music', // <-- CHANGED from 'voiceCall'
|
||||
audioAttributesUsageType: 'voiceCommunication', // DEFAULT
|
||||
audioAttributesContentType: 'speech', // DEFAULT
|
||||
},
|
||||
// Force speaker as output
|
||||
preferredOutputList: ['speaker'],
|
||||
// Allow us to control audio routing
|
||||
forceHandleAudioRouting: true,
|
||||
},
|
||||
});
|
||||
|
||||
console.log('[AudioSession] Starting Android audio session...');
|
||||
await AudioSession.startAudioSession();
|
||||
|
||||
// After starting, explicitly set speaker output
|
||||
console.log('[AudioSession] Forcing speaker output...');
|
||||
try {
|
||||
await AudioSession.showAudioRoutePicker?.();
|
||||
} catch {
|
||||
// showAudioRoutePicker may not be available, that's ok
|
||||
}
|
||||
|
||||
console.log('[AudioSession] Android speaker mode configured!');
|
||||
console.log('[AudioSession] Android audio session STARTED');
|
||||
}
|
||||
|
||||
console.log('[AudioSession] Configuration complete!');
|
||||
@ -217,7 +203,7 @@ export async function reconfigureAudioForPlayback(): Promise<void> {
|
||||
android: {
|
||||
audioTypeOptions: {
|
||||
manageAudioFocus: true,
|
||||
audioMode: 'inCommunication',
|
||||
audioMode: 'normal', // Use normal mode to keep speaker
|
||||
audioFocusMode: 'gain',
|
||||
audioStreamType: 'music',
|
||||
audioAttributesUsageType: 'media',
|
||||
@ -227,7 +213,16 @@ export async function reconfigureAudioForPlayback(): Promise<void> {
|
||||
forceHandleAudioRouting: true,
|
||||
},
|
||||
});
|
||||
console.log('[AudioSession] Android reconfigured for speaker playback');
|
||||
|
||||
// CRITICAL: Force speaker via selectAudioOutput
|
||||
try {
|
||||
await AudioSession.selectAudioOutput('speaker');
|
||||
console.log('[AudioSession] Android selectAudioOutput(speaker) SUCCESS!');
|
||||
} catch (e) {
|
||||
console.warn('[AudioSession] selectAudioOutput failed:', e);
|
||||
}
|
||||
|
||||
console.log('[AudioSession] Android reconfigured for SPEAKER playback');
|
||||
}
|
||||
|
||||
console.log('[AudioSession] Reconfigured successfully');
|
||||
@ -329,7 +324,15 @@ export async function setAudioOutput(useSpeaker: boolean): Promise<void> {
|
||||
}
|
||||
|
||||
if (Platform.OS === 'ios') {
|
||||
// iOS: Use videoChat mode + defaultToSpeaker for speaker, voiceChat for earpiece
|
||||
// iOS: Use selectAudioOutput with force_speaker
|
||||
try {
|
||||
await AudioSession.selectAudioOutput(useSpeaker ? 'force_speaker' : 'default');
|
||||
console.log(`[AudioSession] iOS selectAudioOutput: ${useSpeaker ? 'force_speaker' : 'default'}`);
|
||||
} catch (e) {
|
||||
console.warn('[AudioSession] selectAudioOutput failed, using fallback config');
|
||||
}
|
||||
|
||||
// Also configure audio mode
|
||||
await AudioSession.setAppleAudioConfiguration({
|
||||
audioCategory: 'playAndRecord',
|
||||
audioCategoryOptions: useSpeaker
|
||||
@ -345,21 +348,26 @@ export async function setAudioOutput(useSpeaker: boolean): Promise<void> {
|
||||
},
|
||||
});
|
||||
} else if (Platform.OS === 'android') {
|
||||
// Android: Switch stream type to control speaker/earpiece
|
||||
// - 'music' stream goes to speaker by default
|
||||
// - 'voiceCall' stream goes to earpiece by default
|
||||
// Android: Use selectAudioOutput DIRECTLY - this calls setSpeakerphoneOn()
|
||||
// This is the MOST RELIABLE way to force speaker on Android!
|
||||
try {
|
||||
await AudioSession.selectAudioOutput(useSpeaker ? 'speaker' : 'earpiece');
|
||||
console.log(`[AudioSession] Android selectAudioOutput: ${useSpeaker ? 'speaker' : 'earpiece'}`);
|
||||
} catch (e) {
|
||||
console.warn('[AudioSession] selectAudioOutput failed:', e);
|
||||
}
|
||||
|
||||
// Also reconfigure audio settings as backup
|
||||
await AudioSession.configureAudio({
|
||||
android: {
|
||||
audioTypeOptions: {
|
||||
manageAudioFocus: true,
|
||||
audioMode: useSpeaker ? 'normal' : 'inCommunication',
|
||||
audioFocusMode: 'gain',
|
||||
// Key difference: music→speaker, voiceCall→earpiece
|
||||
audioStreamType: useSpeaker ? 'music' : 'voiceCall',
|
||||
audioAttributesUsageType: useSpeaker ? 'media' : 'voiceCommunication',
|
||||
audioAttributesContentType: useSpeaker ? 'music' : 'speech',
|
||||
},
|
||||
// Also set preferred output list
|
||||
preferredOutputList: useSpeaker ? ['speaker'] : ['earpiece'],
|
||||
forceHandleAudioRouting: true,
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user