Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
JoaquitoGuevara opened this issue Nov 12, 2024 · 0 comments
Open

Comments

@JoaquitoGuevara
Copy link

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(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 (

{status === "disconnected" && (

Test a token
<TextInput
style={styles.input}
autoCapitalize="none"
value={token}
onChangeText={(text) => setToken(text)}
>




)}

  {(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>

);
};`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant