Business Productivity

Build meeting features into your Amazon Chime SDK messaging application

The Amazon Chime SDK is a set of real-time communications components that developers can use to quickly add messaging, audio, video, and screen sharing capabilities to their applications. In previous posts, we showed customers how to deploy a demo chat app and how to deploy a demo meeting app. Since then, we have heard from customers asking how they could combine the two in order to have a shared audio, video, and messaging experience.

In this blog, we will extend the existing Amazon Chime SDK messaging demo chat app to incorporate instant meetings allowing all the members of a messaging channel to join a meeting that includes audio, video, and persistent chat. We will also show you how to deploy the Amazon Chime SDK meeting chat demo app as a quick way to try out the features of the Amazon Chime SDK on your own.

Pre-requisites:

For this walkthrough, you should have the following pre-requisites:

Meeting Chat Demo App Architecture

The diagram below illustrates the architecture for the meeting chat demo app. The architecture remains largely similar to the previous demo chat app, but the main change is that the AWS CloudFormation template now creates an additional Amazon API Gateway endpoint and AWS Lambda function used to provision meetings and create attendees. Note: Deploying this meeting chat demo app and receiving traffic from the app created in this post can incur AWS charges.

The architecture includes the following components:

  1. The Amazon Chime App Instance, which acts as the data plane for all messages.
  2. An AWS CloudFormation template is used to set up the authentication layer with the option to use Amazon Cognito or AWS Security Token Service (AWS STS) to vend user credentials with a post authentication Lambda function. This template also sets up an Amazon API gateway endpoint to handle requests from the client to create meetings and attendees. Finally, the template creates an Amazon Simple Storage Service (Amazon S3) bucket to store attachments uploaded by users in the meeting chat demo app.
  3. The meeting chat demo application is deployed and can be launched locally for testing purposes. This application is built using the React framework, and uses the AWS Amplify JavaScript library to store attachments in Amazon S3, authentication with either Amazon Cognito or AWS STS for custom authentication, and using the Amazon Chime SDK Client Library to utilize its messaging and meeting features.

This diagram shows how the APIs in the Amazon Chime SDK are called from a client-side application and serverless backend. It includes authentication, authorization, messaging, meeting and attendee lifecycle, and attachments for an application developed with the Amazon Chime SDK.

Walkthrough

Deploying the Meeting Chat Demo App

In this section, you will learn how to set up the Amazon Chime SDK for the meeting chat demo app in your AWS account. There are two options, one for new users, and one for existing users. If you do not currently have the previous demo chat app running you should follow the steps for new users. If you do have the previous demo chat app running, you should follow the steps for existing users.

New Users

For new users, the high-level steps are as follows:

  1. Using the available AWS CloudFormation template, set up a secure user directory for chat users using Amazon Cognito, an Amazon Chime app instance for chat, and an Amazon S3 bucket for attachments.
  2. Deploy the Amazon Chime meeting chat demo app locally.
  3. Explore the features of the meeting chat demo app.

Existing Users

If you already followed the previous demo chat blog post and deployed the previous template, the high levels steps are as follows:

  1. Update your existing AWS Cloudformation stack using the new AWS CloudFormation template to create an IAM role for the meetings server.
  2. Redeploy the Amazon Chime meeting chat demo app locally.

New Users Steps

Step 1. Set up a secure user directory for chat users using Amazon Cognito and an Amazon S3 bucket for attachments

  1. Sign in to the AWS Management Console with your primary account. Switch to the us-east-1 (N. Virginia) region. Note: The AWS CloudFormation template in this section needs to be launched in US east (N. Virginia) region.
  2. Click on the Launch Stack image below this sentence to launch a Cloudformation template that will setup the required infrastructure for the Amazon Chime SDK meeting chat demo app in your AWS account.
  3. On the Create Stack page, click Next.
  4. On the Specify Details page, enter the following information:
    DemoName– Unique Demo Name for Amazon Cognito resources, such as ‘ChimeSDKMessagingDemo’
  5. Choose Next, and then Next on the Configure stack options page.
  6. On the Review page, check the I acknowledge that AWS CloudFormation might create IAM resources check box. Then click Create.
  7. Creating the stack generates 6 outputs- apiGatewayInvokeUrl, cognitoAppClientId, attachmentsS3BucketName, cognitoIdentityPoolId, appInstanceArn, and cognitoUserPoolId. Note these values for the meeting chat demo app configuration in the next step.

