digitallysavvy
commented
2 weeks ago 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,
Target device: (Note: simulators are not supported for running the UIKit)
App Info
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:
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:
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([]); },
};
const filteredRemoteUsers = isHost ? remoteUsers.filter((user) => user.role !== 2).map((user) => user.uid) : remoteUsers.map((user) => user.uid);
return videoCall ? (
) : ( <> <Text style={styles.startCallText} onPress={() => { setVideoCall(true); setUserCount(1); }}
); };
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,
};
return videoCall ? (