How to use AWS Chime and ReactJS to create a video calling?

To build a video calling app with AWS Chime and React, you first create a backend (via AWS Lambda) to trigger CreateMeeting and CreateAttendee APIs. This provides the necessary join tokens for your frontend.

In React, use the Amazon Chime SDK Component Library to simplify the UI. Wrap your app in a MeetingProviderand use the useMeetingManager hook to join sessions. Finally, drop in pre-built components like VideoTileGrid and ControlBar to manage media streams and device toggling effortlessly.

The use of video calling technologies has surged tremendously as we see remote business and remote socializing becoming increasingly common. We can see that video chat apps are gaining a lot of traction, both in terms of commercial and personal use. 

In consideration of this, here is a blog post that describes the simplest, cost-effective, and customizable solution for developing a web-based video chat application. 

AWS Chime is a communications solution that allows users to meet, chat, and make business calls both inside and outside the business, all through one app. Amazon Chime allows developers to access the same communications infrastructure and services that run Amazon Chime to add voice, video, and screen-sharing capabilities to their applications. Here is all you need to know about Amazon Chime: https://aws.amazon.com/chime/

Let’s get into it! 

This article will make sure to explain how to use the AWS SDK and Chime to create a basic video chat with Express as the server and ReactJS as the client.

The process includes the following steps: 

1. Creating a meeting 
2. Creating a meeting attendee 
3. Running the server 
4. Creating the client 

The above two steps come under server-side for which the following npm packages are considered:   

• https://www.npmjs.com/package/aws-sdk 
• https://www.npmjs.com/package/express 
• https://www.npmjs.com/package/cors 
• https://www.npmjs.com/package/uuid 

Now, it is necessary to build a set-up before creating a meeting which includes the following 

• Create a new express node project with a single “get” endpoint — If you’re not sure how to go about accomplishing that, click here – https://expressjs.com/en/starter/hello-world.html 

Configure the Amazon Web Services (AWS) Javascript SDK – https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/configuring-the-jssdk.html

Creating a meeting 

Here is the server code for creating a meeting.

Let’s take a look at each section to see what’s going on.

Once the imports and setting of the AWS region are done, it is required to set up an instance for AWS Chime.

This completes the Chime region and endpoint setup, similar to how AI models like LaMDA rely on well-configured endpoints to handle natural language requests across distributed systems.

The next step comes with creating an endpoint.

The above line shows two key things: 

(1) Adding CORS middleware to the request so we can call it from our React app, which will most likely be on a different domain than the server. 

(2) Since we’ll be creating and processing promises within this function, the endpoint function must be async.

Next, here is the meeting creation logic.

This includes creating a response object that can be used to send information back to the client when the endpoint is reached. 

The meeting response attribute on the response object is then assigned to the result of the create meeting API call. 

The ClientRequestToken parameter is the meeting’s unique identifier (thus the usage of UUID); it can be any string as long as it uniquely identifies the meeting. The MediaRegion is the geographical area where the conference takes place. 

At this point, you may either reply with a response or add an attendee straight away.

Creating a meeting attendee 

The following code will be used to create a meeting attendee:

In the above code, you are performing another call on your chime object in the code above, which returns a promise with the meeting ID and a user ID sent in (ExternalUserId). 

Anything goes for ExternalUserId as long as it uniquely identifies the user.

Running the server 

We should now get the following response when we launch our Express server and call the API endpoint:

The server’s complete code is available at https://github.com/richlloydmiles/chime-video-calling-server-poc.

Creating the client 

The client side does appear to be a little more complicated than the server side, but if you eliminate a lot of the boilerplate code, it’s not that terrible. 

Here is the link to two more additional modules that would be required for the client app.

https://www.npmjs.com/package/amazon-chime-sdk-js 

https://www.npmjs.com/package/axios 

Also, including Axios here makes it an easy way to make API calls.

Below written is the entire POC code:

Here are certain state and ref properties established in our component after the first imports.

The first two will simply be the different elements of our endpoint call response. 

video element is an HTML reference that will hold the stream for your video, and callCreated is a flag that will be set after a successful meeting creation.

Next is the start call function:

The above code includes querying the API endpoint and setting our three state variables in this method. 

Then there’s the function joinVideoCall (which is significantly more bulky than the other functions so let’s break it down).

const logger = new Chime.ConsoleLogger(‘ChimeMeetingLogs’, Chime.LogLevel.INFO); 

To begin, you would configure the logger to allow you to see logs and select the sort of log level you want to record. You may see the logs by opening your console in the browser while the app is running.

The device controller is the module that manages the session’s linked devices.

Here, the API response would be used for the configuration setup.

Finally, you end up building your meeting session, which would be the object you would utilize in the future.

The following link tells all about the videoTile: 

https://aws.github.io/amazon-chime-sdk-js/interfaces/videotile.html

Here is to add an observer that listens for two events: 

1. audioVideoDidStart – this event marks the beginning of your videoTile 
2. videoTileDidUpdate – for binding of videoTile to the video ref 

Next, you have to: 

• Get a list of your currently connected devices 
• Choose the first choice from your list. 
• use it as the current video input. 
• Finally, the input stream is started.

If you wish to add any level of complexity to this POC, you’ll need to update this. 

Here is the jsx portion of a React project, which is quite simple:

You would be connecting your video ref to the video element here, then executing the functions you established before – either initiating or joining the video call. 

callCreated is created to prevent you from joining a call that does not yet exist. 

The entire source code for this is available at https://github.com/richlloydmiles/chime-video-calling-client-poc. 

The server side of the POC was mostly taken from the AWS documentation on Github: https://github.com/aws/amazon-chime-sdk-js.

Conclusion

Creating a video calling POC with AWS Chime and ReactJS is surprisingly accessible once you break it down. By combining: 

• A simple Express backend 
• AWS Chime’s powerful meeting APIs 
• A lightweight React frontend 

You get a clean, working prototype that can be expanded into a full-featured video conferencing solution. 

Just follow the sequence: 

Create Meeting – Create Attendee – Join via React – Render Video Tile 

If you want to take this further, you can add screen sharing, chat, multiple attendee tiles, or real-time audio features.

Discover how Ailoitte AI keeps you ahead of risk

Let's Talk

Sunil Kumar

As a Principle Solution Architect at Ailoitte, Sunil Kumar turns cybersecurity chaos into clarity. He cuts through the jargon to help people grasp why security matters and how to act on it, making the complex accessible and the overwhelming actionable. He thrives where tech meets business