react-native-twilio-video-webrtc icon indicating copy to clipboard operation
react-native-twilio-video-webrtc copied to clipboard

Audio is not being received by another device connected to the room

Open JoaquitoGuevara opened this issue 1 year ago • 0 comments

Steps to reproduce

  1. 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>

); };`

JoaquitoGuevara avatar Nov 12 '24 08:11 JoaquitoGuevara