Amazon Chime SDK: Components & Screen Share

Hello everyone! In our last Chime SDK post, we have demonstrated a very basic serverless meeting app, that is built on Lambda Backend and Chime SDK. In this post, we are going to expand the boundaries,try to experiment with Chime SDK and see what we can achieve more.

It’s 9:00 AM, you’ve grabbed your coffee, sat in front of your laptop, your day has just started. Out of nowhere, a magic link that appeared in your company’s messaging app that is telling you to join the meeting. You click it, it opens up a window, tells you to type who you are and join it via audio or audio/video. You see your colleagues, some have their microphones muted, someone started sharing their screen and you realize the meeting is being recorded. It is such a typical work day for a very long time, right?

Today, online meeting experience has some crucial features that any organization can not live without: audio/video, screen and data sharing and saving meeting recordings. In this post we will be trying to achieve all of these experiences through Chime SDK.

Toolkit

We will be using a similar code structure to our previous project, which you can check out the post or github link:

We will be using SAM CLI for provisioning our resources, Node.Js as runtime with yarn and we will bootstrap our client with create-react-app. Make sure you have an AWS CLI and SAM CLI installed locally, your AWS account is configured with AdministratorAccess, just to be able to provision resources. Let’s start!

Backend

Jump into your terminal and create a new Node.Js project. We will start by installing aws-sdk and uuid packages. We will access and manage our AWS resources through our backend. We need endpoints to:

• Create Meeting
• Join Meeting
• Get Meeting
• End Meeting

We will save our meeting and attendee information in Amazon DynamoDB, so that everyone can see each other’s names. Create and Join endpoints will be reading, writing and updating information on Amazon DynamoDB. Now it's a good time to create our template.yaml.

# template.yaml
AWSTemplateFormatVersion: '2010-09-09'
Transform: 'AWS::Serverless-2016-10-31'
Description: Advanced Meeting Features with Amazon Chime Demo
Globals:
  Function:
    Runtime: nodejs12.x
    Timeout: 30
    MemorySize: 128
Resources:
  # Create Chime Resources Access Policy
  ChimeMeetingsAccessPolicy:
    Type: AWS::IAM::Policy
    Properties:
      PolicyName: ChimeMeetingsAccess
      PolicyDocument:
        Version: "2012-10-17"
        Statement:
          - Effect: Allow
            Action:
              - 'chime:CreateMeeting'
              - 'chime:DeleteMeeting'
              - 'chime:GetMeeting'
              - 'chime:ListMeetings'
              - 'chime:BatchCreateAttendee'
              - 'chime:CreateAttendee'
              - 'chime:DeleteAttendee'
              - 'chime:GetAttendee'
              - 'chime:ListAttendees'
            Resource: '*'
      Roles:
        # Which roles will have this policy
        - Ref: MeetingJoinLambdaRole
        - Ref: MeetingEndLambdaRole
  # Create function definition
  MeetingCreateLambda:
    Type: AWS::Serverless::Function
    Properties:
      Handler: handlers.createMeeting
      Policies:
        - DynamoDBCrudPolicy:
            TableName: !Ref Meetings
      Events:
        Api1:
          Type: Api
          Properties:
            Path: /create
            Method: POST
  # Join function definition
  MeetingJoinLambda:
    Type: AWS::Serverless::Function
    Properties:
      Handler: handlers.joinMeeting
      Policies:
        - DynamoDBCrudPolicy:
            TableName: !Ref Meetings
      Events:
        Api1:
          Type: Api
          Properties:
            Path: /join
            Method: POST
  MeetingInfoLambda:
    Type: AWS::Serverless::Function
    Properties:
      Handler: handlers.getMeeting
      Policies:
        - DynamoDBCrudPolicy:
            TableName: !Ref Meetings
      Events:
        Api1:
          Type: Api
          Properties:
            Path: /get
            Method: GET

  # End function definition
  MeetingEndLambda:
    Type: AWS::Serverless::Function
    Properties:
      Handler: handlers.endMeeting
      Policies:
        - DynamoDBCrudPolicy:
            TableName: !Ref Meetings
      Events:
        Api1:
          Type: Api
          Properties:
            Path: /end
            Method: POST
  Meetings:
    Type: AWS::DynamoDB::Table
    Properties:
      TableName: "Meetings"
      AttributeDefinitions:
        - AttributeName: "Id"
          AttributeType: "S"
      BillingMode: PAY_PER_REQUEST
      KeySchema:
        - AttributeName: "Id"
          KeyType: HASH
      TimeToLiveSpecification:
        AttributeName: "TTL"
        Enabled: true
