Build a simple UGC(User Generated Content) platform using Amazon IVS and Chime SDK

Overview

This demo provides live streaming services for streamers and you can join the streamer's channel and watch it. You can chat with streamer and other viewers. Moreover, you could send a heart to streamer when you want to show your love to the streamer.

IMPORTANT NOTE: This project is intended for education purposes only and not for production usage.

Demo Architecture

Serverless Web Application

This demo is serverless web application, leveraging AWS Amplify. AWS Amplify provides set of tools and services that can be used together or on their own, to help front-end web developer build scalable full stack applications. You can configure app backends like backend API with Amazon API Gateway, AWS Lambda and auth feature with Amazon Cognito, DB with AWS AppSync.

Streaming & Chat Messaging

The streaming feature leverages Amazon Interactive Video Service. Amazon IVS provides streaming channel and Timed MetaAPI for interactive services like poll, Q&A, Heart button. To interact between streamer and viewers with chatting, this demo provides messaging chat feature with Amazon Chime SDK messaging.

Quick Start

IMPORTANT NOTE: Deploying this demo application in your AWS account will create and consume AWS resources, which will cost money.

To start demo quickly, follow the instructions as below.

Provision Backend Side

Click Launch Stack

Input Parameters

Check Available Region of using Amazon IVS and ChimeSDK Messaging. Default is us-east-1

Click Next and Create stack with acknowledgement check

Get outputs from CloudFormation stack

Configure Provisioned Backends to Frontend

clone repo to your local
go to root dir of repo

NOTE: If you are using Cloud9 for demo, you have to increase volume size of Cloud9 Instance. Run script resize_volume.shbefore npm install.

If you are using Cloud9
- Go to Root Dir
- chmod +x resize_volume.sh
- ./resize_volume.sh
- This script only works in Amazon Linux Cloud9. If you are using Ubuntu Cloud9, change script yum to apt-get -y.
Copy & paste API endpoints to src/config/apiConfig.js from Cloudformation ApiEndpoint outputs

Copy & past ChimeAppInstance ARN to src/config/chimeConfig.js from Cloudformation appInstanceArn output

Install & Set up Amplify

Run command npm install -g @aws-amplify/cli
Run command amplify configure
Set up Region and IAM User which you want to set.

Set Up Amplify Backend

Run command amplify init in root dir of repo

Enter the input value by referring to the following.

Run command amplify import auth
Select Cognito which is created in CloudFormation

NOTE: AppSync in Amplify cli slightly changed. Please follow as below to add AppSync API.

Run command amplify add api
Select GraphQL
Select Authorization modes.
Select Amazon Cognito User Pool and type 'N' which we will not configure additional auth types.
Select Continue and Blank Schema.
Select Y to edit schema.
Result as below. Open graphql schema file. file path is as below.
Copy schema from src/config/schema.graphql to schema file like as below.
Save it.
Run command amplify push
Type Yes to continue
Type Yes to create GraphQL API
Select javascript
Press ENTER Enter to select file name pattern of graphql queries to default
Type Yes to generate/update all possible GraphQL operations
Press ENTER to maximum statement depth as default