How to: Build an engaging feed app with React and Amazon IVS

AWS Feed
How to: Build an engaging feed app with React and Amazon IVS

Introduction

While live video streaming has become the new standard for engaging content, it is often difficult for developers with no video expertise to get started. Managing live video ingestion, processing, packaging, delivery and playback with a good user experience is a daunting task.

Amazon Interactive Video Service (Amazon IVS) is designed to take care of all the technical complexities of delivering low-latency live video to viewers anywhere. With Amazon IVS, you can spend your time focused on creating engaging and highly interactive video experiences.

In this post, we show you how you can use Amazon IVS with React, a Javascript library for building user interfaces, to create a modern scrolling feed of auto-playing live video streams. The end product is similar to some of the most popular and trending social media apps today.

You can see a live demo of this project here. Let’s get started!

In this post, we cover:

1. Setting up a React web application (15 min)
2. Modifying the example to point to your own Amazon IVS live streams (5 min)

Before we begin

This demo web application shows how you can build a compelling social feed experience of auto-playing live streams with Amazon IVS.  This project is intended for education purposes only and is not for use in production. Please use this demo code as a reference and adhere to the best practices for your production environment.

You can refer to this guide to build a full-stack React application with AWS Amplify if you currently do not have a production environment, or if you want to learn best practices and apply this knowledge to your own!

Prerequisites

• Node.js (Installing Node.js)
• Yarn (Installing Yarn)
• Optional: AWS Command Line Interface (Installing the AWS CLI version 2)

The following steps describe the process on macOS, but they can also be completed on any operating system that supports the prerequisites.

Tutorial

Step 1: Clone the repository

First, clone the Amazon IVS React Feed App Demo source code from GitHub using your method of choice. The following steps describe how to do this using the Terminal app on macOS.

1. Open the Terminal app.
2. Navigate to a directory where you want to store the app code. For example: cd ~/git.
3. Clone the demo code repository:

git clone https://github.com/aws-samples/amazon-ivs-feed-web-demo.git

Next, change directory:

cd amazon-ivs-feed-web-demo

Step 2: Use Yarn to prepare web application

In this tutorial, we use yarn to download all the packages and run the demo locally.

Run this command in your Terminal session:yarn

Note: it may take a while to download all the dependencies

Step 3: Use Yarn to run web application locally

Now we have downloaded all the dependencies. We can use Yarn to the demo locally.

yarn start

Yarn should open a browser tab for you. If not, navigate a web browser to http://localhost:3000

Nice work! In the next section, we customize this experience.

Use your own Amazon IVS stream

Now that we have successfully used the default streams in our React web application, you may want to replace those sample streams with your own. If you have Amazon IVS channels running in your account, you may skip directly to Step 2.

Step 1: Create an Amazon IVS channel and stream

This demo comes with a few sample streams. We encourage you to use your own stream(s), so you can experience what it is like with your own content. Please use the following documentation to create and stream to a new Amazon IVS channel:

1. Create a Channel: https://docs.aws.amazon.com/ivs/latest/userguide/getting-started-create-channel.html 
2. Set up streaming software: https://docs.aws.amazon.com/ivs/latest/userguide/getting-started-set-up-streaming.html 

Tip: If you prefer to use FFmpeg to stream a video file from your local machine or from a remote Amazon EC2 instance, use this script and change the variables at the top of the file for your own stream configuration. The script’s FFmpeg parameters are set to use the “Basic” channel type to save on costs. Be sure to configure your Amazon IVS channel to “Basic” in the “Channel Type” section. Note that Basic channels only allow up to 1.5 Mbps bitrate and 480p resolution. For better quality and higher resolution, use a Standard channel type.

Step 2: Find active streams in your account

You can find the Playback URL in the Amazon IVS Console. Navigate to the “Live channels” page. Click on your live channel to be taken to the channel’s details page, and look for the “Playback configuration” section. There, you can get the “Playback URL” and replace the playbackUrl variable in Step 2.

Optional: If you would like to programmatically fill in all the information needed, you can use the awscli utility and export the snippet of JSON into the public/feeds.json file.

Note: run the following command to make sure you’re in the correct AWS account (or configure as needed):

aws configure

For additional help with configuring, see https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html

Use the following commands:

1. aws ivs list-streams
2. Copy the channelArn for the channel you want to use. Use that for the --channel-arn
3. aws ivs get-stream —channel-arn “<ARN from Step 1>” —output json

Step 3: Update feeds.json file

Update the “playbackUrl” or copy the “stream”: { … } from the optional awscli output method to the public/feeds.json document as follows:

You can change the variables within the “metadata” section as well to further customize the experience.

Step 4: Save the file and watch

When you save the file, the browser should refresh on its own. If not, refresh the browser to see the update.

Step 5: Repeat for more streams

If you have more streams, you may replace the other ones in the feeds.json file. You are not limited to just three, so feel free to try with several more streams. Make sure every “id” is unique, to keep a valid JSON format.

Cleanup

To end the Yarn session, use the ctrl + c command in Terminal to end the running process.

If you no longer need the Amazon IVS live streams, be sure to stop the streams so you do not incur further costs.

Continuing your adventure

Now that you have customized your web application with your own streams, why stop there? Dive into the code and change the experience. Here are a few ideas for inspiration:

• Dynamically update and serve feeds.json using a Serverless backend. Some information used in the JSON file, like the playbackUrl, startTime and viewerCount are available via the Amazon IVS ListStreams API.
• Use the Timed Metadata API to:
  • Add a synchronized poll feature to drive more engagement with your content.
  • Give life to the button and show other viewers when someone has clicked on it.
  • Transform this demo into a modern ecommerce experience by displaying contextual product information.
• Display a simple chat next to the video when the users stops scrolling so viewers can interact with the streamer more directly.

More about Amazon IVS

Amazon Interactive Video Service (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 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
• Common API errors and what they mean