Search code examples
react-nativevideo-streamingagora.io

Agora.io video streaming cuts the video on portrait and landscape


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

Solution

  • 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