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.

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.

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

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;