Landscape style

更新时间:
复制 MD 格式

This guide explains how to integrate the AUIKits landscape style component for interactive live streaming on iOS, covering procedures, key considerations, and code samples. For more information about the use cases for landscape style and the differences between landscape and portrait styles, see Landscape Style.

Source code

Download source code

AUI style

Feature module

Source code repository

Interactive live streaming - landscape style

  • audience client

Download

Directory structure

├── iOS // Root directory for the iOS platform
│ ├── AUIEnterpriseLive.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. The latest official version is recommended.

  • 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 Server configuration and running.

  • Obtain the License and License Key for the audio/video client SDK. The license must include authorization for both stream publishing and the player. For instructions, see Manage License.

Run the demo

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

  2. In Xcode, open the AUILiveDemo.xcworkspace project file. In Signing & Capabilities, set your Team and Bundle Identifier.

    1. Team refers to your developer Apple ID.

    2. The Bundle Identifier is your app's unique identifier.

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

  4. In the AUILiveDemo/Info.plist file, set AlivcLicenseKey to the License Key from Create SDK License.

  5. In Xcode, open Source/EnterpriseLive/AUIEnterpriseLiveManager.m and set kLiveServiceDomainString to your AppServer domain from Server configuration and running.

    static NSString * const kLiveServiceDomainString = @"Your AppServer domain";
  6. Build and run the project on a physical device.

Quick integration

This section explains how to integrate the AUIEnterpriseLive component to add a landscape-style interactive live streaming feature to your app.

Import source code

  1. To import AUIEnterpriseLive, download the repository and copy the iOS folder into your app's code directory. Rename the folder to AUIEnterpriseLive and place it at the same level as your Podfile. You can delete the Example directory.

  2. Modify your Podfile to include the following dependencies:

    1. AliVCSDK_InteractiveLive: The audio/video client SDK for interactive live streaming. You can also use AliVCSDK_Standard. For details, see iOS.

    2. AUIFoundation: Provides basic UI components.

    3. AUIMessage: The interactive messaging component.

    4. AUIEnterpriseLive: The source code for the landscape style UI component for interactive live streaming. You can modify the component code to fit your business needs.

      Integrate the audio/video client SDK that best fits your business scenario. We recommend using the latest version. For details, see SDK selection and download.

      # Requires iOS 10.0 or later.
      platform :ios, '10.0'
      
      target 'Your App Target' do
          # If your app also requires short video editing features, you can use the full-featured audio/video client SDK (AliVCSDK_Standard). To do so, 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 information, see the documentation link above.
          pod 'AliVCSDK_InteractiveLive', '~> x.x.x'
          
          # Basic UI components
          pod 'AUIFoundation/All', :path => "./AUIEnterpriseLive/AUIBaseKits/AUIFoundation/"
      
          # Interactive messaging component
          pod 'AUIMessage/AliVCIM', :path => "./AUIEnterpriseLive/AUIBaseKits/AUIMessage/"
          
          # The landscape style UI component for interactive live streaming. If you are using the AliVCSDK_Standard audio/video client SDK, replace AliVCSDK_InteractiveLive with AliVCSDK_Standard.
          pod 'AUIEnterpriseLive/AliVCSDK_InteractiveLive',  :path => "./AUIEnterpriseLive/"
      
      end
  3. Run the following command to complete the integration.

    pod install --repo-update

Project configuration

  • Build settings

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

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

  • Configure the license as instructed in iOS.

API calls

  • Update the AppServer domain name

    After deploying your AppServer, open AUIEnterpriseLiveManager.m and set kLiveServiceDomainString to your AppServer domain:

    // AUIEnterpriseLiveManager.m
    
    // After deploying your AppServer, update its domain name here.
    static NSString * const kLiveServiceDomainString = @"Your AppServer domain";
  • Initialize the SDK

    Call the setup method to register the component before use. Ensure you import the header file.

    #import "AUIEnterpriseLiveManager.h"
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
     // Override point for customization after application launch.
    
     // Initialize the component here. Remember to import the header file.
     [[AUIEnterpriseLiveManager defaultManager] setup];
    
     // App's home page
     AUIHomeViewController *liveVC = [AUIHomeViewController new];
    
     // A navigation controller is required for page transitions. We recommend AVNavigationController.
     AVNavigationController *nav =[[AVNavigationController alloc]initWithRootViewController:liveVC];
     [self.window setRootViewController:nav];
     [self.window makeKeyAndVisible];
    
     // Your other initialization code...
     
     return YES;
    }
  • Set the current user

    Users must be logged in to start or watch a live stream. After a user logs in, initialize the session's current user as follows:

    // Assign the user information after login.
    // If the user does not need to log in again on this launch (for example, if the token has not expired), you can assign this information after loading the user's session.
    
    AUIRoomUser *me = [AUIRoomUser new];
    me.userId = @"Current logged-in user ID";
    me.avatar = @"Current logged-in user avatar URL";
    me.nickName = @"Current logged-in user nickname";
    me.token = @"Current logged-in user token"; // Used for server-side user validation.
    [[AUIEnterpriseLiveManager defaultManager] setCurrentUser:me];
  • Join a live room

    Use the AUIEnterpriseLiveManager interface to join a live room.

    // Join a live room
    [[AUIEnterpriseLiveManager defaultManager] joinLiveWithLiveId:@"Live ID" currentVC:self completed:nil];

Result

See Effects.

FAQ

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