Amazon CDS Meetings Sandbox

Additional instructions for deploying to AWS Amplify.

Included Demo

This repository includes a simple Amazon Chime SDK Meetings demo that uses the NextJS framework. With this framework, we are able to use CodeSandbox and AWS Amplify to quickly develop and then deploy a server side rendered (SSR) application.

Amazon Chime SDK Meeting Basics

Amazon Chime SDK Meetings are generally composed of a front end client and back end used to create the meeting and attendee. In this demo, we will be combining them in a single NextJS application.

Backend APIs

There are two APIs in this application:

• join.js
• end.js

These APIs will perform the tasks of creating the meeting and attendee and the task of deleting the meeting.

async function createMeeting(requestId) {
  console.log(`Creating Meeting for Request ID: ${requestId}`);

  try {
    const meetingInfo = await chimeSdkMeetingsClient.send(
      new CreateMeetingCommand({
        ClientRequestToken: requestId,
        MediaRegion: 'us-east-1',
        ExternalMeetingId: randomUUID(),
      }),
    );
    return meetingInfo;
  } catch (err) {
    console.info(`Error: ${err}`);
    return false;
  }
}

This function in join.js will use the AWS SDK for Javascript to send the CreateMeetingCommand. With the meetingId returned from this request, we will create an attendee for this meeting and return both results to the front end client.

Front End Client

There are two main components required to join an Amazon Chime SDK meeting used in the front end client:

• Request to back end for meeting information
• Rendering of video tiles

The request to the back end for meeting information is found in the handleJoin function:

const handleJoin = async (event) => {
  const endpoint = '/api/join';
  const options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ requestId: requestId }),
  };
  const response = await fetch(endpoint, options);
  const result = await response.json();

  const meetingSessionConfiguration = new MeetingSessionConfiguration(
    result.data.Meeting,
    result.data.Attendee,
  );

  const meetingOptions = {
    deviceLabels: DeviceLabels.AudioAndVideo,
  };

  await meetingManager.join(meetingSessionConfiguration, meetingOptions);
  await meetingManager.start();

  setMeetingId(result.data.Meeting.MeetingId);
};

In this function, the request is made to the back end API. Once the response has been returned, that information is used to join and start the meeting.

Using React components, the local and remote video tiles are displayed.

<Container>
  <SpaceBetween direction='vertical' size='l'>
    <div className='RemoteVideos'>
      <RemoteVideos />
    </div>
    {audioVideo && (
      <div className='LocalVideo'>
        <LocalVideo />
      </div>
    )}
    <Box>
      <ControlBar
        showLabels={true}
        responsive={true}
        layout='undocked-horizontal'
      >
        <Input
          showClear={true}
          onChange={(e) => setRequestId(e.target.value)}
          sizing={'md'}
          value={requestId}
          placeholder='Request ID'
          type='text'
          style={{ marginLeft: '20px', marginRight: '20px' }}
        />

        <ControlBarButton {...JoinButtonProps} />
        <ControlBarButton {...LeaveButtonProps} />
        <ControlBarButton {...EndButtonProps} />
        <AudioInputControl />
        <AudioOutputControl />
        <VideoInputControl />
      </ControlBar>
    </Box>
  </SpaceBetween>
</Container>

This JSX uses the <RemoteVideos /> and <LocalVideo /> components to render the video along with several buttons to control the meeting and local media devices (microphone, speaker, and camera).

AWS Credentials

Because this demo uses CreateMeeting, CreateAttendee, and DeleteMeeting AWS SDK requests, credentials must be provided. In this demo, we will use a User with a Role with AWS Identity and Access Management (IAM) appropriate permissions. When used in CodeSandbox and AWS Amplify, these credentials will need to be included as environment variables ACCESS_KEY_ID and SECRET_ACCESS_KEY to be used by the APIs:

const config = {
  region: 'us-east-1',
  credentials: {
    accessKeyId: process.env.ACCESS_KEY_ID,
    secretAccessKey: process.env.SECRET_ACCESS_KEY,
  },
};

Deploy to Amplify

After clicking the above button to deploy to AWS Amplify, we will need to complete a few more steps. The process will begin by forking this repository. To complete this, you will need to the GitHub Apps feature to authorize Amplify to use your GitHub repository.

Add Environment Variables

Be sure to add your ACCESS_KEY_ID and SECRET_ACCESS_KEY environment variables during the deployment step. These will be needed during the inital deployment.

Test Locally

Additionally, NextJS can be used locally to develop and test locally. After cloning this repository, add AWS credentials as environment variables in a .env.local file. You can then run a development server via yarn dev.