DocsICP FilingConsole
Documentation
Home Page ApsaraVideo Live Use Cases AUI Kits Low-Code Application Solution Interactive streaming Client-side integration iOS Portrait mode

Portrait mode

Updated at:
Copy as MD
Product
My Favorites

This guide describes how to integrate the AUIKits portrait mode component for interactive live streaming on iOS. It covers procedures, important notes, and code samples. For information about the use cases for portrait mode and the differences between portrait and landscape modes, see Portrait mode.

Source code

Download source code

AUI style

Feature modules

Source code repository

Interactive live streaming - portrait mode

  • host client

  • viewer client

Download source code

Source code structure

├── iOS  // Root directory for the iOS platform
│   ├── AUIInteractionLive.podspec                // Podspec file
│   ├── Source                                    // Source code files
│   ├── Resources                                 // Resource files
│   ├── Example                                   // Demo code
│   ├── AUIBaseKits                               // Basic UI components   
│   ├── README.md                                 // Readme

Environment requirements

  • Xcode 12.0 or later. We recommend using the latest official version.

  • CocoaPods 1.9.3 or later.

  • A physical device running iOS 10.0 or later.

Prerequisites

  • Deploy an AppServer and obtain its domain name. For instructions, see Configure and run the AppServer.

  • Obtain a license and License Key for the ApsaraVideo Player SDK for live streaming and playback. See Manage licenses for instructions.

Run the demo

  1. After downloading the source code, go to the Example directory. Run the command pod install --repo-update to automatically install the dependent SDKs.

  2. Open AUILiveDemo.xcworkspace in Xcode. On the Signing & Capabilities tab, modify the Team and Bundle Identifier.

    1. Team: The development team associated with your Apple Developer account.

    2. Bundle Identifier: The unique identifier for your application.

  3. Place the license file you obtained in Create an SDK License in the Example/AUILiveDemo/ directory and rename it to license.crt.

  4. In the AUILiveDemo/Info.plist file, set the AlivcLicenseKey field to the License Key you obtained in Create an SDK License.

  5. In XCode, open the Source/InteractionLive/AUIInteractionLiveManager.m file, and modify the value of kLiveServiceDomainString to the AppServer address that you set up in Configure and run the server.

    static NSString * const kLiveServiceDomainString = @"Your AppServer domain name";

  6. Build and run the project on a physical device.

Quick integration

This section describes how to integrate AUIInteractionLive into your app project to implement interactive live streaming features.

Import source code

  1. Import AUIInteractionLive: After you download the source code, copy the iOS folder to your app's code directory. Rename the folder to AUIInteractionLive and place it at the same level as your Podfile. You can delete the Example directory.

  2. Modify your Podfile to include the following content:

    • AliVCSDK_InteractiveLive: The ApsaraVideo Player SDK for interactive live streaming. You can use the full-featured AliVCSDK_Standard SDK instead if your app requires short video editing. For more information, see iOS.

    • AUIFoundation: Basic UI components.

    • AUIMessage: The chat UI component.

    • AUIBeauty: The beauty filter UI component. You can skip this component if you do not need it.

    • AUIInteractionLive: The source code for the portrait mode UI component for interactive live streaming. You can modify the component code based on your business needs.

      Integrate the appropriate ApsaraVideo Player SDK for your business scenario. We recommend using the latest version. For more information, see Select and download an SDK.

      # iOS 10.0 or later is required.
platform :ios, '10.0'

target 'Your App target' do
    # If your app also needs short video editing features, you can use the full-featured SDK (AliVCSDK_Standard).
    # You can replace all occurrences of AliVCSDK_InteractiveLive in this file with AliVCSDK_Standard.
    # TODO: Replace 'x.x.x' with the specific version number. For details and version numbers, see the preceding documentation link.
    pod 'AliVCSDK_InteractiveLive', '~> x.x.x'

    # Basic UI components
    pod 'AUIFoundation/All', :path => "./AUIInteractionLive/AUIBaseKits/AUIFoundation/"

    # Chat UI component
    pod 'AUIMessage/AliVCIM', :path => "./AUIInteractionLive/AUIBaseKits/AUIMessage/"
    
    # Beauty filter UI component (three options)
    # 1. If you use AliVCSDK_Standard as the ApsaraVideo Player SDK, replace "AliVCSDK_InteractiveLive" with "AliVCSDK_Standard".
    # 2. If you need to use the professional Queen SDK, replace "AliVCSDK_InteractiveLive" with "Queen".
    # 3. If you do not need beauty filters, you do not need to integrate AUIBeauty.
    pod 'AUIBeauty/AliVCSDK_InteractiveLive', :path => "./AUIInteractionLive/AUIBaseKits/AUIBeauty/"
    
    # Portrait mode UI component for interactive live streaming. If you use AliVCSDK_Standard as the ApsaraVideo Player SDK, replace AliVCSDK_InteractiveLive with AliVCSDK_Standard.
    pod 'AUIInteractionLive/AliVCSDK_InteractiveLive',  :path => "./AUIInteractionLive/"
    
