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

<AgoraUIKit
connectionData={props.connectionData}
rtcCallbacks={props.rtcCallbacks}
styleProps={styleProps}
videoPlaceholderProps={{ showButtons: false }}
remoteUsers={filteredRemoteUsers}
/>
Connected Users: {userCount}

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

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

  <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 style={styles.LiveStreamText} onPress={() => navigation.navigate("Videocall") } > Host call</>
);
};

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;

[digitallysavvy]

Thanks for raising these issues @hyperbeans.

For the first issue with the Black bars, that is a scaling issue. The default is to contain where the video scales down to fit the entire height/width video. You are looking to fit the video where it scales up to fit the view. Please take a look at the documentation for Customising UI with StyleProps

For the second issue it sounds like the audience is joining as a host not an audience. Please take a look at the Customising functionality with RtcProps to ensure you are setting the roles correctly.

Communication mode is the default. To use live-streaming mode you can set the mode: mode.LiveBroadcasting in rtcProps. You can then select role: role.Audience or role:role.Broadcaster (mode and role are enums exported by the library).

[hyperbeans]

Hello ,
Thanks for your response. I have added the code you shared, but it didn't work. Please check the attached screenshot for details.

Thanks

[digitallysavvy]

Hi @hyperbeans,

1. Looking at your style code and diving deeper into the UIKit code, it appears that this mode is not available through the style props. To resolve the issue in the short term you will need to edit the Agora UIKit code directly.

• Open Views/MaxVideoView.tsx and on Line 36 change RenderModeType.RenderModeFit to RenderModeTypeRenderModeHidden,

renderMode: RenderModeType.RenderModeHidden,

2. In order to support you in resolving your issue regarding audience I need more information. Please share the code where you set the user role to role: role.Audience in the RtcProps

[hyperbeans]

Hello,
thanks for your response we have also try below code please check

---

import React, { useEffect, useState } from "react";
import AgoraUIKit, { renderMode } from "agora-rn-uikit";
import {RenderModeType, RtcSurfaceView} from 'react-native-agora';
// import AgoraUIKit from 'agora-rn-uikit';
// {
// RtcLocalView,
// RtcRemoteView,
// AgoraUIKit,
// }

// 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 },
// // UIKitContainer: {height: '50%', width: '100%'}
// // renderMode:VideoRenderMode.Hidden,
// // videoMode:"fullscreen"
// };

const styleProps = {
RtcLocalView:
{
containerStyle: styles.localContainer,
videoStyle: styles.localVideo,
renderMode: RenderModeType.RenderModeHidden,
},
RtcRemoteView:
{
containerStyle: styles.remoteContainer,
videoStyle: styles.remoteVideo,
renderMode: RenderModeType.RenderModeHidden,

},
Button: 

{
buttonStyle: styles.button,
textStyle: styles.buttonText,
iconStyle: styles.buttonIcon,
},
};

const props = {
connectionData: {
appId: "a23018a93",
channel: "agt",
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);
  },
},

};

useEffect(() => {
console.log('Remote Users:', remoteUsers);
console.log('Filtered Users:', filteredRemoteUsers);
}, [remoteUsers]);

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

return videoCall ? (
//

<AgoraUIKit
connectionData={props.connectionData}
rtcCallbacks={props.rtcCallbacks}
styleProps={styleProps}
videoPlaceholderProps={{ showButtons: false }}
remoteUsers={filteredRemoteUsers}
/>
Connected Users: {userCount}

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

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

  <Text
    style={styles.rtcStreamText}
    onPress={() => navigation.navigate("Rtc")}
  >
    {" "}
    RTC 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",
},
rtcStreamText: {
marginTop: "10%",
textAlign: "center",
},
container:
{
flex: 1,
backgroundColor: '#fff',
},
localContainer:
{
position: 'absolute',
top: 10,
left: 10,
width: 100,
height: 150,
borderWidth: 1,
borderColor: 'black',
},
localVideo:
{
width: '100%',
height: '100%',
},
remoteContainer:
{
flex: 1,
},
remoteVideo:
{
width: '100%',
height: '100%',
},
button:
{
backgroundColor: '#007bff',
padding: 10,
borderRadius: 5,
},
buttonText:
{
color: '#fff',
fontSize: 16,
},
buttonIcon:
{
color: '#fff',
},
});

export default Videocall;

