More than ever, videos are increasingly dominating mobile screens. From fun short-form clips to promote new products to live-streamed talk shows to educate your customers, videos have the potential to transform the way customers experience your brand.

To broadcast a live stream video, we have provided a convenient broadcaster tool called AmityStreamBroadcaster. You will need to import AmityLiveVideoBroadcastKit.framework into your app.

Authorize the required permissions

AmityStreamBroadcaster requires the following permissions to work properly.

1. Camera access

2. Microphone access

Before using AmityStreamBroadcaster, please make sure these permissions are already granted.

Here are the steps to ask for the permissions.

1. Add NSCameraUsageDescription to your app's info.plist.

2. Add NSMicrophoneUsageDescription to your app's info.plist.

3. Call AVCaptureDevice.requestAccess(for: .video, completion: ...)

4. Call AVAudioSession.sharedInstance().requestRecordPermission(_:)

Create an AmityStreamBroadcaster

You can create broadcaster instance by providing AmityClient.

broadcaster = AmityStreamBroadcaster(client: client)

Prepare a configuration

Before going live, you will need to set up the broadcaster session by creating AmityStreamBroadcasterConfiguration. This configuration will be applied for the next live session.

// Prepare configs
let config = AmityStreamBroadcasterConfiguration()
config.canvasFitting = .fill
config.bitrate = 3_000_000 // 3mbps
config.frameRate = .fps30

// Setup the next live session with the given configs.
broadcaster.setup(with: config)

Preview the video

The broadcaster object provides "preview view". After finish setting up the broadcaster, you then can take the preview view to attach into your screen.

// Attach the preview view to show on the screen.
myView.addSubview(broadcaster.previewView)

Setup video resolution

You can set up video resolution anytime "before" going live. This setting will affect both the rendering of preview view, and the resolution of live stream session.

// This settings apply the following changes.
// 1. The preview view to render at 720p.
// 2. The live stream session to broadcast at 720p.
broadcaster.videoResolution = CGSize(width: 1280, height: 720)

Start live stream session

To begin broadcasting the live stream, call

broadcaster.startPublish(title: "title", description: "description")

Stop live stream session

To stop broadcasting the live stream, call

broadcaster.stopPublish()

Switch camera position

By default, the broadcaster will use the back camera. However, you can switch camera position anytime by calling

// Use the back camera
broadcaster.cameraPosition = .back

// Use the front camera
broadcaster.cameraPosition = .front

Observe a broadcaster state

To observe a broadcaster state, we provide a delegate object that you can set to listen to broadcaster's events.

broadcaster.delegate = self

AmityStreamBroadcasterState represents all the possible states.

• .idle indicates a state of stream in an idle state.

• .connecting indicates a state of stream that it's connecting to the stream server.

• .connected indicates a state of stream that it's connected to the stream server.

• .disconnected indicates a status of stream that it's disconnected.

The code below shows an example of printing out the state of broadcaster, when it changes.

extension MyViewController: AmityStreamBroadcasterDelegate {
    
    func amityStreamBroadcasterDidUpdateState(_ broadcaster: AmityStreamBroadcaster) {
        print(broadcaster.state)
    }
    
}

iOS ​ Android ​ Web TypeScript React NativeFlutter

Amity video SDK allows engineers to integrate live-streaming capabilities into their applications. The live stream SDK simplifies mobile app development for iOS and Android by offering a common, cross-platform API to capture, encode and stream live video and audio, without the hassle of deploying and maintaining your own infrastructure.

Amity video SDK allows you to:

• Implement and enable professional low-latency live streaming capabilities of up to four hours

• Provision a playback video when streaming ends

• Support high volume concurrent viewers simultaneously

• Receive notifications when a live stream has started

• Manage and run multiple live streams in parallel

• Manage & moderate live streams via our admin panel

• Work across platforms, with SDK's available for both Android and iOS devices

More information on the implementation of these SDK’s can be found under each of the following sections, for the respective platform (iOS, Android, Web).

This functionality is not currently supported for IOS but will be coming soon! We will update the relevant sections accordingly

Live streams and playback videos information are stored in AmityStream. This stream objects reside in AmityStreamRepository. To start working with stream, first the app need to intialize the repository.

*Note : There is a limitation for the maximum concurrent live events. Please feel free to reach out to us at with your use-case and we will determine if the current limit can be raised.

Retrieve a stream object

Each stream object has a unique identifier. To retrieve a single stream object, call

• repository.getStreamById(_:)

This function returns a Live Object of AmityStream. The stream object contains essential data, for example, title and description.

Stream Status

Stream consists of many states. It can change from one state to another, depending on events and actions.

AmityStreamStatus represents a stream status. The following enum cases describe all the possible status of a stream.

• .idle indicates "a stream that has generated but no actions have been taken."

• .live indicates "a stream is currently being broadcasted."

• .ended indicates "a stream has ended broadcasting and in the progress of transforming to a recorded stream."

• .recorded indicates "a stream has ended broadcasting and has been transformed to a recorded stream."

You can check the status of a stream by calling .status.

Retrieve streams collection

To query streams collection, first you need to create a AmityStreamCollectionQuery.

Then call .getStreamsCollection(from:) with the query object that you've created.

• .getStreamsCollection(from: query)

This function returns the live collection of stream objects.

If your app needs stream collections in many parts of the app. We recommend to maintain only one collection for each query, in an application scope. And use it as a single source of truth.

Play a live stream

Play recorded videos

Live streams are recorded, and saved as files after the session ends. It would take some time for preparing recorded videos to be ready. You can observe the collection of stream that has recorded videos available.

Amity Video Player

Amity Video SDK includes AmityVideoPlayerKit.framework, a basic RTMP player to support live video functionality.

Amity Recorded Stream Player

This player is the part of the Amity Video SDK, built as a subclass of AVPlayer for playing recorded livestream videos. It works seamlessly with AVPlayerViewController.

More than ever, videos are increasingly dominating mobile screens. From fun short-form clips to promote new products to live-streamed talk shows to educate your customers, videos have the potential to transform the way customers experience your brand.

This functionality is not currently supported for Android but will be coming soon! We will update the relevant sections accordingly

Live streams and playback videos information are stored in AmityStream. These stream objects reside in AmityStreamRepository. To start working with stream, first, the app needs to initialize the repository.

Note : There is a limitation for the maximum number of concurrent live events. Reach out to us at with your use-case and we will determine if the current limit can be raised.

Retrieve a stream object

Each stream object has a unique identifier. To retrieve a single stream object.

This function returns a flowable of AmityStream. The stream object contains essential data, for example, title and description.

Stream Status

Stream consists of many states. It can change from one state to another, depending on events and actions.

Amitystream.Status represents a stream status. The following enum cases describe all the possible statuses of a stream.

• .IDLE indicates "a stream that has generated but no actions have been taken."

• .LIVE indicates "a stream is currently being broadcasted."

• .ENDED indicates "a stream has ended broadcasting and in the process of transforming to a recorded stream."

• .RECORDED indicates "a stream has ended broadcasting and has been transformed to a recorded stream."

You can check the status of a stream by calling stream.getStatus().

Retrieve a stream collection

AmityStreamRepository provides a convenient method getStreamsand also call setStatus(statuses: Array<Amitystream.Status>) to query live streams. We provide enums of stream status as AmityStream.Status

You can observe changes in a collection as per the defined statuses.

Play a live stream

Setup

You simply need to include this dependency to your project in build.gradle in the application l

Inside your Application class, in the application initialization process, you need to register the video player SDK to the core SDK by calling.

SDK provides AmityVideoPlayer with a capability to play a Live stream based on streamId

Play a recorded stream

Playing stream in Jetpack Compose

By inflating AmityVideoPlayer as AndroidView in Compose, it can seamlessly play live or recorded stream video within the Composable function

To broadcast a live stream video, we provide a convenient broadcaster tool called AmityStreamBroadcaster. We now only support 16:9 video ratio with the following resolution representing by the enum AmityStreamBroadcastResolution:

