The AUI Kits low-code application solution provides UI components for audio and video applications in interactive streaming scenarios. You can reuse these functional modules to quickly build your interactive streaming application. This approach reduces development costs and time, improving your business results.
Scenario overview
The interactive streaming scenario includes a rich set of features, such as live streaming, recording and playback, interactive messages, and audio/video co-streaming. It is suitable for common live streaming business scenarios. This suite includes two sets of AUI components: Portrait Mode and Landscape Mode. The core difference between the two modes is the scenarios they are designed for. Portrait mode is designed for entertainment scenarios and offers direct, real-time interaction. Viewers can request to co-stream with the streamer. Streamers can start a live stream from a mobile device. Landscape mode is designed for more professional scenarios. Streamers must start the live stream from a PC and can share their screen and multimedia files. However, landscape mode only provides live comments for interaction. Based on these differences, you can choose the mode and features that best fit your live streaming needs. This topic describes each mode in detail.
Portrait mode
Scenarios
Scenario 1: E-commerce live streaming
The provided source code does not include this feature. For more information about how to implement it, see Use custom interactive messages to send gifts and display product cards. Streamers start a broadcast from devices such as mobile phones or all-in-one live streaming machines. They showcase product information from all angles to generate consumer interest. Viewers can co-stream to bargain or click product cards to make purchases. Real-Time Streaming (RTS) and interactive messages enable synchronized audio, video, and message interactions.
Scenario 2: Entertainment live streaming
Streamers start a broadcast from devices such as a mobile phone or an all-in-one live streaming machine to interact with viewers or other streamers.
Supports co-streaming between streamers and viewers.
Supports adjusting retouching effects.
Provides stable and smooth live streaming services that support millions of concurrent stream ingests and tens of millions of concurrent viewers.
Supports recording and playback.
Supported platforms
In portrait mode, the streamer client supports Android and iOS, and the viewer client supports Android, iOS, Web, and WeChat mini programs.
Style | Platform | Role | Development reference |
Portrait mode | Android |
| |
iOS |
| ||
Web | Viewer client | ||
WeChat mini program | Viewer client |
Demonstration
Live channel list
After a user logs on, the application displays a list of all live channels, including their titles, thumbnails, streamer nicknames, statuses, and popularity.
Create a live channel on the streamer client
When you create a live channel, you can set its title and announcement. You can also set the channel properties. If you select a basic live stream, viewers cannot co-stream. If you select a co-streaming live channel, viewers can request to co-stream with the streamer.
Start a live stream on the streamer client
After a streamer starts a live stream in a channel, the following features are supported.
Adjust stream effects: You can adjust retouching effects and the camera direction.
Chat interaction: You can mute all viewers.
Co-streaming management: You can accept or reject co-streaming requests. During co-streaming, you can manage a viewer's devices, such as their camera and microphone.
Watch a live stream or playback on the viewer client
After a viewer enters a live channel, the following features are supported.
Watch in the live channel: If the live stream has ended, you can watch the playback.
Chat interaction.
Watch on a mobile device.
Watch on the Web.
Watch on a WeChat mini program.
Audio/video co-streaming between streamer and viewer
A co-streaming live channel supports the following features.
A viewer can request to co-stream. If the streamer agrees, the viewer joins the stream after a second confirmation.
During co-streaming, you can adjust retouching effects and manage devices, such as the camera and microphone.
Landscape mode
Scenarios
Scenario: Enterprise live streaming
The speaker starts a broadcast from a device, such as a computer or an all-in-one live streaming machine, and presents to the audience using screen sharing. Viewers can interact with the speaker through live comments.
Supports viewing on multiple clients, which improves broadcast reach.
Supports recording and playback for redistribution during and after the live stream.
Supports adjusting retouching effects.
Supported platforms
In landscape mode, the streamer client supports Windows and macOS, and the viewer client supports Android, iOS, and Web.
Style | Platform | Role | Development reference |
Landscape mode | Windows | Streamer client | |
macOS | Streamer client | ||
Android | Viewer client | ||
iOS | Viewer client | ||
Web | Viewer client |
Demonstration
Get the live stream link on the streamer client
For landscape mode, the streamer must first have the macOS streaming assistant. They can then paste the link into the application and click to enter the live channel.
Start a live stream on the streamer client
Unlike portrait mode, landscape mode includes a screen sharing feature that lets you capture a specific desktop screen for stream ingest.
Watch a live stream or playback on the viewer client
Viewing is supported on mobile devices and PC web clients.
Runtime environment
Role | Platform | Compatibility requirements | Recommended devices | ||||
Streamer | Android | Supports Android 5 and later. | Use mid-range to high-end Android devices with 3 GB or more of memory. | ||||
iOS | Supports iPhone or iPad with iOS 10 or later. |
| |||||
Windows | Supports 64-bit versions of Windows 10 or later. |
| |||||
macOS | Supports macOS 10.14 or later. | Use models released in 2017 or later. | |||||
Viewer | Android | Supports Android 5 and later. | Use mid-range to high-end Android devices with 3 GB or more of memory. | ||||
iOS | Supports iPhone or iPad with iOS 10 or later. |
| |||||
H5 | For Real-Time Streaming (RTS) playback, the minimum required browser versions are as follows:
| For the best experience, use the H5 viewer on the following devices:
| |||||
Web | For Real-Time Streaming (RTS) playback, the minimum required browser versions are as follows:
| For the best experience, use the latest official version of Google Chrome on a desktop computer to access the web viewer. | |||||
WeChat Mini Program |
| ||||||
Function introduction
Feature | Description | ||||||
ApsaraVideo Live | Supports protocols such as Real-Time Streaming (RTS), standard live streaming with FLV and HLS, and playback. | ||||||
Audio and video co-streaming | A streamer can invite a viewer to co-stream, or a viewer can request to co-stream with the streamer. Other users can watch the co-stream in real time. | ||||||
Retouching and effects | Supports features such as retouching, filters, stickers, and background removal to enhance the stream quality. | ||||||
Chat and live comments | Streamers and viewers in the live channel can interact with each other through text. | ||||||
Channel information | Displays the live channel's title, thumbnail, streamer nickname, and popularity score. | ||||||
Custom development | The source code for UI components is open. This lets integrators perform custom development as needed. | ||||||
Contact us
If you have questions about our products and solutions, or if you require technical support, submit a ticket.