Business Productivity

Build a live streaming chat application using Amazon IVS and Amazon Chime SDK

Building low latency live streaming and implementing chat features are common requests from customers who want an interactive experience. For example, customers who want to build a live streaming app with user-generated content (UGC) look for chat to help enhance interaction between users. In live commerce services, sellers needs to be responsive to product chat inquiries during live streaming. In education, teachers might want to interact with students through Q&A in virtual classrooms.

By integrating Amazon Interactive Video Service (Amazon IVS) with the Amazon Chime SDK, customers can build fully managed, low latency, chat embedded, interactive live broadcasting events.

Amazon IVS helps customers quickly build low latency, interactive live streaming experiences. Based on technology powered by Twitch, Amazon IVS channels are fully managed, low latency live streams, and help enhance the audience experience using a timed metadata API.

The Amazon Chime SDK helps customers build enhanced chat experiences for live streaming. Since the Amazon Chime SDK for messaging feature launch, customers have been able to build asynchronous, scalable, persistent, and interactive chatting experiences and chat features with pay-as-you-go pricing.

In this blog, we will explore how Amazon IVS and Amazon Chime SDK messaging can be used in a live event scenario.

Solution Overview

This demo shows you how you can build a compelling live streaming experience with interactivity using Amazon IVS and the Amazon Chime SDK. This demo is intended for education purposes only and is not for use in production.

This demo shows how hosts can quickly spin up IVS channels dynamically and start live streaming. Viewers can watch the live streaming and use scalable chat to interact with other viewers.

Note: Deploying this demo and receiving traffic from the demo created in this post can incur AWS charges

This solution has three main components.

  • The demo is built with AWS Amplify, a service that developers can use to build scalable full stack web and mobile applications. The frontend is built using the React framework, a Javascript library for building user interfaces, to integrate with Amazon IVS player SDK, and Amazon Chime SDK for messaging. The backend is configured with Amazon API Gateway, AWS Lambda for serverless application, Amazon Cognito for authentication feature, and AWS AppSync for database.
  • Amazon IVS is used for creating low latency, global scale of live channels without pre-warming or spin-up time. In addition, timed Metadata ensures that all your viewers receive your metadata payload at the same time in the video stream, regardless of stream latency or geographic location.
  • Amazon Chime SDK is used in this demo to allow developers to connect communities of users with scalable and persistent messaging. Using Amazon Chime SDK, users can perform various actions including sending messages, retrieving message history, editing messages, deleting messages, setting retention policies on stored messages, and streaming chat export.

Solution Walkthrough

Prerequisites

For this walkthrough, you should have the following already:

Deploying the Demo Application

In this section, you will learn how to set up the demo application in your AWS account.
The high-level steps are as follows:

  1. Using the available AWS CloudFormation template, set up backend resources for chat users using Amazon IVS, Amazon Cognito, and Amazon Chime app instance for chat.
  2. Deploy the AWS Amplify demo application.
  3. Explore the features of the demo application.

Step 1. Deploy Backend

In this section, you will deploy backend resources using the AWS CloudFormation template.

  1. Sign in to the AWS Management Console with your primary account and switch to the us-east-1 (N. Virginia) Region.
  2. Click on the Launch Stack image. Launch stack
  3. Specify Details page, fill out the following information.
    – Stack name : Unique Name for CloudFormation Stack
    – ChimeRegion : us-east-1
    – DemoName : Unique Name for output resources, such as ‘IVSChatDemoApp’
    – IVSRegion : us-east-1
    Note. Check available region of Amazon IVS and Amazon Chime SDK for messaging prior to deploying CloudFormation.
  4. Choose Next, and then choose Next on the Configure stack options page.
  5. On the Review page, check the I acknowledge that AWS CloudFormation might create IAM resources check box. Then click Create.
  6. Creating the stack generates the following 7 outputs – IvsCreateApiEndpoint, IvsDeleteApiEndpoint, IvsMetaInputApiEndpoint, appInstanceArn, cognitoAppClientId, cognitoIdentityPoolId, cognitoUserPoolId. Note these values for the demo app configuration in the next step.

