Video Capture Rotation

Overview

When users use mobile devices for live streaming or video calls, they can adopt different video capture orientations. ZegoExpress SDK supports the following video capture methods:

Fixed Portrait

Indicates that the publishing end captures video displayed in portrait mode in a fixed manner. At this time, when the peer device orientation is portrait, the viewed picture is a portrait effect that fills the device screen. When the peer device orientation is landscape, the viewed picture is an effect with a certain rotation angle relative to the publishing end image (the following figure takes counterclockwise rotation of 90 degrees as an example).

• When UI is locked:

  

• When UI is not locked:

  

Fixed Landscape

Indicates that the publishing end captures video displayed in landscape mode in a fixed manner. At this time, when the peer device orientation is landscape, the viewed picture is a landscape effect that fills the device screen. When the peer device orientation is portrait, the viewed picture is an effect with a certain rotation angle relative to the publishing end image (the following figure takes counterclockwise rotation of 90 degrees as an example).

• When UI is locked:

  

• When UI is not locked:

  

Switch Between Horizontal and Portrait

Provides video rotation function. Users can rotate the video 90, 180, or 270 degrees counterclockwise relative to the upright direction of the phone as needed. Facilitates users to combine video scenario needs to obtain the desired video rendering effect. After video rotation, it will automatically adjust to adapt to the encoded image resolution.

The interfaces called by the above three methods are different. For detailed descriptions, please refer to Usage Steps in this document.

Prerequisites

Before implementing video capture rotation, please ensure:

• You have created a project in the ZEGO Console and applied for a valid AppID and AppSign. For details, please refer to Console - Project Information.
• You have integrated ZEGO Express SDK into the project and implemented basic audio and video streaming functionality. For details, please refer to Quick Start - Integration and Quick Start - Implementation.

Usage Steps

Fixed Portrait

When using portrait live streaming or video calls, the width resolution should be smaller than the height resolution. Assuming it is "360 × 640", you need to implement the function through the following steps.

1. Call the createEngine interface to create an SDK engine instance. For details, please refer to "Create engine" in Quick Start - Implementing Video Call.

//  Use the appID applied from ZEGO Console for initialization
const profile = {
appID : xxx,
appSign: '39011cbxxxxxxxxxxxx',
scenario : 0
};

ZegoExpressEngine.createEngineWithProfile(profile)

//  Use the appID applied from ZEGO Console for initialization
const profile = {
appID : xxx,
appSign: '39011cbxxxxxxxxxxxx',
scenario : 0
};

ZegoExpressEngine.createEngineWithProfile(profile)

2. (Optional) Call the setVideoConfig interface to set the encoding resolution. The default value is "360 × 640", which can be adjusted as needed. If you keep the default value, skip this step.

The resolution setting for portrait live streaming is as follows:

let config = new ZegoVideoConfig();
config.encodeWidth = 360;
config.encodeHeight = 640;
ZegoExpressEngine.instance().setVideoConfig(config);

let config = new ZegoVideoConfig();
config.encodeWidth = 360;
config.encodeHeight = 640;
ZegoExpressEngine.instance().setVideoConfig(config);

3. Call the loginRoom interface to login to the room. For details, please refer to "Login room" in Quick Start - Implementing Video Call.

ZegoExpressEngine.instance().loginRoom("test_roomid", {
    userID:"test_userid",
    userName: "test_username"
});

ZegoExpressEngine.instance().loginRoom("test_roomid", {
    userID:"test_userid",
    userName: "test_username"
});

4. Use <ZegoTextureView ref='zego_preview_view' style={{height: 200}}/> in the render function to set the local view, and call the startPreview interface to start local preview for displaying local pictures.

render() {
    return (
    ...
    <View style={{height: 200}}>
        <ZegoTextureView ref='zego_preview_view' style={{height: 200}} />
    </View>
    ...
    );
}

componentDidMount() {
    ...
    ZegoExpressEngine.instance().startPreview({"reactTag": findNodeHandle(this.refs.zego_preview_view), "viewMode": ZegoViewMode.AspectFit, "backgroundColor": 0});
    ...
}

render() {
    return (
    ...
    <View style={{height: 200}}>
        <ZegoTextureView ref='zego_preview_view' style={{height: 200}} />
    </View>
    ...
    );
}

componentDidMount() {
    ...
    ZegoExpressEngine.instance().startPreview({"reactTag": findNodeHandle(this.refs.zego_preview_view), "viewMode": ZegoViewMode.AspectFit, "backgroundColor": 0});
    ...
}

