Portrait style

Source code

Download source code

AUI style		Feature module		Source code URL
Interactive live streaming - portrait style		host client audience client		Download source code

Source code structure

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

Requirements

• Xcode 12.0 or later. We recommend that you use the latest stable version.

• CocoaPods 1.9.3 or later.

• A physical device running iOS 10.0 or later.

Prerequisites

• You have set up an AppServer and obtained a domain name. For instructions, see Server-side configuration and operation.

• You have obtained a license and License Key for the live push streaming and player features of ApsaraVideo SDK for media processing. For more information, see Manage License.

Run demo

1. After downloading the source code, navigate to the Example directory. Run the command pod install --repo-update to automatically install the dependencies.

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

   1. For Team, select your developer account.

   2. The Bundle Identifier must be a unique identifier for your app.

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

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

5. Open the Source/InteractionLive/AUIInteractionLiveManager.m file in Xcode. Change the value of kLiveServiceDomainString to your AppServer domain in Server-side configuration and operation.

   static NSString * const kLiveServiceDomainString = @"your-appserver-domain";

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

Quick integration

This section shows you how to quickly integrate AUIInteractionLive into your app to implement interactive live streaming.

Import source code

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

2. Modify your Podfile to include the following dependencies:

   • AliVCSDK_InteractiveLive: The ApsaraVideo SDK for media processing for interactive live streaming. For more information, see For iOS.

   • AUIFoundation: Basic UI components.

   • AUIMessage: The interactive messaging component.

   • AUIBeauty: The beauty filter UI component. Integration is optional.

   • AUIInteractionLive: The source code for the portrait style UI component for interactive live streaming. You can modify the component code to meet your specific needs.

     Integrate the version of the ApsaraVideo SDK for media processing that fits your use case. We recommend using the latest version. For more information, see SDK Selection and Download.

     # iOS 10.0 or later is required.
     platform :ios, '10.0'
     
     target 'Your App Target' do
         # If your app also needs short-form video editing features, you can use the full-featured ApsaraVideo SDK for media processing (AliVCSDK_Standard). 
         # Replace all instances 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 documentation link above.
         pod 'AliVCSDK_InteractiveLive', '~> x.x.x'
     
         # Basic UI components
         pod 'AUIFoundation/All', :path => "./AUIInteractionLive/AUIBaseKits/AUIFoundation/"
     
         # Interactive messaging component
         pod 'AUIMessage/AliVCIM', :path => "./AUIInteractionLive/AUIBaseKits/AUIMessage/"
         
         # Beauty filter UI component, with three integration options
         # 1. If you are using AliVCSDK_Standard for media processing, 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/"
         
         # Interactive live streaming portrait style UI component. If you are using AliVCSDK_Standard, 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

  • In Build Settings > Linking > Other Linker Flags, add -ObjC.

  • In Build Settings > Build Options, set Enable Bitcode to NO.

• Open your project's Info.plist file and add the NSCameraUsageDescription and NSMicrophoneUsageDescription permissions.

  <key>NSCameraUsageDescription</key>
  <string>The app needs to access your camera for live streaming.</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>The app needs to access your microphone for live streaming.</string>

• To allow live streaming to continue when the app enters the background, enable Background Modes in Xcode. On the Signing & Capabilities tab of your project, add the Background Modes capability and select the Audio, AirPlay, and Picture in Picture option.

• Configure the license. For more information, see For iOS.

API calls

• After deploying your AppServer, find the AUIInteractionLiveManager.m file and set kLiveServiceDomainString to your AppServer's domain name:

  // AUIInteractionLiveManager.m
  
  // After deploying the AppServer, update the AppServer domain name.
  static NSString * const kLiveServiceDomainString =  @"your-appserver-domain";

• Initialize the SDK

  • Before using any SDK features, you must import the header file and register the SDK.

  • AUI components require a navigation controller for page transitions. Therefore, you must initialize the SDK and set a navigation controller after your app launches. We recommend using AVNavigationController. The following example shows how to initialize the SDK at startup without using a storyboard.

    #import "AUIInteractionLiveManager.h"
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        // Override point for customization after application launch.
    
        // Initialize here. Be sure to import the header file.
        [[AUIInteractionLiveManager defaultManager] setup];
    
        // App home page
        AUIHomeViewController *liveVC = [AUIHomeViewController new];
    
        // A navigation controller is required for page transitions. AVNavigationController is recommended.
        // If you use the system's UINavigationController as the app's navigation controller, you must:
        // 1. Hide the navigation bar: self.navigationBar.hidden = YES
        // 2. In the live room (AUILiveRoomAnchorViewController and AUILiveRoomAudienceViewController), disable the swipe-right-to-close gesture.
        AVNavigationController *nav =[[AVNavigationController alloc]initWithRootViewController:liveVC];
        [self.window setRootViewController:nav];
        [self.window makeKeyAndVisible];
    
        // Your other initializations...
        
        return YES;
    }

• Users must be logged in to start or watch a live stream. After a user logs in to their account, pass their user information to the SDK by setting the current user's account as follows:

  // This should be done after login.
  // If the user does not need to log in again at this launch (e.g., token has not expired), assign values after loading the logged-in user's data.
  
  AUIRoomAccount *account = [AUIRoomAccount new];
  account.myInfo.userId = @"current_user_id";
  account.myInfo.avatar = @"current_user_avatar_url";
  account.myInfo.nickName = @"current_user_nickname";
  account.myToken = @"current_user_token";   // Used for server-side user validation
  [[AUIInteractionLiveManager defaultManager] setMyAccount:account];

• Enter a live room

  After completing the previous steps, you can use the AUIInteractionLiveManager interface to quickly implement features like starting or joining a live stream. You can also modify the source code to meet your specific needs.

  // Start a broadcast as a host (basic mode)
  [[AUIInteractionLiveManager defaultManager] createLive:AUIRoomLiveModeBase title:@"Live Room Title" notice:@"This is an announcement" currentVC:self completed:nil];
  
  // Start a broadcast as a host (co-hosting mode)
  [[AUIInteractionLiveManager defaultManager] createLive:AUIRoomLiveModeLinkMic title:@"Live Room Title" notice:@"This is an announcement" currentVC:self completed:nil];
  
  // Join a live stream
  [[AUIInteractionLiveManager defaultManager] joinLiveWithLiveId:@"live_stream_id" currentVC:self completed:nil];

Results

See Demo Display.

FAQ

For additional support with AUI Kits, please submit a ticket.