Livestream - social.plus

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.

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

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

Stream Management

Broadcast control and administration

Stream termination handling
Moderation and safety controls
Stream status management

Audience Targeting

Flexible content distribution

Community-specific broadcasting
Personal timeline streaming
Audience selection workflows

Platform Support

Feature	iOS	Android	Web	Flutter	React Native
Create Live Stream Post	✅	✅	-	-	-
View Live Stream Post	✅	✅	✅	-	-
Stream Management	✅	✅	✅	-	-
Audience Targeting	✅	✅	-	-	-

Implementation Guide

Stream Creation
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
Audience Preview	Preview potential reach and audience for selected target

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

let page = AmityLivestreamPostTargetSelectionPage()
let viewController = AmitySwiftUIHostingController(rootView: page)
navigationController?.pushViewController(viewController, animated: true)

Livestream Creation Page

The creation page enables users to set up their live stream by adding title, description, and thumbnail before starting the broadcast.

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
Real-time Preview	Live preview of stream content before broadcasting

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/*/end_live_stream_button`	Element	Customize end stream button
`create_livestream_page/*/live_timer_status`	Element	Customize live timer display

Code Examples

// For community stream
let creationPage = AmityCreateLivestreamPage(
    targetId: "community-id", 
    targetType: .community
)
let viewController = AmitySwiftUIHostingController(rootView: creationPage)
navigationController?.pushViewController(viewController, animated: true)

// For user timeline stream
let timelineStream = AmityCreateLivestreamPage(
    targetId: "user-id", 
    targetType: .user
)

// Livestream Target Selection Navigation
class CustomLivestreamPostTargetSelectionPageBehavior: AmityLivestreamPostTargetSelectionPageBehavior {
    override func goToLiveStreamComposerPage(context: AmityLivestreamPostTargetSelectionPageBehavior.Context) {
        // Navigate to livestream creation page
        let creationPage = AmityCreateLivestreamPage(
            targetId: context.targetId, 
            targetType: context.targetType
        )
        let viewController = AmitySwiftUIHostingController(rootView: creationPage)
        navigationController?.pushViewController(viewController, animated: true)
    }
}

// Setup custom behavior
func setupLivestreamTargetSelectionBehavior() {
    let customBehavior = CustomLivestreamPostTargetSelectionPageBehavior()
    AmityUIKit4Manager.behaviour.liveStreamPostTargetSelectionPageBehavior = customBehavior
}

Live stream viewing and playback interfacesStream Viewing components provide comprehensive interfaces for watching live broadcasts and playing back recorded streams with interactive features and controls.

Livestream Player Page

The player page provides viewers with the interface to watch live or recorded streams, supporting real-time viewing and playback of previously ended streams.

Features

Feature	Description
Live Viewing	Real-time live stream viewing with minimal latency
Recorded Playback	Playback of previously ended live streams
Interactive Controls	Stream controls, volume, and playback options
Stream Information	Display stream title, description, and metadata

Required Properties

Property	Type	Description
`post`	`AmityPost`	The livestream post object to display

Customization Options

Config ID	Type	Description
`livestream_player_page//`	Page	Customize player page theme
`livestream_player_page/*/play_button`	Element	Customize play/pause button
`livestream_player_page/*/volume_control`	Element	Customize volume controls
`livestream_player_page/*/fullscreen_button`	Element	Customize fullscreen toggle
`livestream_player_page/*/stream_info`	Component	Customize stream information display

Code Examples

let livestreamPlayer = AmityLivestreamPlayerPage(post: post)
let viewController = AmitySwiftUIHostingController(rootView: livestreamPlayer)
navigationController?.pushViewController(viewController, animated: true)

// Handle livestream player navigation
func handleLivestreamPlayerNavigation() {
    // Player navigation typically handled internally
    // Custom actions can be implemented for stream end, errors, etc.
}

func handleStreamEnd() {
    // Navigate back or to stream summary
    navigationController?.popViewController(animated: true)
}

