Set up common video config

---

Introduction

ZEGOCLOUD supports setting up the video configuration during a real-time video call or live streaming, such as video capture and video encoding output resolution, video frame rate, bitrate, view mode, and mirror mode.

Setting the proper video resolution, frame rate, and bitrate to provide a better experience in audio and video scenarios. Setting the appropriate view modes to provide a personalized video display mode.

Basic concepts

• Resolution:
  • Video resolution: The number of pixels contained in each frame. The video resolution is often expressed in PPI.
  • Capture resolution: The total amount of pixels captured by a camera.
  • Encoder resolution: The resolution of the encoded image.
• Bitrate (bps): The number of bits that are conveyed or processed per unit of time. The bitrate is expressed in the unit bit per second unit.
• Frame rate (fps): The frequency (rate) at which consecutive images (frames) are captured or displayed. The frame rate is often expressed in frames per second or fps.

Prerequisites

Before you begin, make sure you complete the following steps:

• ZEGO Express SDK has been integrated into the project to implement basic real-time audio and video functions. For details, please refer to Quick start .
• A project has been created in ZEGOCLOUD Console and applied for a valid AppID and AppSign. For details, please refer to Console - Project Information .

Set up the video Configuration

Use default values

If you don't want to manually set the video configuration, you can use the sets of default values provided by the ZEGO Express SDK, the default values of ZegoVideoConfigPreset are as follows:

The sample code for using default values is shown below:

ZegoVideoConfig *config = [ZegoVideoConfig configWithPreset:ZegoVideoConfigPreset1080P];
[[ZegoExpressEngine sharedEngine] setVideoConfig:config];

Customize the video configuration

To set up the video configuration, call the setVideoConfig method. If you don't customize your video configuration, ZEGO uses the default values as shown below:

The following sample code is used for setting the video capture resolution to 360p, encoder resolution to 360p, bitrate to 600 kbps, and frame rate to 15 fps:

//Set Video Config Before StartPreview And StartPublishing
ZegoVideoConfig *videoConfig = [[ZegoVideoConfig alloc] init];
videoConfig.captureResolution = CGSizeMake(360, 640);
videoConfig.encodeResolution = CGSizeMake(360, 640);
videoConfig.fps = 15;
videoConfig.bitrate = 600;
[[ZegoExpressEngine sharedEngine] setVideoConfig:videoConfig];

Set the video view mode

To set the video view mode, modify the viewMode property of the ZegoCanvas object.

Currently, the following three video rendering and filling modes are supported:

The effects of the three video rendering and filling modes are as shown below:

The following sample code is used for setting the view mode to ZegoViewModeAspectFit and starting the local video preview:

// The following [remotePlayView] is a SurfaceView, TextureView, or SurfaceTexture object on the UI.
ZegoCanvas *previewCanvas = [ZegoCanvas canvasWithView:self.remotePlayView];
// Set the display mode to [ZegoViewModeAspectFit].
previewCanvas.viewMode = ZegoViewModeAspectFit;
// Start the local video preview.
[[ZegoExpressEngine sharedEngine] startPreview:previewCanvas];

Set the mirror mode

To mirror the video you want to publish or mirror the video in a local video preview, call the setVideoMirrorMode method before or after the stream publishing.

Currently, the following four mirror modes are supported:

The effects of the four mirror modes are as shown below:

The following sample code is used for setting the mirror mode for the stream player without mirroring the local video preview:

[[ZegoExpressEngine sharedEngine] setVideoMirrorMode:ZegoVideoMirrorModeOnlyPublishMirror];

Set the video orientation mode

The Express-video SDK uses the locked portrait mode by default, that is, the video images in the local video preview and the video streams you played are in portrait orientation.

To set the video to landscape mode, call the setAppOrientation method.

• To rotate the video 90-degree counterclockwise, pass UIInterfaceOrientationLandscapeLeft to the parameter.
• To rotate the video 90-degree clockwise, pass UIInterfaceOrientationLandscapeRight to the parameter.

[[ZegoExpressEngine sharedEngine] setAppOrientation:UIInterfaceOrientationLandscapeLeft];

To use the G-Sensor mode (gravity-sensing adaptation) for live streaming or video calling, you will need to listen for the related video image rotation event callbacks and set the corresponding video orientation accordingly.

• If you use the SDK for video data capturing, to implement the G-Sensor mode, you will need to use the following 2 methods:

  setVideoConfig: Callback for updates on the phone screen orientation.

  setAppOrientation: Method for setting the video image orientation.

1. Monitor the changes in the phone screen orientation by listening for the related event callbacks.

[[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(orientationChanged:) name:UIDeviceOrientationDidChangeNotification object:[UIDevice currentDevice]];

2. Modify the corresponding encoding resolution in the callback, and set the video image orientation.

-(void)orientationChanged:(NSNotification *)notification {
    UIDevice *device = notification.object;

    ZegoVideoConfig *videoConfig = [[ZegoExpressEngine sharedEngine] getVideoConfig];
    UIInterfaceOrientation orientation = UIInterfaceOrientationUnknown;

    switch (device.orientation) {
        // Note that UIInterfaceOrientationLandscapeLeft is equal to UIDeviceOrientationLandscapeRight (and vice versa).
        // This is because rotating the device to the left requires rotating the content to the right.
        case UIDeviceOrientationLandscapeLeft:
            orientation = UIInterfaceOrientationLandscapeRight;
            videoConfig.encodeResolution = CGSizeMake(640, 360);
            break;
        case UIDeviceOrientationLandscapeRight:
            orientation = UIInterfaceOrientationLandscapeLeft;
            videoConfig.encodeResolution = CGSizeMake(640, 360);
            break;
        case UIDeviceOrientationPortrait:
            orientation = UIInterfaceOrientationPortrait;
            videoConfig.encodeResolution = CGSizeMake(360, 640);
            break;
        case UIDeviceOrientationPortraitUpsideDown:
            orientation = UIInterfaceOrientationPortraitUpsideDown;
            videoConfig.encodeResolution = CGSizeMake(360, 640);
            break;
        default:
            // Unknown / FaceUp / FaceDown
            break;
    }

    [[ZegoExpressEngine sharedEngine] setVideoConfig:videoConfig];
    [[ZegoExpressEngine sharedEngine] setAppOrientation:orientation];
}

• If you use the Custom video capture for video data capturing, to implement the G-Sensor mode after the device screen orientation changes, refer to the following two methods:

1. Process the video frame data by yourself: In the callback for the updates on the device screen orientation, rotate the captured video frame data. And then send the processed frame data to the SDK with the sendCustomVideoCapturePixelBuffer method.

2. Process the video frame data with the SDK:

   a. In the callback for the updates on the device screen orientation, set the rotation property of the ZegoVideoEncodedFrameParam method based on the actual device screen orientation.

   b. Pass the video frame data and set the video image orientation parameter with the sendCustomVideoCaptureEncodedData method for sending processed video data to the SDK.

FAQ

Why can't I playback the recorded video?

Because in G-Sensor mode, streams' encoder resolution changes, and some third-party players can't compatible with the video that has been modified resolution very well, which results in you may fail to playback the video you recorded.

Therefore, we recommend you don't modify the resolution in the G-Sensor mode during live streaming or video calling.