• .SD_480P indicates a video with resolution 480x854 and video bitrate 1216 kpbs

• .HD_720P indicates a video with resolution 720x1280 and video bitrate 2496 kpbs

• .FHD_1080P indicates a video with resolution 1080x1920 and video bitrate 4992 kpbs

Setup

You simply need to include this dependency to your project in build.gradle in the application level.

Inside your Application class, in the application initialization process, you need to register the video publisher SDK to the core SDK by calling.

We highly recommend using Android's ConstraintLayout to construct our AmityCameraView Since we only support 16:9 video ratio, ConstratntLayout will ensure that the view will be drawn in the correct width and height.

Authorize the required permissions

AmityStreamBroadcaster requires the following permissions to work properly.

As per the required parameter by the aforementioned object to provide AmityCameraView , you will need to define the view in your Activity or Fragment layout by :

1. Camera access

2. Microphone access

Before using AmityStreamBroadcaster, please make sure these permissions are granted.

Create an AmityStreamBroadCaster Object

In order to create the object, we also provide the AmityStreamBroadCaster.Builder class to create and configure this object easily. It requires AmityCameraView as a parameter and AmityStreamBroadcasterConfig as a configurable value which will be explained in the following section.

Prepare a configuration

For configuration, we provide the AmityStreamBroadcasterConfiguration.Builder to construct the configuration conveniently. As we have mentioned above, We support SD_480P, HD_720P and, FHD_1080P resolutions. Orientations are relying on Android Configuration class, you may either choose Configuration.ORIENTATION_PORTRAIT or Configuration.ORIENTATION_LANDSCAPE .

Setup a layout

As per the required parameter by the aforementioned object to provide AmityCameraView , you need to define the view in your Activity or Fragment layout by :

We highly recommend using Android's ConstraintLayout to construct our AmityCameraView Since we only support 16:9 video ratio, ConstraintLayout ensures that the view will be drawn in the correct width and height.

Setup a layout in Jetpack Compose

In Jetpack Compose, inflate AmityCameraView as AndroidView and provide it to aforementioned object as below

Preview the video

To begin previewing the camera input call

Start live stream session

To begin broadcasting live stream call

Stop live stream session

To stop broadcasting live stream call

Switch camera position

By default, the broadcaster will use the back camera. However, you can switch camera position anytime by calling.

Observe a broadcasting state

To observe the status of a broadcast, we provide a function (flow) to observe any status changes and return as AmityStreamBroadcasterState . The possible statuses are :

• .IDLEindicates a status of stream in an idle state.

• .CONNECTINGindicates a status of stream that it's connecting to a rtmp server.

• .CONNECTEDindicates a status of stream that it's connected to a rtmp server.

• .DISNNECTEDindicates a status of stream that it's disconnected to a rtmp server. We also provide error information through an exception.

Live streams and playback videos information are stored in AmityStream. These stream objects reside in AmityStreamRepository. To start working with stream, first, the app needs to initialize the repository.

Note : There is a limitation for the maximum number of concurrent live events. Reach out to us at community.amity.co with your use-case and we will determine if the current limit can be raised.

Retrieve a stream object

Each stream object has a unique identifier. To retrieve a single stream object.

This function returns a flowable of AmityStream. The stream object contains essential data, for example, title and description.

Stream Status

Stream consists of many states. It can change from one state to another, depending on events and actions.

Amitystream.Status represents a stream status. The following enum cases describe all the possible statuses of a stream.

• .IDLE indicates "a stream that has generated but no actions have been taken."

• .LIVE indicates "a stream is currently being broadcasted."

• .ENDED indicates "a stream has ended broadcasting and in the process of transforming to a recorded stream."

• .RECORDED indicates "a stream has ended broadcasting and has been transformed to a recorded stream."

You can check the status of a stream by calling stream.getStatus().

Retrieve a stream collection

AmityStreamRepository provides a convenient method getStreamsand also call setStatus(statuses: Array<Amitystream.Status>) to query live streams. We provide enums of stream status as AmityStream.Status

