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

[hyperbeans]

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

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