I'm implementing agora.io with React Native but on video streaming the receiver can't get the full video on mobile rotation, like on portrait some part of video is missing and on landscape some part of video missing. I want the video stream like the videos on YouTube, when on portrait mode the video fits according to the portrait and on landscape the video fits according to the landscape.
const config = {
//Setting config of the app
appid: '********', //streamer app appId
channelProfile: 1, //Set channel profile as 0 for RTC
clientRole: 2,
videoEncoderConfig: {
//Set Video feed encoder settings
width: 720,
height: 1600,
bitrate: 1,
frameRate: FPS30,
orientationMode: Adaptative,
swapWidthAndHeight: true,
},
audioProfile: AudioProfileDefault,
audioScenario: AudioScenarioDefault,
};
It looks like you are using video render mode as hidden
instead of fit
.
To use render mode fit
, you can have a similar AgoraView Component setup:
import { AgoraViewMode } from 'react-native-agora';
<AgoraView mode={AgoraViewMode.FIT} {...otherProps} />
References:
https://agora-rn-uikit.netlify.app/docs/api/classes/_agoraview_native_.agoraview