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 |
|
||||||
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
-
After downloading the source code, navigate to the
Exampledirectory. Run the commandpod install --repo-updateto automatically install the required SDKs. -
In Xcode, open the AUILiveDemo.xcworkspace project file. In Signing & Capabilities, set your Team and Bundle Identifier.
-
Team refers to your developer Apple ID.
-
The Bundle Identifier is your app's unique identifier.
-
-
Place the license file from Create SDK License in the
Example/AUILiveDemo/directory and rename it tolicense.crt. -
In the
AUILiveDemo/Info.plistfile, setAlivcLicenseKeyto the License Key from Create SDK License. -
In Xcode, open
Source/EnterpriseLive/AUIEnterpriseLiveManager.mand setkLiveServiceDomainStringto your AppServer domain from Server configuration and running.static NSString * const kLiveServiceDomainString = @"Your AppServer domain"; -
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
-
To import AUIEnterpriseLive, download the repository and copy the
iOSfolder into your app's code directory. Rename the folder toAUIEnterpriseLiveand place it at the same level as your Podfile. You can delete theExampledirectory. -
Modify your Podfile to include the following dependencies:
-
AliVCSDK_InteractiveLive: The audio/video client SDK for interactive live streaming. You can also use
AliVCSDK_Standard. For details, see iOS. -
AUIFoundation: Provides basic UI components.
-
AUIMessage: The interactive messaging component.
-
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
-
-
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.mand setkLiveServiceDomainStringto 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
setupmethod 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.