UIKit Component: Livestream components are built on top of the social.plus SDK, providing ready-to-use live video broadcasting and viewing UI with full data management handled automatically.
.png?fit=max&auto=format&n=Whepx2DgDzjvHcd8&q=85&s=a8651e1aaa0802192f782616280d1ffc)
Feature Overview
The Livestream feature in social.plus UIKit v4 empowers users to broadcast and engage with live video content seamlessly. It provides a suite of components designed to facilitate the creation, viewing, and management of live streams within your application, offering comprehensive tools for both content creators and viewers.Key Features
Stream Creation
Live stream setup and broadcasting
- Target audience selection (community or timeline)
- Stream title, description, and thumbnail setup
- Real-time broadcasting controls
- Camera switching and stream management
Co-Streaming
Multi-broadcaster collaboration
(community only)
(community only)
- Invite co-hosts to join your stream
- Co-host management and controls
- Real-time multi-broadcaster stage
- Audio/video controls for each broadcaster
- AI-powered content moderation
Stream Viewing
Live and recorded stream playback
- Real-time live stream viewing
- Recorded stream playback for ended streams
- Interactive viewer interface
- Stream status and engagement features
- Live Chat (community only)
Stream Management
Broadcast control and administration
- Stream termination handling
- Moderation and safety controls
- Stream status management
- Co-host permission management
Audience Targeting
Flexible content distribution
- Community-specific broadcasting
- Personal timeline streaming
- Audience selection workflows
Co-hosting
Multi-host broadcasting
- Invite co-hosts to join the stream
- Real-time co-host participant streaming
- Co-host permission controls
- Collaborative stream management
Viewer Insights
Real-time audience visibility
- Real-time viewer count display
- Who’s watching list to see active viewers
- Live audience engagement tracking
- Viewer presence monitoring
Built-in Analytics
Automatic watch time tracking
- Watch minutes collection for viewers
- Pause/resume aware tracking
- No additional implementation required
Livestream Analytics
UIKit automatically handles all analytics tracking including:- Watch Session Creation: Sessions are created when viewers enter the room player page
- Accurate Duration Tracking: Only counts actual watching time (paused/buffering time is excluded)
- Role Transition Handling: Automatically stops tracking when a viewer becomes a co-host
- Network Resilient Sync: Data is stored locally and synced with retry logic
Platform Support
| Feature | iOS | Android | Web | Flutter | React Native |
|---|---|---|---|---|---|
| Create Live Stream Post | ✅ | ✅ | ✅(desktop) | - | ✅ |
| Stream Viewing | ✅ | ✅ | ✅ | - | ✅ |
| Co-Streaming (Community) | ✅ | ✅ | ✅ | - | - |
| Live Stream Chat & Moderation (Community) | ✅ | ✅ | ✅ | - | - |
| Watching Now Count (Community) | ✅ | ✅ | ✅ | - | - |
| Livestream Analytics (Watch Minutes) | ✅ | ✅ | ✅ | - | - |
Livestream creation and co-host streaming on web is supported only on desktop view. On mobile web, only viewing livestreams is supported.
Implementation Guide
- Stream Creation
- Co-Streaming
- Stream Viewing
- Stream Management
Live stream creation and broadcasting setupStream Creation components enable users to set up and broadcast live video content with comprehensive controls for targeting, customization, and real-time management.
Livestream Target Selection Page
The target selection page allows users to choose where their live stream will be broadcasted - either to a specific community or their personal timeline.Features
| Feature | Description |
|---|---|
| Target Selection | Choose between community or personal timeline broadcasting |
| Community Browsing | Browse and select specific communities for broadcasting |
Required Properties
| Property | Type | Description |
|---|---|---|
| None | - | Page requires no mandatory properties |
Customization Options
| Config ID | Type | Description |
|---|---|---|
livestream_post_target_selection_page/*/* | Page | Customize page theme |
livestream_post_target_selection_page/*/close_button | Element | Customize close button image |
livestream_post_target_selection_page/*/my_timeline_text | Element | Customize timeline option text |
livestream_post_target_selection_page/*/title | Element | Customize page title text |
Code Examples
Livestream Creation Page
The creation page enables users to set up their live stream by adding title, description, and thumbnail before starting the broadcast. Supports both solo broadcasting and co-streaming with invited co-hosts.Features
| Feature | Description |
|---|---|
| Stream Setup | Add title, description, and thumbnail for the live stream |
| Camera Controls | Switch between front and back cameras |
| Broadcasting Controls | Start, pause, and end live stream broadcasting |
| Co-Host Management | Invite co-hosts to join your stream |
| Co-Host Stage | View and manage active co-hosts during broadcast |
| Real-time Preview | Live preview of stream content before broadcasting |
| Viewer Count | Real-time display of total number of users currently watching the stream |
| Who’s Watching List | View the list of users currently watching the live stream |
Required Properties
| Property | Type | Description |
|---|---|---|
targetId | String | The ID of the target (community ID or user ID) |
targetType | AmityPost.TargetType | Type of target (community or user) |
community | AmityCommunity? | Community object (optional, for community streams) |
Customization Options
| Config ID | Type | Description |
|---|---|---|
create_livestream_page/*/* | Page | Customize page theme |
create_livestream_page/*/start_livestream_button | Element | Customize start stream button |
create_livestream_page/*/add_thumbnail_button | Element | Customize thumbnail selection button |
create_livestream_page/*/switch_camera_button | Element | Customize camera switch button |
create_livestream_page/*/invite_co_host_button | Element | Customize invite co-host button |
create_livestream_page/*/microphone_button | Element | Customize microphone toggle button |
create_livestream_page/*/camera_toggle_button | Element | Customize camera on/off toggle button |
create_livestream_page/*/moderation_menu_button | Element | Customize moderation menu access button |
create_livestream_page/*/co_host_stage | Component | Customize co-host video stage layout |
create_livestream_page/*/end_live_stream_button | Element | Customize end stream button |
create_livestream_page/*/live_timer_status | Element | Customize live timer display |
create_livestream_page/*/invite_co_host_button | Element | Customize invite co-host button |
Code Examples
Navigation Behavior
Related Components
Posts & Media
Post Components Post creation and media management for livestream posts
Social Feeds
Feed Components Livestream post display and interaction in social feeds
Communities
Community Features Community-based livestream broadcasting and management
Users & Profiles
User Management User profile integration with livestream content
Comments & Reactions
Interaction Components Real-time engagement during live streams
Content Moderation
Moderation Tools Livestream content moderation and safety controls