react-native-twilio-video-webrtc
react-native-twilio-video-webrtc copied to clipboard
Audio is not being received by another device connected to the room
Steps to reproduce
- Start the app and tap on "Connect"
Expected behaviour
That if I speak on the phone, it will be heard on the other device that's connected to the room (Already tested to work with another phone that has a native Twilio implementation, and connected to room PorteroVisor2, so the receiving device works fine)
Actual behaviour
I speak but nothing is heard on the other end.
Environment
- Node.js version: v20.18.0
- React Native version: 0.74.5
- React Native platform + platform version: Android 12 (emulator) or Android 6 (physical device)
react-native-twilio-video-webrtc
Version: ^3.2.1
Here is the full code I'm using. I've removed the video components to just have the bare minimum to publish only my audio. Bear in mind I also tested with the video code before removing it as well.
`import React, { useRef, useState } from "react"; import { Button, TextInput, View, Text, TouchableOpacity, Platform, PermissionsAndroid } from "react-native"; import { TwilioVideo, RoomErrorEventArgs, } from "react-native-twilio-video-webrtc"; import styles from "@/assets/styles/twilioStyles";
export default function TwilioTest() { const [isAudioEnabled, setIsAudioEnabled] = useState(true); const [status, setStatus] = useState("disconnected"); const [token, setToken] = useState("eyJ......"); const twilioRef = useRef<TwilioVideo>(null);
const _requestAudioPermission = () => { return PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, { title: "Need permission to access microphone", message: "To run this demo we need permission to access your microphone", buttonNegative: "Cancel", buttonPositive: "OK", } ); };
const _requestCameraPermission = () => { return PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA, { title: "Need permission to access camera", message: "To run this demo we need permission to access your camera", buttonNegative: "Cancel", buttonPositive: "OK", }); };
const _onConnectButtonPress = async () => { if (Platform.OS === "android") { await _requestAudioPermission(); await _requestCameraPermission(); }
twilioRef.current?.connect({ accessToken: token, roomName: 'PorteroVisor2', enableAudio: true });
setStatus("connecting");
twilioRef.current?.setLocalAudioEnabled(true).then((isEnabled) => {
setIsAudioEnabled(isEnabled);
});
};
const _onEndButtonPress = () => { twilioRef.current?.disconnect(); };
const _onMuteButtonPress = () => { twilioRef.current?.setLocalAudioEnabled(!isAudioEnabled) .then((isEnabled: boolean) => setIsAudioEnabled(isEnabled)); };
const _onRoomDidConnect = ({ roomName }: any) => { console.log("onRoomDidConnect: ", roomName); twilioRef.current?.publishLocalAudio();
setStatus("connected");
};
const _onRoomDidDisconnect = ({ roomName, error }: RoomErrorEventArgs) => { console.log("[Disconnect]ERROR: ", error);
setStatus("disconnected");
};
const _onRoomDidFailToConnect = (error: RoomErrorEventArgs) => { console.log("[FailToConnect]ERROR: ", error);
setStatus("disconnected");
};
return ( <View style={styles.container}> {status === "disconnected" && ( <View> <Text style={styles.welcome}>Test a token</Text> <TextInput style={styles.input} autoCapitalize="none" value={token} onChangeText={(text) => setToken(text)} ></TextInput> <View style={styles.button}> <Button title="Connect" onPress={_onConnectButtonPress} ></Button> </View> </View> )}
{(status === "connected" || status === "connecting") && (
<View style={styles.callContainer}>
<View style={styles.optionsContainer}>
<TouchableOpacity
style={styles.optionButton}
onPress={_onEndButtonPress}
>
<Text style={{ fontSize: 12 }}>End</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.optionButton}
onPress={_onMuteButtonPress}
>
<Text style={{ fontSize: 12 }}>
{isAudioEnabled ? "Mute" : "Unmute"}
</Text>
</TouchableOpacity>
</View>
</View>
)}
<TwilioVideo
ref={twilioRef}
onRoomDidConnect={_onRoomDidConnect}
onRoomDidDisconnect={_onRoomDidDisconnect}
onRoomDidFailToConnect={_onRoomDidFailToConnect}
/>
</View>
); };`