end

  3. Run pod install --repo-update.

  4. The source code integration is complete.

Project configuration

  • Build settings

    • Navigate to Build Settings > Linking > Other Linker Flags and add -ObjC.

    • Navigate to Build Settings > Build Options > Enable Bitcode and set it to NO.

  • Open the project's info.plist file and add permissions for NSCameraUsageDescription and NSMicrophoneUsageDescription.

    Set the value of NSCameraUsageDescription to Camera access is required for live streaming. and the value of NSMicrophoneUsageDescription to Microphone access is required for live streaming..

  • If you need to continue live streaming when the app is switched to the background, enable Background Modes in Xcode and check the Audio, AirPlay, and Picture in Picture option under Modes.

  • Configure your project with the license file and License Key. For more information, see iOS.

API calls

  • After you deploy the AppServer, open the AUIInteractionLiveManager.m file and set the kLiveServiceDomainString constant to your AppServer domain name:

    // AUIInteractionLiveManager.m

// After deploying the AppServer, modify the AppServer domain name.
static NSString * const kLiveServiceDomainString =  @"Your AppServer domain name";

  • Initialize the SDK.

    • Note: You must import the header file and ensure the SDK is initialized before you use its features.

    • AUI component pages require a navigation controller to function. We recommend initializing the SDK after the app launches and setting a navigation controller (AVNavigationController is recommended). The following example shows how to perform initialization at startup in a non-storyboard scenario:

      #import "AUIInteractionLiveManager.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.

    // Initialize here. Make sure to import the header file.
    [[AUIInteractionLiveManager defaultManager] setup];

    // App home page
    AUIHomeViewController *liveVC = [AUIHomeViewController new];

    // A navigation controller is required; otherwise, navigation between pages will not work.
    // AVNavigationController is recommended.
    // If you use the system UINavigationController as the app's navigation controller, you must do the following:
    // 1. Hide the navigation bar: self.navigationBar.hidden = YES
    // 2. Disable the swipe-right-to-close gesture in the live room (AUILiveRoomAnchorViewController and AUILiveRoomAudienceViewController).
    AVNavigationController *nav =[[AVNavigationController alloc]initWithRootViewController:liveVC];
    [self.window setRootViewController:nav];
    [self.window makeKeyAndVisible];

    // Your other initializations...
    
    return YES;
}

  • Users must log in to start or watch a stream. After a user logs in, provide their account information to the SDK as shown below:

    // Set these values after the user logs in.
// If the user does not need to log in again upon this launch (the user token has not expired),
// you can set these values after the logged-in user's information is loaded.

AUIRoomAccount *account = [AUIRoomAccount new];
account.myInfo.userId = @"Current logged-in user ID";
account.myInfo.avatar = @"Current logged-in user avatar";
account.myInfo.nickName = @"Current logged-in user nickname";
account.myToken = @"Current logged-in user token";   // Used for server-side user validation
[[AUIInteractionLiveManager defaultManager] setMyAccount:account];

  • Enter a live room.

    After completing the preceding steps, you can use the AUIInteractionLiveManager APIs to implement features like starting a stream as a host or joining a stream. You can also modify the source code to meet your business requirements.

    // Start a stream as a host (basic mode)
[[AUIInteractionLiveManager defaultManager] createLive:AUIRoomLiveModeBase title:@"Live Room Title" notice:@"This is an announcement" currentVC:self completed:nil];

// Start a stream as a host (co-streaming mode)
[[AUIInteractionLiveManager defaultManager] createLive:AUIRoomLiveModeLinkMic title:@"Live Room Title" notice:@"This is an announcement" currentVC:self completed:nil];

// Join a stream
[[AUIInteractionLiveManager defaultManager] joinLiveWithLiveId:@"live_id" currentVC:self completed:nil];

Result

See Demos.

FAQ

For more information about AUIKits or for technical support, you can submit a ticket.

Previous：iOSNext：Landscape style