Step 2. Configure Demo App with the Provisioned Backend

In this section, you bootstrap backend resources into your React demo application with AWS Amplify.

  1. Sign in to the AWS Management Console
  2. Go to Cloud9 environment. and Click Open IDE
  3. Clone the project from GitHub
    git clone https://github.com/aws-samples/amazon-ivs-chime-messaging-ugc-demo.git
  4. Open src/config/apiConfig.js and paste IvsCreateApiEndpoint, IvsDeleteApiEndpoint, IvsMetaInputApiEndpoint value from output of CloudFormation Stack.
  5. Open src/config/chimeConfig.js and paste the appInstanceArn value from the output of the AWS CloudFormation Stack.Clone the project from GitHub.

Step 3. Install & Configure AWS Amplify

AWS Amplify helps you configure and deploy web applications quickly and efficiently. You can also import and manage backend resources with AWS Amplify.

From the Cloud9 terminal:

  1. Go to the root folder of source.
  2. Install the Amplify CLI by running this command : $ npm install -g @aws-amplify/cli
  3. Configure the Amplify CLI using this command : $ amplify configure
  4. Follow the guided process to completion
  5. Install dependency and initialize the project using the Amplify CLI command : $ amplify init
  6. Follow the guided process to completion.
  7. Import Amazon Cognito to Amplify project using the Amplify CLI command : $ amplify import auth
  8. Follow command as below.
    – Choose Cognito User Pool and Identity Pool
    – Choose us-east-1
  9. Configure AWS AppSync with existed schema : $ amplify add api
  10. Follow command as below.
    – Choose GraphQL.
    – Type API Name and Choose Amazon Cognito Pool
    – Choose No, I’m Done and type Yes.
    – Fill out ./src/config/schema.graphql
  11. Push Amplify resources to your AWS account and generate AWS AppSync codes in local : $ amplify push
  12. Follow command as below.
    – Type Yes to continue.
    – Type Yes to create GraphQL API.
    – Choose JavaScript
    – Choose Yes and press Enter all selections.

Run the demo application

Now, configuration is complete.

  1. Run the following command to install dependencies : $ npm install
  2. Run the following command to run the demo locally : $ npm start
  3. Once the application is started in local, choose Preview > Preview Running Application button in Cloud9 menu bar to run application in browser.
  4. On the homepage, you have the option to register a user for the demo application. Finish register user, and sign in to navigate further.
  5. In the main menu, you can list all channels, create a new channel, and list your channels.
  6. Create a new channel by choosing Create My Channel button. And fill out channel title, and leave others default.
  7. Once the channel is created, the created channel is listed.
  8. Enter My Channels > Channel Info, and you will find ingest details of INGEST ENDPOINT and Channel STREAM KEY
  9. To start live streaming, run the OBS application. And fill out ingest details by choosing settings > Stream tab.
  10. Select service as Custom.., and Fill out INGEST ENDPOINT to Server, Channel STREAM KEY to Stream Key. Then choose OK.
  11. Choose Start Streaming. Now your own video channel is ready to air.
    Note. For setting up OBS for Amazon IVS, see this blog.
  12. Go back to the channel menu, and choose the START button. This action allows other users join your channel.
  13. Now, you can live stream, send heart emojis to viewers, and chat with attendees.

Cleanup

If you no longer want to keep the demo, delete all the AWS resources created so you do not incur further costs.

  1. Delete all channels in the demo application.
  2. Delete your CloudFormation Stacks.
  3. Delete your Cloud9 environment.

Conclusion

In this blog, we showed you how to build an application that uses live streaming and chat. With Amazon Chime SDK’s messaging features and Amazon IVS, customers can create low latency live streaming channels and embed scalable chat into applications. To learn more about how you can use the Amazon Chime SDK for messaging, see the links below.