You can observe changes in a collection as per the defined statuses.

Play a live stream and a recorded live stream

Setup

Run this command:

With Flutter:

 $ flutter pub add amity_video_player

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  amity_video_player: ^0.0.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:amity_video_player/amity_video_player.dart';

Configuration

To begin with you will need to setup the AmityVideoPlayerClient in the application level.

SDK provides AmityVideoPlayer with a capability to play a live stream or a recorded live stream by providing a streamId in AmityVideoContoller.

More than ever, videos are increasingly dominating mobile screens. From fun short-form clips to promote new products to live-streamed talk shows to educate your customers, videos have the potential to transform the way customers experience your brand.

In order to play a live stream or recorded live stream using the JS-SDK, we have implemented an internal player. This player allows developers to easily incorporate video playback functionality into their applications. To utilize this feature, developers can refer to the example code provided below, which demonstrates how to play the desired video with simplicity and efficiency.

In the example code mentioned above, developers are required to provide a streamId parameter to utilize the stream player functionality. This stream player is capable of playing both live streams and recorded live streams.

Recorded stream video refers to a previously streamed content that has concluded and has been recorded within the system.

This functionality is not currently supported for Flutter but will be coming soon! We will update the relevant sections accordingly

Browser Support

• Chrome: 38+

• Firefox: 42+

• Microsoft Edge: 13+

• Safari: 9+

• Opera: 25+

Since Amity Web SDK uses local cache for performance and user experience reason, server side rendering is not supported. To use Amity Web SDK with NextJS, Amity Web SDK must be imported using Dynamic Import with SSR disabled.

More than ever, videos are increasingly dominating mobile screens. From fun short-form clips to promote new products to live-streamed talk shows to educate your customers, videos have the potential to transform the way customers experience your brand.

Create a stream

To create a stream, follow the code below. This will return a LiveObject instance of the created StreamModel.

import { StreamRepository, StreamResolutions } from '@amityco/js-sdk'

const liveObject = StreamRepository.createStream({
  title: 'title',
  thumbnailFileId: 'fileId', // use FileRepository.createFile to upload the file and get the id
  description: 'description',
  resolution: StreamResolutions.HD,
  metadata: { customField: 'customValue' },
});

liveObject.on('dataUpdated', (stream) => {
  console.log(stream);
});

Delete a stream

To delete a stream, you will need the ID of the stream that you want to delete. The function will return true if successfully deleted, otherwise, it will throw an error.

import { StreamRepository } from '@amityco/js-sdk';

try {
  await StreamRepository.deleteStream('streamId');
  console.log('Stream is deleted');
} catch (error) {
  console.error('Can not delete the steam', error);
}

Dispose a stream

Disposing a stream means updating the streaming status to ended and invalidating the streaming URL.

To dispose a stream, you need the ID of the stream that you want to dispose. The function will return true if successfully deleted, otherwise, it will throw an error.

try {
  await StreamRepository.disposeStream('streamId');
  console.log('Stream is disposed');
} catch (error) {
  console.error('Can not dispose the steam', error);
}

Retrieve a stream object

Each stream object has a unique identifier. To retrieve a single stream object, use the sample code below. This function returns a LiveObject instance of streamModel. The stream object contains essential data such as the video stream title and description.

const liveObject = StreamRepository.getStream('streamId');

