Build a live streaming app with user-generated content in less than an hour with Amazon IVS

User-generated content (UGC) forms the backbone of many popular social media services today. As internet access becomes more widespread, many people are using apps and services to share their own, personal experiences to a global audience.

In recent years, live streaming video services featuring user-generated content have become a powerful way to connect with others who have similar interests, or experience events vicariously through a broadcaster. Although live streaming has become immensely popular, it can be difficult to build and maintain a global live video distribution system at scale. With Amazon Interactive Video Service (Amazon IVS) however, it’s simple to create your own UGC live streaming app or website.

In this post, I cover how to deploy a basic UGC live streaming app in a few steps:

1. Set up the serverless backend app (15 min)
2. Set up the front-end client app (5 min)

Prerequisites

Before you can set up the example app, you need the following tools:

1. Node.js (Installing Node.js). Download latest LTS version (“Recommended for Most Users”).
2. AWS Command Line Interface (AWS CLI)
3. AWS Serverless Application Model (AWS SAM)
4. An AWS Account with permissions to create:
   a. AWS Identity and Access Management (AWS IAM) roles
   b. AWS Simple Storage Service (Amazon S3) buckets
   c. Amazon DynamoDB tables
   d. AWS Lambda functions
   e. Amazon Cognito user pools and identity pools
   f. Amazon API Gateway APIs
   g. AWS CloudFormation stacks

Important note: The following steps create and consume AWS resources, which will incur costs.

Serverless app setup

This section covers the process to set up the systems to manage user accounts and Amazon IVS channels.

Before you start, run the following command to make sure you’re in the correct AWS account.

aws configure

For help configuring the AWS CLI, refer to the AWS CLI User Guide.

Step 1 – Clone the example repository from GitHub

Clone the repository by visiting the Amazon IVS UGC Web Demo on GitHub and downloading the repository. Or, if you have a command line git tool installed, you can run the following command:

git clone git@github.com:aws-samples/amazon-ivs-ugc-web-demo.git

Step 2 – Create an Amazon S3 bucket

Create an Amazon S3 bucket through the AWS CLI with the following command. Replace <my-bucket-name> with a bucket name of your choosing and <my-region> with your Region name (for example, us-west-2).

aws s3api create-bucket \
--bucket <my-bucket-name> \
--region <my-region> \
--create-bucket-configuration LocationConstraint=<my-region>

Step 3 – Package and upload AWS Lambda dependencies

Using the command line, navigate to the serverless dependencies directory of the repository you cloned in step 1 (serverless/dependencies/nodejs). For example:

cd ~/Developer/amazon-vs-ugc-web-
demo/serverless/dependencies/nodejs.

Build the dependencies:

npm install

Compress the serverless dependencies directory (serverless/dependencies/nodejs) into a .zip file named nodejs.zip. Use the following command to upload the zipped dependencies to Amazon S3. Replace <my-bucket-name> with the name of the Amazon S3 bucket you created in step 2.

aws s3 cp ../nodejs.zip s3://<my-bucket-name>/

Step 4 – Pack template with AWS SAM

In the following command, replace <my-bucket-name> with the name of the Amazon S3 bucket you created in step 2.

sam package \
--template-file template.yaml \
--output-template-file packaged.yaml \
--s3-bucket <my-bucket-name>

DO NOT run the output from this command and instead proceed to the following step.

Step 5 – Deploy CloudFormation with AWS SAM

The following commands will deploy the serverless app stack to AWS. Replace <my-stack-name> with a stack name of your choosing and <my-bucket-name> with the name of the Amazon S3 bucket you created in step 2.

sam deploy \
--template-file packaged.yaml \
--stack-name <my-stack-name> \
--capabilities CAPABILITY_IAM \
--parameter-overrides DependenciesBucket=<my-bucket-name>

When the command completes, copy the value of ApiURL and save it in a convenient place. You need this URL in the following section when you set up the client app.

If you lose the ApiURL and need to find it again, you can run the following command:

aws cloudformation describe-stacks \
--stack-name <my-stack-name> --query 'Stacks[].Outputs'

Client app setup

Now that you’ve set up the serverless backend app and you have your ApiURL, you can set up the front-end client application.

Step 1 – Update the configuration file

With your favorite text editor, open src/config.js in the web-ui directory. For example:

open ~/Developer/amazon-vs-ugc-web-demo/web-ui/src/config.js

Paste your ApiURL between the quotes on line 8.

You may also modify any of the other configuration options available. For this demo however, I recommend setting USE_MOCK_DATA and SHOW_OFFLINE_STREAMS to false. 

Step 2 – Install client app dependencies

Using the command line, navigate to the web-ui directory

cd ~/Developer/amazon-vs-ugc-web-demo/web-ui

Install dependencies with the following command:

npm install

Step 3 – Run the client app

Once the dependencies have installed successfully, run the client application with the following command:

npm start

Once the app is running, open your web browser and navigate to

localhost:3000/

Step 4 – Create an account and start streaming

Click the Sign in button in the top-right corner and then click the Create account link. Fill out the information in the fields, choose an avatar and color, then click Create Account.

Once you create an account, navigate to your channel page by clicking your user avatar in the top-right corner and click on My Channel. Follow the instructions shown to start streaming. For more information on how to stream from a computer or smartphone, see this post on Setting up for streaming with Amazon Interactive Video Service.

Once you start streaming, it may take up to a minute for your video to be visible on the site. This does not mean the latency between your stream and viewers will be 1 minute. Rather, this delay occurs because the serverless backend in this example checks for new streams once each minute.

Note that streaming and consuming HD video on the same machine is computationally expensive and is highly sensitive to network conditions. For best results, I recommend streaming from a modern computer on a hard-wired connection through Ethernet, or through a fast 5 GHz Wi-Fi connection. If you are noticing stuttering video, you may want to reduce your stream bitrate, lower your stream resolution, or try a different encoder.

More information

• Amazon IVS is a managed live streaming solution that is quick and easy to set up, and ideal for creating interactive video experiences. Simply send your live streams to Amazon IVS and the service does everything you need to make ultra-low latency live video available to any viewer around the world, letting you focus on building interactive experiences alongside the live video. Learn more.
• Amazon IVS docs
• User Guide
• API Reference