Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

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.

ivsdemo-preview

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

Demo Architecture

image

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

image

  • Click Next and Create stack with acknowledgement check

image

  • Get outputs from CloudFormation stack

image

Configure Provisioned Backends to Frontend

  • clone repo to your local
  • go to root dir of repo
  • Copy & paste API endpoints to src/config/apiConfig.js from Cloudformation ApiEndpoint outputs

image

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

image

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.

image

Set Up Amplify Backend

  • Run command amplify init in root dir of repo

Enter the input value by referring to the following.

image

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

image

  • Run command amplify add api
  • Select GraphQL
  • Type API Name and Select Amazon Cognito User Pool
  • Select No, I'm Done and Typo Yes
  • Input ./src/config/schema.graphql which is provided schema file

image

  • 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

image

  • After updating resources is done, Check with amplify status command

image

Finally Done! Use Demo!

  • Go to root dir of repo
  • Run command npm install
  • Run command npm start

Create Channel

  • Click Create Channel Button and create channel!

image

  • If you click My Channels, You can see your channels.

Join Others Channel

You could join the other channel and enjoy it.

Streaming your contents

You can stream your contents using OBS.

  • Click CHANNEL INFO in My Channels.

image

  • Get INGEST ENDPOINT and Channel STREAM KEY.
  • Input to OBS Application and stream it!
  • Start OBS > Settings > Stream and input ingest endpoint and stream key.

image

  • Start Streaming and enjoy Demo!

Clean Up

  • Remove CloudFormation Stack
  • Remove Amazon IVS channel which you made
  • Run Command amplify delete

Resources

License

This sample code is made available under a APACHE2.0 license. See the LICENSE file.

About

This demo is designed to educate people who want to build live streaming platform with chatting feature. This demo is implemented using Amplify with Amazon IVS, ChimeSDK Messaging.

Topics

Resources

License

Releases

No releases published

Packages

No packages published