Step 2. Deploy the Amazon Chime SDK meeting chat demo app locally

In this section, you will deploy a simple web app written in the React framework in your local environment. This app demonstrates the Amazon Chime messaging SDK features. Once you set up the app locally, you are able to get started.

  1. Clone the project from GitHub.
    git clone https://github.com/aws-samples/amazon-chime-sdk.git 
  2. Run the following commands to navigate to the root folder of the Amazon Chime SDK meeting chat demo:
    cd amazon-chime-sdk/apps/chat
  3. Run the following commands to install all the dependencies for the Amazon Chime SDK meeting chat demo:
    npm install
  4. Open src/Config.js with the editor of your choice. Add the following configuration to it: 
    const appConfig = {
    apiGatewayInvokeUrl: '<API GATEWAY INVOKE URL FROM STEP 1>',
    cognitoUserPoolId: '<COGNITO USER POOL ID FROM STEP 1>',
    cognitoAppClientId: '<COGNITO APP CLIENT ID FROM STEP 1>',
    cognitoIdentityPoolId: '<COGNITO IDENTITY POOL ID FROM STEP 1>',
    appInstanceArn: '<AWS CHIME APP INSTANCE ARN FROM STEP 1>',
    region: 'us-east-1',
    attachments_s3_bucket_name: '<S3 BUCKET NAME FROM STEP 1>'
};
export default appConfig;
  5. Once the configuration for the application is entered, run the following commands in the amazon-chime-sdk/apps/chat folder to set up your front-end server locally.
    npm start
  6. Open your browser and navigate to https://localhost:9000 to start testing.

Step 3: Explore the Amazon Chime SDK meeting chat demo

In this section, we will walk through using the meeting demo app and its features.

User registration

On the homepage, you have the option to register a user for the chat application.

User confirmation

During user registration, a user is created in the secure Amazon Cognito directory you set up in step 2. However, this user is in unconfirmed state after registration. To confirm the user, an administrator logs into their Amazon Cognito directory (CognitoAuthenticator). The administrator confirms the user by clicking on the username, and choosing Confirm User.

Note: You can automate the user confirmation in Amazon Cognito using multiple mechanisms. Read documentation for more details.

Once a user is confirmed in Amazon Cognito, they can log in to the chat application and start using its features.

Existing User Steps

Step 1. Update the AWS Cloudformation stack to create the meeting server role

  1. Sign in to the AWS Management Console with your primary account. Switch to the us-east-1 (N. Virginia) Region. Note: The AWS CloudFormation template in this section needs to be launched in US east (N. Virginia) Region.
  2. Open the AWS CloudFormation console in the Region you used in the original demo chat app.
  3. Select the stack that you created.
  4. Choose Update
  5. On the Update Stack page, click Replace current template.
  6. Under the Amazon S3 URL, enter https://aws-blog-business-productivity-chime-sdk.s3.amazonaws.com/meetingchatdemo-assets/template.yaml
  7. Choose Next on the Specify stack details page and then Next on the Configure stack options page.
  8. On the Review page, check the I acknowledge that AWS CloudFormation might create IAM resources check box. Then click Create.
  9. Creating the stack generates 4 outputs- apiGatewayInvokeUrl, cognitoAppClientId, attachmentsS3BucketName, cognitoIdentityPoolId, appInstanceArn, and cognitoUserPoolId. Note these values for the meeting chat demo app configuration in the next step.

Step 2. Deploy the Amazon Chime SDK meeting chat demo app locally