host ==1
audience ==2 use kiya h to run ho raha h but
when we use this role: role.Audience then my application was cursed

---

we have also try this

videoMode:{
max:RenderModeType.RenderModeHidden,
min:RenderModeType.RenderModeHidden,
},

[digitallysavvy]

The code you send above, which user is that for?

const [isHost, setIsHost] = useState(true);

this line sets the user to host which means they can broadcast into the channel.

RE: exported video call :

Could you please elaborate on use kiya h tor ho raha h ?

Re: videoMode:{ max:RenderModeType.RenderModeHidden, min:RenderModeType.RenderModeHidden, }

Where did you try this?

[hyperbeans]

Hello ,
we have try below code please check

---

import React, { useEffect, useState } from "react";
import AgoraUIKit, { renderMode } from "agora-rn-uikit";
import {RenderModeType, RtcSurfaceView} from 'react-native-agora';
// import AgoraUIKit from 'agora-rn-uikit';
// {
// RtcLocalView,
// RtcRemoteView,
// AgoraUIKit,
// }

// 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 },
// // UIKitContainer: {height: '50%', width: '100%'}
// // renderMode:VideoRenderMode.Hidden,
// // videoMode:"fullscreen"
// };

const styleProps = {
videoMode:{
max:RenderModeType.RenderModeHidden,
min:RenderModeType.RenderModeHidden,
},
RtcLocalView:
{
containerStyle: styles.localContainer,
videoStyle: styles.localVideo,
renderMode: RenderModeType.RenderModeHidden,
},
RtcRemoteView:
{
containerStyle: styles.remoteContainer,
videoStyle: styles.remoteVideo,
renderMode: RenderModeType.RenderModeHidden,

},
Button: 

{
buttonStyle: styles.button,
textStyle: styles.buttonText,
iconStyle: styles.buttonIcon,
},
};

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);
  },
},

};

useEffect(() => {
console.log('Remote Users:', remoteUsers);
console.log('Filtered Users:', filteredRemoteUsers);
}, [remoteUsers]);

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

return videoCall ? (
//

<AgoraUIKit
connectionData={props.connectionData}
rtcCallbacks={props.rtcCallbacks}
styleProps={styleProps}
videoPlaceholderProps={{ showButtons: false }}
remoteUsers={filteredRemoteUsers}
/>
Connected Users: {userCount}

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

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

  <Text
    style={styles.rtcStreamText}
    onPress={() => navigation.navigate("Rtc")}
  >
    {" "}
    RTC 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",
},
rtcStreamText: {
marginTop: "10%",
textAlign: "center",
},
container:
{
flex: 1,
backgroundColor: '#fff',
},
localContainer:
{
position: 'absolute',
top: 10,
left: 10,
width: 100,
height: 150,
borderWidth: 1,
borderColor: 'black',
},
localVideo:
{
width: '100%',
height: '100%',
},
remoteContainer:
{
flex: 1,
},
remoteVideo:
{
width: '100%',
height: '100%',
},
button:
{
backgroundColor: '#007bff',
padding: 10,
borderRadius: 5,
},
buttonText:
{
color: '#fff',
fontSize: 16,
},
buttonIcon:
{
color: '#fff',
},
});

export default Videocall;

[hyperbeans]

The code you send above, which user is that for?

const [isHost, setIsHost] = useState(true);
this line sets the user to host which means they can broadcast into the channel.

answer:- User is broadcaster, We are trying in our team only, I am hosting & my frined is receiving it.

RE: exported video call :

Could you please elaborate on use kiya h tor ho raha h ?

Re: videoMode:{ max:RenderModeType.RenderModeHidden, min:RenderModeType.RenderModeHidden, }

answer :- It is used in RTC localview & RTC remote view.

Where did you try this?

answer:- It is used in the style props but nothing changes, still black spaces are coming.

[digitallysavvy]

If you tried my suggestions and are still not getting the desired result then I will need to have a look at more of the code (in context). Are you able to add me to the repo?

[hyperbeans]

Hi,

you can access the code from below repo

https://github.com/hyperbeans/agora_demo.git

thank you

[hyperbeans]

Hello @digitallysavvy
These issues have been pending for a very long time, and we have not received any updates from your end. We have tried all the solutions you suggested, but we are still facing issues. Could you please provide an estimated timeline for when these issues will be resolved?