func handleStreamError(error: Error) {
    // Show error alert and navigate back
    let alert = UIAlertController(
        title: "Stream Error",
        message: error.localizedDescription,
        preferredStyle: .alert
    )
    alert.addAction(UIAlertAction(title: "OK", style: .default) { _ in
        self.navigationController?.popViewController(animated: true)
    })
    present(alert, animated: true)
}

Stream termination, moderation, and administrative controlsStream Management components handle the administrative aspects of live streaming, including stream termination, moderation actions, and post-stream workflows.

Livestream Terminated Page

The terminated page is displayed when a live stream ends, either by the host or due to moderation actions, providing appropriate messaging and next steps.

Features

Feature	Description
Termination Messaging	Display appropriate messages for different termination reasons
Action Options	Provide relevant actions post-termination (restart, view recording, etc.)
Stream Summary	Show stream statistics and performance metrics
Navigation Controls	Options to return to feed or create new stream

Required Properties

Property	Type	Description
`livestreamScreenType`	`LivestreamScreenType`	Type of termination screen to display

Customization Options

Config ID	Type	Description
`livestream_terminated_page//`	Page	Customize terminated page theme
`livestream_terminated_page/*/livestream_terminated_action_button`	Element	Customize action button appearance
`livestream_terminated_page/*/termination_message`	Element	Customize termination message text
`livestream_terminated_page/*/stream_summary`	Component	Customize stream summary display

Code Examples

let terminatedPage = AmityLivestreamTerminatedPage()
let viewController = AmitySwiftUIHostingController(rootView: terminatedPage)
navigationController?.pushViewController(viewController, animated: true)

// Handle post-termination navigation
func handleStreamTerminationActions(action: StreamTerminationAction) {
    switch action {
    case .restart:
        // Navigate to new stream creation
        let targetSelectionPage = AmityLivestreamPostTargetSelectionPage()
        let viewController = AmitySwiftUIHostingController(rootView: targetSelectionPage)
        navigationController?.pushViewController(viewController, animated: true)
    case .viewRecording:
        // Navigate to recorded stream if available
        if let recordedPost = getRecordedStream() {
            let playerPage = AmityLivestreamPlayerPage(post: recordedPost)
            let viewController = AmitySwiftUIHostingController(rootView: playerPage)
            navigationController?.pushViewController(viewController, animated: true)
        }
    case .returnToFeed:
        // Navigate back to main feed
        navigationController?.popToRootViewController(animated: true)
    }
}

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

Implementation Strategy: Start with the Livestream Target Selection Page to establish audience targeting workflows, then implement the Creation Page for stream setup and broadcasting controls. Add the Player Page for viewer experiences and ensure proper termination handling with the Terminated Page. Consider implementing real-time moderation features for live content safety and provide clear navigation flows between stream creation, viewing, and post-stream actions. Focus on optimizing streaming quality and providing responsive controls for both broadcasters and viewers.

Powered by

Getting Started

Customization

Components

Release Notes

Support

​Feature Overview

​Key Features

Stream Creation

Stream Viewing

Stream Management

Audience Targeting

​Platform Support

​Implementation Guide

​Livestream Target Selection Page

​Features

​Required Properties

​Customization Options

​Code Examples

​Livestream Creation Page

​Features

​Required Properties

​Customization Options

​Code Examples

​Navigation Behavior

​Livestream Player Page

​Features

​Required Properties

​Customization Options

​Code Examples

​Navigation Behavior

​Livestream Terminated Page

​Features

​Required Properties

​Customization Options

​Code Examples

​Navigation Behavior

​Related Components

Posts & Media

Social Feeds

Communities

Users & Profiles

Comments & Reactions

Content Moderation

Feature Overview

Key Features

Platform Support

Implementation Guide

Livestream Target Selection Page

Features

Required Properties

Customization Options

Code Examples

Livestream Creation Page

Features

Required Properties

Customization Options

Code Examples

Navigation Behavior

Livestream Player Page

Features

Required Properties

Customization Options

Code Examples

Navigation Behavior

Livestream Terminated Page

Features

Required Properties

Customization Options

Code Examples

Navigation Behavior

Related Components