In this section, you will deploy a simple web app written in the React framework in your local environment. This app demonstrates the Amazon Chime messaging SDK features. Once you set up the app locally, you are able to get started.

  1. Clone the project from GitHub.
    git clone https://github.com/aws-samples/amazon-chime-sdk.git
  2. Run the following commands to navigate to the root folder of the Amazon Chime SDK meeting chat demo:
    cd amazon-chime-sdk/apps/chat
  3. Run the following commands to install all the dependencies for the Amazon Chime SDK meeting chat demo:
    npm install
  4. Open src/Config.js with the editor of your choice. Add the following configuration to it: 
    const appConfig = {
    apiGatewayInvokeUrl: '<API GATEWAY INVOKE URL FROM STEP 1>',
    cognitoUserPoolId: '<COGNITO USER POOL ID FROM STEP 1>',
    cognitoAppClientId: '<COGNITO APP CLIENT ID FROM STEP 1>',
    cognitoIdentityPoolId: '<COGNITO IDENTITY POOL ID FROM STEP 1>',
    appInstanceArn: '<AWS CHIME APP INSTANCE ARN FROM STEP 1>',
    region: 'us-east-1',
    attachments_s3_bucket_name: '<S3 BUCKET NAME FROM STEP 1>'
};
export default appConfig;
  5. Once the configuration for the application is entered, run the following commands in the amazon-chime-sdk/apps/chat folder to set up your front-end server locally.
    npm start
  6. Open your browser and navigate to https://localhost:9000 to start testing.

Step 3: Explore the Amazon Chime SDK chat demo

In this section, we will walk through using the demo app and its features.

User registration

On the homepage, you have the option to register a user for the chat application.

User confirmation

During user registration, a user is created in the secure Amazon Cognito directory you set up in step 2. However, this user is in unconfirmed state after registration. To confirm the user, an administrator logs into their Amazon Cognito directory (CognitoAuthenticator). The administrator confirms the user by clicking on the username, and choosing Confirm User.

Note: You can automate the user confirmation in Amazon Cognito using multiple mechanisms. Read documentation for more details.

Once a user is confirmed in Amazon Cognito, they can log in to the chat application and start using its features.

Other features

In this meeting chat demo app, you are also able to create channels for specific conversations and add members to it. These channels can be public (non-members can read messages and add themselves as members) or private (only members can read and send messages). Additionally, private channels can be restricted (meaning only moderators can add new members), or unrestricted (meaning any current member can add additional members). Moderators of a channel are able to edit channel details, manage members, and delete the channel. Once a channel is created, members can send, edit, or delete their messages in the channel. These messages can be plaintext or attachments. Attachments are securely stored in an Amazon S3 bucket created in your AWS account in step 2. The client currently limits the attachment size to 5mb. This limit is not set by the AWS Chime SDK and can be increased as needed. We’ve used Amazon S3 for attachments, but the Amazon Chime SDK supports your choice of storage.

Cleanup

If you don’t want to continue to be charged for the use of the meeting chat demo application, you can clean up by deleting the stack and resources created in Step 1.
To delete the stack and its resources:

  1. From the AWS CloudFormation console in the Region you used in the Step 1, select the stack that you created.
  2. Click Delete Stack.
  3. In the confirmation message that appears, click Yes, Delete. At this stage, the status for your changes to DELETE_IN_PROGRESS. In the same way you monitored the creation of the stack, monitor its deletion by using the Events tab. When AWS CloudFormation completes the deletion of the stack, it removes the stack from the list.

Finally, delete the Amazon Chime app instance created in step 1 using the following commands in CLI:
aws chime delete-app-instance --app-instance-arn <ARN FROM STEP 1>

Conclusion

In this blog, we walked through how builders can use the Amazon Chime SDK to integrate a shared messaging and meeting experience into a single serverless app. You also learned about deploying the meeting chat demo to try out these functionalities first hand.

For next steps, we suggest you to check out the Automated Moderation and Sentiment Analysis blog to learn how you can build off of Amazon Kinesis streams to further enhance the messaging experience.