Building a live streaming app for all-hands meetings and more on ScreenCloud with Amazon IVS

Authored by Krishna Acondy, senior engineer at ScreenCloud. The content and opinions in this post are those of the third-party author and AWS is not responsible for the content or accuracy of this post.

As the world moves towards a more remote way of working, our customers are looking for new ways to help the workforce stay connected and engaged.

One of the features that is most requested by ScreenCloud customers is the ability to stream live video content to their screens. A key use case for them is around streaming their meetings, webinars and events to both large screens in their offices and to mobile devices to make the content more accessible to remote and deskless/frontline workers. The two main ways they stream content are via Zoom meetings (using a custom streaming service) or via OBS Studio (https://obsproject.com/).

This is why we built ScreenCloud Broadcast.

We want to make it as easy as possible for customers to get this content on their screens. The simplest workflow for this is:

Step 1: Install ScreenCloud Broadcast app and create a channel.

Step 2: Stream content to the channel via Zoom or OBS Studio.

Step 3a: View stream on screens in the office.

Step 3b: Share secure links to your Slack or MS Teams colleagues.

A channel is a container for any sort of episodic content. Channel creation is a one-time process. Subsequently, broadcasters can simply stream content on that channel whenever required. This enables us to generate friendly, permanent URLs for channels, which makes them easier to share with colleagues.

A typical example of a channel is for company all-hands meetings. When a user installs the Live Streams app and creates an All Hands channel, they can give a URL that looks like:

https://screencloud.com/<organisation-id>/all-hands

Anyone who goes to this URL is able to, after authentication where applicable, access the all-hands meeting if it’s currently live.

How ScreenCloud’s Live Streams App Works

When Amazon Interactive Video Service (Amazon IVS) launched, we were excited to be able to deliver this functionality to our customers in a simple and straightforward package, while leveraging AWS reliability and flexibility to scale our service as needed.

IVS provides a managed live streaming service, which removes all the complexity around low-latency live video, and provides a simple interface with an HTTP API and a video player SDK.

We were able to leverage the capabilities and simplicity offered by IVS to quickly prototype a system that fulfills our customers’ requested use cases. Since we use AWS services quite extensively across all our products, IVS was intuitive and easy to integrate.

ScreenCloud Studio (https://studio.screencloud.com) is the entry point into the ScreenCloud ecosystem. It lets users manage their screens and content, and allows them to use the apps from ScreenCloud’s app store.

ScreenCloud Broadcast is an app for Studio that lets the user create streams they can broadcast to.

When the user creates a stream on ScreenCloud Broadcast, that triggers the creation of an IVS channel via the API, and presents the user with three values:

• Streaming URL: The URL for the ingest endpoint that the user broadcasts to.
• Streaming Key: The stream key for the IVS channel.
• Live streaming page URL: This is the URL that can be shared with viewers of the stream.

Configuring a live stream

Once a stream is created and is online, viewers can watch it in two ways:

1. On a ScreenCloud screen
   The created stream can be cast to and watched on any supported ScreenCloud-enabled device or screen.
2. On web or mobile
   The stream is accessible via the ‘Live streaming page URL’. This is a standalone page that shows the live stream for viewers who do not have access to a ScreenCloud screen, or are remote or deskless workers. This link can either be public (accessible over the internet), or protected by authentication via Slack, Microsoft Teams, or a password.

Viewing a live stream on ScreenCloud Broadcast

Viewers can also react to a stream at any point in time. This is achieved using the IVS metadata API. When a user reacts by clicking one of the emoji buttons on their toolbar, a call is made to the IVS PutMetadata endpoint, with a payload containing the emoji, the user’s name and their profile picture. This is then fed back on to viewers’ screens via the IVS player SDK.

Reacting to a stream

Here is a picture of the end-to-end architecture of the system. The frontend consists of React.js web apps hosted on Amazon Simple Storage Service (Amazon S3). They use the IVS Player SDK to render the stream. We created a set of reusable React components that use the video.js player in combination with IVS tech to add UI around the live stream.

The ScreenCloud Live Streams API is a set of AWS Lambda functions that interfaces with the IVS API.

Whenever a user creates a stream, we store the ingest endpoint, stream key and channel ARN that’s returned, along with the authentication mechanism for the stream and other ScreenCloud-specific information in an AWS DynamoDB table.

Viewers watching a stream on a ScreenCloud screen can directly access the stream via the SDK, while those using the standalone app need to authenticate via Slack, Microsoft or password if required.

ScreenCloud Broadcast Architecture

About ScreenCloud

ScreenCloud (https://screen.cloud) is a SaaS solution that enables customers to easily put meaningful content on screens. ScreenCloud supports most hardware devices, and has a fully featured app store with over 60 apps that provide integrations with social media, CRM systems etc., and also provide ways to create content to put on screens.

About the Author

Krishna Acondy is a senior engineer at ScreenCloud. He holds undergraduate and master’s degrees in computer science, and has over 10 years of experience in web and mobile app development. He is passionate about JavaScript and frontend development and enjoys writing technical articles and contributing to open source projects.