liveObject.on('dataUpdated', stream => {
  console.log(stream);
);

Get the stream status

Stream consists of many states. It can change from one state to another, depending on events and actions. The following enum cases describe all the possible status of a stream.

• StreamStatus.Idle - has generated but no actions have been taken

• StreamStatus.Live - currently being broadcasted

• StreamStatus.Ended - has ended broadcasting and in the progress of transforming to a recorded stream

• StreamStatus.Recorded - has ended broadcasting and has been transformed to a recorded stream

You can check the status of a stream by calling .status.

import { StreamStatus } from 'amityco/js-sdk';

//retrieve a stream
const liveObject = StreamRepository.getStream('streamId');

liveObject.on('dataUpdated', (stream) => {
  console.log(stream.status);
});

Retrieve a stream collection

StreamRepository provides a convenient method queryStreams and can be called to query live streams. We provide enums of stream status as parameters.statuses . You can observe changes in a collection as per the defined statuses.

This function returns a live collection of stream objects.

import { StreamRepository, StreamStatus } from '@amityco/js-sdk';

let streams;

const liveCollection = StreamRepository.queryStreams({
  statuses: [StreamStatus.Live],
  isDeleted: false,
  sortBy: 'lastCreated',
});

liveCollection.on('dataUpdated', newModels => {
  streams = newModels;
});

streams = liveCollection.models;

Browser Support

• Chrome: 38+

• Firefox: 42+

• Microsoft Edge: 13+

• Safari: 9+

• Opera: 25+

Since Amity Web SDK uses local cache for performance and user experience reason, server side rendering is not supported. To use Amity Web SDK with NextJS, Amity Web SDK must be imported using .

React Native

For details on using the TypeScript SDK with React Native, refer to these .

More than ever, videos are increasingly dominating mobile screens. From fun short-form clips to promote new products to live-streamed talk shows to educate your customers, videos have the potential to transform the way customers experience your brand.

This functionality is not currently supported for Web but will be coming soon! We will update the relevant sections accordingly

Live streams and playback videos information are stored in Amity.Stream. To start working with stream, first, the app needs to initialize the repository. To create a new SDK instance with your API key, refer to the section.

Viewing a live stream

Retrieve a stream object

Each stream object has a unique identifier. To retrieve a single stream object. The stream object contains essential data such as title, description, streamerUrl, watcherUrl, etc

Stream Status

Stream consists of many states. It can change from one state to another, depending on events and actions.

Amity.StreamStatus.<STATUS> represents a stream status. The following enum cases describe all the possible statuses of a stream.

• IDLE indicates "a stream that has generated but no actions have been taken."

• LIVE indicates "a stream is currently being broadcasted."

• ENDED indicates "a stream has ended broadcasting and in the process of transforming to a recorded stream."

• RECORDED indicates "a stream has ended broadcasting and has been transformed to a recorded stream."

Retrieve a stream collection

You can query a list of stream by calling queryStream.

Playing a live stream

To play a live stream, currently FLV, RTMP and HLS protocol are supported by using watcherUrl inside the stream object.

Play a recorded stream

To play a recorded stream, currently FLV, MP4 and M3U8 protocol are supported by using recordings inside the stream object.

Create a stream object

Note that the TypeScript SDK does not support broadcasting a live stream directly. Instead, it allows the creation of a stream object. You can then retrieve the streaming URL from this object and implement it with a third-party library or streaming tools like OBS.

Stop live stream session

To stop broadcasting a live stream, you can use the dedicated stop function provided by the SDK. This function will explicitly end the ongoing live stream and change its status to 'ENDED' Using this function is crucial for effectively managing your live streams and ensuring that they transition properly to their recorded state after broadcasting. Here's how you can use the function:

Delete live stream

To delete a stream, you will need the ID of the stream that you want to delete. The function will return true if successfully deleted, otherwise, it will throw an error.

Every action inside of ts-sdk can be wrapped by runQuery to enable offline first functionality.

Getter

For a getter, runQuery will first try to get the data from cache. If the data already exists in the cache, it will not fetch from the server. Otherwise, it will fetch the data and store the cache accordingly.

You can set the period of validity of the cache manually using the third parameter. With this example, the cache will be considered valid for an hour.

Flow Diagram

Mutator

For a mutator, runQuery will do an optimistic mutation (creation, update, delete operation) to the cache before making a request to the server.

Pagination

The runQuery for an action that requires pagination acts a little differently. Instead of accepting a callback that passes just the object of interest, it will also pass a pages object with the key prevPage and nextPage referring to the Amity.Page object that can be used to query the previous page and the next page, respectively. A sample code is provided below: