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

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

Open
1 task
hyperbeans opened this issue Jun 21, 2024 · 10 comments

Comments

@hyperbeans
Copy link

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

Skype_Picture_2024_06_21T07_53_40_548Z
Skype_Picture_2024_06_21T07_53_37_830Z
Skype_Picture_2024_06_21T07_53_35_540Z
Skype_Picture_2024_06_21T07_53_33_208Z
IMG-20240614-WA0003
IMG-20240614-WA0004
IMG-20240614-WA0005
IMG-20240614-WA0002
imageagoracall2

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
Copy link

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
Copy link
Author

hyperbeans commented Jul 9, 2024

Hello ,
Thanks for your response. I have added the code you shared, but it didn't work. Please check the attached screenshot for details.
Screenshot from 2024-07-09 11-03-25

Thanks

@digitallysavvy
Copy link

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.
renderMode: RenderModeType.RenderModeHidden,
  1. 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
Copy link
Author

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
Copy link

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
Copy link
Author

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
Copy link
Author

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
Copy link

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
Copy link
Author

Hi,

you can access the code from below repo

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

thank you

@hyperbeans
Copy link
Author

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?

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

2 participants