Outputs:
  ApiURL:
    Description: "API endpoint URL for Prod environment"
    Value: !Sub "https://${ServerlessRestApi}.execute-api.${AWS::Region}.amazonaws.com/Prod/"

We’ve added our Meetings table in Amazon DynamoDB to keep more detailed information of attendees. Also we’ve added function definitions for our API Gateway. Let’s create handlers.js and add our functions. Our handlers will almost be the same as our previous Chime SDK post, but this time we will be using DocumentClient to access Amazon DynamoDB.

DocumentClient simplifies accessing documents and lets you access objects more javascript style. You can check out the function for retrieving a meeting object to the table:

const getMeeting = async (meetingId) => {
	const result = await dynamoDb
		.get({
			TableName: meetingTableName,
			Key: {
				Id: meetingId,
			},
		})
		.promise();
	return result.Item;
};

There’s no array deserialization, we return the Item that is returned to us. You can check out the full code at GitHub from the link below:

Since we are done with our endpoints, let’s create our client application.

Frontend

For frontend we will be building a React application. In our project root:

yarn create react-app client

We will be building the client application in the /client directory, as a different application. Output of build command will be served via S3 bucket, as a static website. Navigate to the client/ folder and add the Chime SDK client package.

yarn add amazon-chime-sdk-js

For this tutorial, we will also be using a react component library that the team behind Amazon Chime SDK has released, called amazon-chime-sdk-component-library-react. Library contains all the components that you need to build an online meeting. Component library is styled via styled-components, which we need to install too, including styled-system.

yarn add amazon-chime-sdk-component-library-react styled-components styled-system

Let’s go ahead and change our src/index.js, add ThemeProvider for theming and MeetingProvider as root provider for management of meetings.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from 'styled-components';
import {
  MeetingProvider,
  darkTheme
} from 'amazon-chime-sdk-component-library-react';

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <MeetingProvider>
        <App />
      </MeetingProvider>
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Amazon Chime SDK component library provides a light and a dark theme options. We’re using darkTheme, since it looks awesome. We need a few more things, UserActivityProvider, a VideoTileGrid, and a ControlBar. Here’s how they all come together:

<UserActivityProvider>
   <h1>{meeting ? meeting.Title : null}</h1>
   <VideoTileGrid layout="standard" className="videos" />
   <ControlBar
       className="controls-menu"
       layout="docked-horizontal"
       showLabels
   >
       <AudioInputControl />
       <VideoInputControl />
       <ContentShareControl />
   </ControlBar>
</UserActivityProvider>

UserActivityProvider can detect all the changes on remote or local devices. VideoTileGrid automatically captures what’s going on and resizes screens, or gives focus to what is going on at that moment.

This all comes together when we bind our backend with frontend on MeetingManager. Meeting manager is a hook that lets you manage a meeting interface, like joining or starting a meeting etc.

const meetingManager = useMeetingManager();
meetingManager.join({ meetingInfo, attendeeInfo });

AudioInputControl lets you mute or unmute yourself. VideoInputControl lets you start or pause your camera. They both have options to select other input devices. ContentShareControl helps you with sharing your screen. When you click that button, the browser lets you select which screen you would like to share. After that, every other screen that is watching resizes and sees the screen sharing view larger.

Deploy

Backend functions will be deployed via SAM CLI. Let’s go ahead and type into your command line:

sam deploy --guided

This command will guide you through your deployment. As an output, it will give us the API endpoint to use in our application. Let’s copy that and paste it into our frontend application.

We will deploy our frontend application to Amazon S3, but first we need to build, and deploy that output.

yarn build

We can copy and drop contents of this folder to the S3 bucket that we will be serving from. You can check out further details of how to serve static sites from Amazon S3 and Amazon CloudFront from our previous blog post.

Open your browser and start sending your meeting link to your friends!

A Note About Screen Recording

As of December 2020, there’s still no API-way support for recording Chime SDK meetings. A solution at AWS's blog is to spin up a server, connect to meeting as bot, record whole thing and then save it into S3.

Here’s a very detailed explanation of how it is done.

Need assistance with setting up meetings or move them to the cloud? Book an Appointment now to integrate full-scale live meetings!