In multiple person video call we are getting black space in video frame & Live streaming issues

[hyperbeans]

Hello,

Target device: (Note: simulators are not supported for running the UIKit)

• Device: [ iPhone6s, iphonex , samsung s9, oneplus nord2T , realme 9pro+]
• OS:
  • IOS
  • Android
• OS Version: [Android 11,12,13 ]

App Info

• Type:
  • [ ] Expo CLI (using custom development clients)
• CLI Version: [ expo : 50.0.14 ,react-native: 0.73.6]

Describe the issue 1 Ticket ID 1: CUS-42775

when we call started and other person came and join the call our video call started but black space around our video call . i want to remove that black space becuase half of my screen show in black protion that not good for my app .

so.please give appropriate answer and remove that balck space in that call

To Reproduce Steps to reproduce the behavior:

1. npm i
2. create a build :- eas build -p android --profile development
3. download build and start call with two person you seen my issue

Screenshots i am sharing also screenshot so you get it my issue

Describe the issue 2 Ticket ID 2: CUS-42767

when we call started than i want that my video see my friends and join my friend in that video

example we are coming in insta live than our friend show us but we not see them

In my case i achieve 50% functionality like audience only show host screen(video) but in host screen audience screen(video) also add and other audience also see other audience video

so.please give appropriate answer and remove how to stop see audience video to other audience and host also not see audience video

only host video video see audience

To Reproduce Steps to reproduce the behavior:

1. npm i
2. create a build :- eas build -p android --profile development
3. download build a. start call b. second person go to live stream and press stream than you watch i told that scenario and third person also connect with stream than you catch what i told you

Screenshots i am sharing also screenshot so you get it my issue

Here is code

For videocall*******

import React, { useEffect, useState } from "react"; import AgoraUIKit, { ClientRoleType } from "agora-rn-uikit"; // RenderModeType, VideoRenderMode , {RenderModeType } // import {RenderModeType} from 'react-native-agora'; import { Text, PermissionsAndroid, Alert, SafeAreaView, View, StyleSheet, Dimensions, } from "react-native";

const { width, height } = Dimensions.get("window");

const Videocall = ({ navigation }) => { const [videoCall, setVideoCall] = useState(false); const [buttonsState, setButtonState] = useState("flex"); const [remoteUsers, setRemoteUsers] = useState([]); const [userCount, setUserCount] = useState(1); const [isHost, setIsHost] = useState(true);

const styleProps = { usernameText: { padding: 10, right: 0 }, localBtnContainer: { display: buttonsState }, // videoMode:"fullscreen" };

const props = { connectionData: { appId: "a233f454a3f64ce19d6b480aaa018a93", channel: "agoratest", layout: 0, displayUsername: true, username: "vikash", role: isHost ? 1 : 2, }, rtcCallbacks: { EndCall: () => { setVideoCall(false); setRemoteUsers([]); },

  UserJoined: (uid, elapsed) => {
    setRemoteUsers((prevUsers) => [...prevUsers, { uid, role: 2 }]);
    setUserCount((prevCount) => prevCount + 1);
  },
  UserOffline: (uid, reason) => {
    setRemoteUsers((prevUsers) =>
      prevUsers.filter((user) => user.uid !== uid)
    );
    setUserCount((prevCount) => prevCount - 1);
  },
},

};

const filteredRemoteUsers = isHost ? remoteUsers.filter((user) => user.role !== 2).map((user) => user.uid) : remoteUsers.map((user) => user.uid);

return videoCall ? ( <SafeAreaView style={styles.max}> <AgoraUIKit connectionData={props.connectionData} rtcCallbacks={props.rtcCallbacks} styleProps={styleProps} videoPlaceholderProps={{ showButtons: false }} remoteUsers={filteredRemoteUsers} /> <Text style={styles.userCountText}>Connected Users: {userCount}</Text> </SafeAreaView> ) : ( <> <Text style={styles.startCallText} onPress={() => { setVideoCall(true); setUserCount(1); }} > Start Call </Text>

  <Text
    style={styles.LiveStreamText}
    onPress={() => navigation.navigate("Livestream")}
  >
    {" "}
    Live Stream
  </Text>
</>

); };

const styles = StyleSheet.create({ max: { flex: 1, },

fullView: { width: width, height: height, }, fullView1: { width: width, height: height, }, userCountText: { position: "absolute", top: 10, left: 10, color: "white", fontSize: 16, }, startCallText: { marginTop: "10%", textAlign: "center", }, LiveStreamText: { marginTop: "10%", textAlign: "center", }, });

export default Videocall;

***For livestream

import React, { useEffect, useState } from "react"; import AgoraUIKit, { ClientRoleType } from "agora-rn-uikit"; // RenderModeType, VideoRenderMode , {RenderModeType } // import {RenderModeType} from 'react-native-agora'; import { Text, PermissionsAndroid, Alert, SafeAreaView, View ,StyleSheet,Dimensions} from "react-native";

const { width, height } = Dimensions.get('window');

const Livestream = ({navigation}) => { const [videoCall, setVideoCall] = useState(false); const [buttonsState, setButtonState] = useState("flex");

const [userCount, setUserCount] = useState(1);

const styleProps = { usernameText: { padding: 10, right: 0 }, localBtnContainer: { display: buttonsState }, };

const props = { connectionData: { appId: "a233f454a3f64ce19d6b480aaa018a93", channel: "agoratest", layout: 0, displayUsername: true, username : "vikash", role:2,

},
rtcCallbacks: {
  EndCall: () => setVideoCall(false),
  UserJoined: (uid, elapsed) => setUserCount(prevCount => prevCount + 1),
  UserOffline: (uid, reason) => setUserCount(prevCount => prevCount - 1),
},

};

return videoCall ? ( <SafeAreaView style={styles.max}>

  <AgoraUIKit
    connectionData={props.connectionData}
    rtcCallbacks={props.rtcCallbacks}
    styleProps={styleProps}
    videoPlaceholderProps={{ showButtons: false }}
  />
   <Text style={styles.userCountText}>Connected Users: {userCount}</Text>
  </SafeAreaView >

) : (<> <Text style={styles.startCallText} onPress={() => {setVideoCall(true); setUserCount(1)}}> Stream </Text>

<Text style={styles.LiveStreamText} onPress={() => navigation.navigate("Videocall") } > Host call</Text></> ); };

const styles = StyleSheet.create({ max: { flex: 1, // justifyContent: 'center', // alignItems: 'center', // backgroundColor: '#fff', },

fullView: { width: width, height: height , }, fullView1: { width: width, height: height, }, userCountText: { position: 'absolute', top: 10, left: 10, color: 'white', fontSize: 16, }, startCallText: { marginTop: "10%", textAlign: 'center', }, LiveStreamText: { marginTop: "10%", textAlign: 'center', },

});

export default Livestream;