5. Call the startPublishingStream interface to start publishing stream, pushing the local audio and video stream to the real-time audio and video cloud. For details, please refer to "Publish stream" in Quick Start - Implementing Video Call.

ZegoExpressEngine.instance().startPublishingStream("test_streamid");

ZegoExpressEngine.instance().startPublishingStream("test_streamid");

6. Use the fixed portrait mode for live streaming or video calls.

Fixed Landscape

When using landscape live streaming or video calls, the width resolution should be larger than the height resolution. Assuming it is "640 × 360", you need to implement the function through the following steps.

1. Call the createEngine interface to create an SDK engine instance. For details, please refer to "Create engine" in Quick Start - Implementing Video Call.

//  Use the appID applied from ZEGO Console for initialization
const profile = {
appID : xxx,
appSign: '39011cbxxxxxxxxxxxxxxxxxx',
scenario : 0
};

ZegoExpressEngine.createEngineWithProfile(profile)

//  Use the appID applied from ZEGO Console for initialization
const profile = {
appID : xxx,
appSign: '39011cbxxxxxxxxxxxxxxxxxx',
scenario : 0
};

ZegoExpressEngine.createEngineWithProfile(profile)

2. Call the setVideoConfig interface to set the encoding resolution to "640 × 360".

let config = new ZegoVideoConfig();
config.encodeWidth = 640;
config.encodeHeight = 360;

let config = new ZegoVideoConfig();
config.encodeWidth = 640;
config.encodeHeight = 360;

The resolution setting for landscape live streaming is as follows:

let config = new ZegoVideoConfig();
config.encodeWidth = 640;
config.encodeHeight = 360;
ZegoExpressEngine.instance().setVideoConfig(config);

let config = new ZegoVideoConfig();
config.encodeWidth = 640;
config.encodeHeight = 360;
ZegoExpressEngine.instance().setVideoConfig(config);

3. Call the setAppOrientation interface to set the orientation of the video. If rotating 90 degrees counterclockwise, the parameter passed to the following interface is ZegoOrientation.LandscapeLeft. If rotating 90 degrees clockwise, the parameter passed is ZegoOrientation.LandscapeRight.

ZegoExpressEngine.instance().setAppOrientation(ZegoOrientation.LandscapeLeft);

ZegoExpressEngine.instance().setAppOrientation(ZegoOrientation.LandscapeLeft);

4. Call the loginRoom interface to login to the room. For details, please refer to "Login room" in Quick Start - Implementing Video Call.

ZegoExpressEngine.instance().loginRoom("test_roomid", {
    userID:"test_userid",
    userName: "test_username"
});

ZegoExpressEngine.instance().loginRoom("test_roomid", {
    userID:"test_userid",
    userName: "test_username"
});

5. Use <ZegoTextureView ref='zego_preview_view' style={{height: 200}}/> in the render function to set the local view, and call the startPreview interface to start local preview for displaying local pictures.

render() {
    return (
    ...
    <View style={{height: 200}}>
        <ZegoTextureView ref='zego_preview_view' style={{height: 200}} />
    </View>
    ...
    );
}

componentDidMount() {
    ...
    ZegoExpressEngine.instance().startPreview({"reactTag": findNodeHandle(this.refs.zego_preview_view), "viewMode": ZegoViewMode.AspectFit, "backgroundColor": 0});
    ...
}

render() {
    return (
    ...
    <View style={{height: 200}}>
        <ZegoTextureView ref='zego_preview_view' style={{height: 200}} />
    </View>
    ...
    );
}

componentDidMount() {
    ...
    ZegoExpressEngine.instance().startPreview({"reactTag": findNodeHandle(this.refs.zego_preview_view), "viewMode": ZegoViewMode.AspectFit, "backgroundColor": 0});
    ...
}

6. Call the startPublishingStream interface to start publishing stream, pushing the local audio and video stream to the real-time audio and video cloud. For details, please refer to "Publish stream" in Quick Start - Implementing Video Call.

ZegoExpressEngine.instance().startPublishingStream("test_streamid");

ZegoExpressEngine.instance().startPublishingStream("test_streamid");

7. Use the fixed landscape mode for live streaming or video calls.

FAQ

1. Why does the recorded live stream seem unwatchable?

   Since the encoding resolution of the stream is modified when switching between horizontal and portrait, some third-party players have poor compatibility with videos whose resolution is modified, which may cause playback failure. Therefore, it is generally not recommended to modify the resolution when switching between horizontal and portrait during live streaming or video calls.