---
title: Building a Multi-Party Video Conference with the Amazon Chime SDK – WebRTC.ventures
description: In a previous post, we showed you how to build a simple two party video chat using the Amazon Chime SDK, which we love as a scalable and flexible live video solution built on top of a globally distributed backend. Today, we will move forward on that code to build a multi-party video conference.
image: https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/Building-a-Multi-Party-Video-Conference-with-the-Amazon-Chime-SDK.png
---
[Skip to content](https://blog.webrtc.ventures/2022/10/building-a-multi-party-video-conference-with-the-amazon-chime-sdk#main-content)
- [WebRTC Services](https://webrtc.ventures/webrtc-development-services/)
Show submenu for WebRTC Services
- [Assess](https://webrtc.ventures/services/assess/)
- [Build](https://webrtc.ventures/services/build/)
- [Integrate](https://webrtc.ventures/services/integrate/)
- [Test](https://webrtc.ventures/services/test/)
- [Manage](https://webrtc.ventures/services/manage/)
- [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/)
- Our Partners
Show submenu for Our Partners
- [Amazon Chime SDK](https://webrtc.ventures/partners/amazon-chime-sdk/)
- Stories of Success
Show submenu for Stories of Success
- [Remote Video Interpreting Platform with Agent Routing](https://webrtc.ventures/successes/remote-video-translation-platform/)
- [WebRTC to SIP Gateway for ASL Interpreters](https://webrtc.ventures/successes/webrtc-to-sip-gateway-for-asl-interpreters/)
- [Audio Listening Device to Improve Surgical Outcomes](https://webrtc.ventures/successes/audio-listening-device-to-improve-surgical-outcomes/)
- [Albania’s First Telemedicine Platform](https://webrtc.ventures/successes/albanias-first-telemedicine-platform/)
- [Automated Video Storytelling with the Amazon Chime SDK](https://webrtc.ventures/successes/automated-video-storytelling-with-the-amazon-chime-sdk/)
- [Large Scale Video Conferencing](https://webrtc.ventures/successes/large-scale-video-conferencing/)
- [Broadcasting and Webcast Control Room](https://webrtc.ventures/successes/live-video-broadcasting-and-webcast-control-room/)
- WebRTC Resources
Show submenu for WebRTC Resources
- [WebRTC Live](https://webrtc.ventures/webrtc-live/)
- [WebRTC Tips](https://www.youtube.com/playlist?list=PLayYqdnyegt3QvxX-Rt6wbFIK8727Z5Oz)
- [WebRTC.ventures Blog](https://webrtc.ventures/blog/)
- [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/)
- [WebRTC.ventures Training Program](https://webrtc.ventures/webrtc-ventures-training-program/)
- [About Us](https://webrtc.ventures/our-team/)
Show submenu for About Us
- [Blog](https://webrtc.ventures/blog/)
- [Our Team](https://webrtc.ventures/our-team/)
- [Jobs](https://webrtc.ventures/jobs/)
Open main navigation
Close main navigation
- [WebRTC Services](https://webrtc.ventures/webrtc-development-services/)
Show submenu for WebRTC Services
- [Assess](https://webrtc.ventures/services/assess/)
- [Build](https://webrtc.ventures/services/build/)
- [Integrate](https://webrtc.ventures/services/integrate/)
- [Test](https://webrtc.ventures/services/test/)
- [Manage](https://webrtc.ventures/services/manage/)
- [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/)
- Our Partners
Show submenu for Our Partners
- [Amazon Chime SDK](https://webrtc.ventures/partners/amazon-chime-sdk/)
- Stories of Success
Show submenu for Stories of Success
- [Remote Video Interpreting Platform with Agent Routing](https://webrtc.ventures/successes/remote-video-translation-platform/)
- [WebRTC to SIP Gateway for ASL Interpreters](https://webrtc.ventures/successes/webrtc-to-sip-gateway-for-asl-interpreters/)
- [Audio Listening Device to Improve Surgical Outcomes](https://webrtc.ventures/successes/audio-listening-device-to-improve-surgical-outcomes/)
- [Albania’s First Telemedicine Platform](https://webrtc.ventures/successes/albanias-first-telemedicine-platform/)
- [Automated Video Storytelling with the Amazon Chime SDK](https://webrtc.ventures/successes/automated-video-storytelling-with-the-amazon-chime-sdk/)
- [Large Scale Video Conferencing](https://webrtc.ventures/successes/large-scale-video-conferencing/)
- [Broadcasting and Webcast Control Room](https://webrtc.ventures/successes/live-video-broadcasting-and-webcast-control-room/)
- WebRTC Resources
Show submenu for WebRTC Resources
- [WebRTC Live](https://webrtc.ventures/webrtc-live/)
- [WebRTC Tips](https://www.youtube.com/playlist?list=PLayYqdnyegt3QvxX-Rt6wbFIK8727Z5Oz)
- [WebRTC.ventures Blog](https://webrtc.ventures/blog/)
- [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/)
- [WebRTC.ventures Training Program](https://webrtc.ventures/webrtc-ventures-training-program/)
- [About Us](https://webrtc.ventures/our-team/)
Show submenu for About Us
- [Blog](https://webrtc.ventures/blog/)
- [Our Team](https://webrtc.ventures/our-team/)
- [Jobs](https://webrtc.ventures/jobs/)
- [Contact us](https://webrtc.ventures/contact/)
[Contact us](https://webrtc.ventures/contact/)
Oct 28, 2022 12:00:00 AM
# Building a Multi-Party Video Conference with the Amazon Chime SDK
[Marcell Silva](https://blog.webrtc.ventures/author/marcell-silva)
Share: [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://blog.webrtc.ventures/2022/10/building-a-multi-party-video-conference-with-the-amazon-chime-sdk) [X Twitter icon](https://twitter.com/intent/tweet?url=https://blog.webrtc.ventures/2022/10/building-a-multi-party-video-conference-with-the-amazon-chime-sdk) [envelope icon](mailto:?body=https://blog.webrtc.ventures/2022/10/building-a-multi-party-video-conference-with-the-amazon-chime-sdk)
In a previous post, we showed you [how to build a simple two party video chat using the Amazon Chime SDK](https://webrtc.ventures/2022/10/building-a-video-chat-with-the-amazon-chime-sdk/). Refer to that post for more on why we highly recommended the [Amazon Chime SDK](https://aws.amazon.com/chime/chime-sdk/) for anyone looking for a scalable and flexible live video solution built on top of a globally distributed backend. Today, we will move forward on that code to support as many people/devices as you want.
Remember, the full code of this demo is available on GitHub at:
- [https://github.com/WebRTCventures/simple-chime-frontend](https://github.com/WebRTCventures/simple-chime-frontend)
- [https://github.com/WebRTCventures/simple-chime-backend](https://github.com/WebRTCventures/simple-chime-backend)
The Amazon Chime SDK is a good combination of a simple backend that gives you a lot of flexibility on the frontend implementation. Because of that, we won’t need to make any changes to the backend code from our initial two-party call. Hence, this article will focus on how to change the frontend code to allow for multiple users. In the end, we hope you will see how this allows us to implement any sort of visual design on top of the Amazon Chime SDK, which is different than other CPaaS’s which require you to work within their layout options for a video chat.
# Let’s draw a picture first
Hold your breath, we’ll see each step explained and exemplified more ahead:
[ ](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/chime-multiple-peers-flow.png)
This means we’ll need pre-existing DOM elements controlled by React which must always be ready to be used by the Amazon Chime SDK.
In other words, when a new user joins, Amazon Chime SDK will ask: “Hey, React, quickly, give me a video tag I can use for this person”. React must have that available to answer, locking that slot for a given user.
React control is important to prevent having two users using the same video tag, and at the same time giving the developer full control of how that tag will look like. Maybe a grid view? Having users floating around the page? Hiding them for a fullscreen mode? Showing only the most three active users? You name it. As a developer, all UI control is in your hands while the Amazon Chime SDK only cares for handling the WebRTC logic.
When a user leaves the meeting, the SDK will notify React again. React will mark that slot as free to be used by another user.
Here’s an example of how it’ll work:
[ ](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/chime-multiple-peers-example.png)
Make sure you understand this algorithm before trying to implement it more ahead.
# Getting to work
If you already have the code from the previous post use your favorite code editor and open it, this is a direct sequel. We’ll keep using a single file called App.js.
We begin replacing our *`VideoRemoteOutput`* by a new component called *`RemoteVideosSection`* that will have all DOM elements for a given number of slots. It could be any number, but just for the sake of simplicity let’s keep it at 25. So we’ll have 25 slots of video boxes, and we’ll store their “ref” elements inside a single “ref” hook.
```
function RemoteVideosSection({ meetingSession }) {
const videoSlotsRef = useRef(
Array(25)
.fill()
.map(() => ({ tileId: null, video: null }))
);
return (
Other users
{!enabledTiles.length && (
No remote peers have joined yet.
)}
{videoSlotsRef.current.map((slot, index) => (
))}
);
}
```
JavaScript
Copy
Remember to indeed replace its usage in the *`App`* component, still passing that *`meetingSession`* prop that the previous component was already receiving.
Worth mentioning that we don’t want to condition the video elements’ existence, only their visibility, and the *enabled* prop of our custom *PeerBox* from the previous code should handle it.
That’s because React uses Virtual DOM to make its JSX syntax work. And V-DOM is just plain JavaScript data that must be [reconciled](https://reactjs.org/docs/reconciliation.html) with the real DOM when React decides it. On the other hand, the Amazon Chime SDK will have its own decisions of what to do with given elements at its own time. And we don’t want these two asynchronous tools concurring aggressively to the same video tags.
Imagine that between component renderings the SDK tries to pick a video element that it’s not yet real and only exists in V-DOM, we’d have to implement a retrying mechanism to fix that, or some other more complex flow. So let’s keep it simple following that lock algorithm we saw in drawings before.
Also, the wording here might be confusing, because we’re handling the same “thing” in different levels of abstractions. Let’s agree on calling “slots” the interface elements like our video tags for HTML/JSX/DOM, while “tile” is talking about state data managed by React and the Amazon Chime SDK. What we’re doing above is initializing references that will link slots to tiles.
The interface should be working fine there, without errors. Now, let’s proceed with declaring a few state hooks. Because, although we have good refs covering our UI, we’ll use it just for integration with the Amazon Chime SDK, and we’ll still want to rely on reactive state for managing visual details. Here is the state and a few utility access functions for it:
```
const [enabledTiles, setEnabledTiles] = useState([]);
const enableTile = (tileId) =>
setEnabledTiles((previous) => [...previous, tileId]);
const disableTile = (tileId) =>
setEnabledTiles((previous) => previous.filter((p) => p !== tileId));
const isEnabledTile = (tileId) => enabledTiles.includes(tileId);
```
JavaScript
Copy
And then, another hook for handling side effects, i.e., SDK integration:
```
useEffect(() => {
const findSlot = (tileId) =>
videoSlotsRef.current.find((slot) => slot.tileId === tileId) ||
videoSlotsRef.current.find((slot) => !slot.tileId);
const mapToAssignedSlot = (assigningTileId, assigningSlot) =>
videoSlotsRef.current.map((slot) =>
slot.video === assigningSlot.video
? { ...slot, tileId: assigningTileId }
: slot
);
const mapToUnassignedSlot = (unassigningTileId) =>
videoSlotsRef.current.map((slot) =>
slot.tileId === unassigningTileId ? { ...slot, tileId: null } : slot
);
const mutateVideoSlotsRef = (updatingSlots) => {
videoSlotsRef.current = updatingSlots;
};
const observer = {
videoTileDidUpdate: (tileState) => {
// TODO: video updated
},
videoTileWasRemoved: (tileId) => {
// TODO: video removed
},
};
meetingSession.audioVideo.addObserver(observer);
}, [meetingSession]);
```
JavaScript
Copy
Our code is getting more complicated now, I know! Keep remembering the final goal: to let React control which slot is available or not, and how can the Amazon Chime SDK acquire/assign a slot and release/unassign a given tile to it.
That *`findSlot`* function searches the refs looking for the first useful slot, i.e., a free slot to be used by a new tile (or slot used by an updating tile). Remember that at this point all slots have an element associated with it because of our JSX loop.
In the meanwhile, *`mapToAssignedSlot`* and *`mapToUnassignedSlot`* are just basic functions to help marking if the slot will be locked or unlocked for SDK usage, that’s being done by associating or dissociating a tile to that slock. If the slot has a *`tileId`*, it’s in use and locked to that tile, otherwise it’s free.
That *`mutateVideoSlotsRef`* just commits whatever change decided by the other helper functions. And then right after it we have the typical observer boilerplate being configured for letting us know what the SDK is doing.
While there shouldn’t be any errors, nothing is happening yet. Now let’s put in use all of these functions rewriting the *`observer`* object:
```
const observer = {
videoTileDidUpdate: (tileState) => {
if (
!tileState.boundAttendeeId ||
tileState.localTile ||
tileState.isContent
) {
return;
}
const slot = findSlot(tileState.tileId);
if (!slot) {
throw new Error("Failed to find slot for remote peer.");
}
mutateVideoSlotsRef(mapToAssignedSlot(tileState.tileId, slot));
if (tileState.active) {
enableTile(tileState.tileId);
}
meetingSession.audioVideo.bindVideoElement(
tileState.tileId,
slot.video
);
},
videoTileWasRemoved: (tileId) => {
mutateVideoSlotsRef(mapToUnassignedSlot(tileId));
disableTile(tileId);
},
};
```
JavaScript
Copy
Now things are easier, we’re just using what we created before. First, on *`videoTileDidUpdate`*, we have a condition guarding ensuring that the rest of the function will only handle remote people activity. Then we find a good slot to be used according to our algorithm and assign the tile given by the SDK to the found slot. And you’ll notice that at the same time we also update the state hook for JSX reaction. This takes care of React interests over this resource.
The next step is to take care of the WebRTC logic. In this case, it’s just calling that `bindVideoElement`method providing the matching slot and tile*.*
And finally, on *`videoTileWasRemoved`*, the SDK is telling us that it did its mojo under the hood to finish that peer activity, so we’ll update our React logic by unassigning the given tile from that slot, making it available again.
One last detail, is that JSX must include an update:
```
```
JavaScript
Copy
Just a visual touch to hide unused slots.
Here’s what it should look like if I try to join with 3 different devices (and/or an incognito browser window):
[ ](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/Marcel3a.png)
# Final considerations
“With great power, comes great responsibility.”
The Amazon Chime SDK does not prescribe how your video front end should look. You can lay out the videos any way that you want. This is a great power, but also means you need to put a bit more work into the frontend to handle the video layouts.
This is different from most video client SDKs available out there. Other CPaaS’s will typically have you specify a *div* element for where the video should go on your page. From the confines of that div element, the CPaaS controls everything visually for you, adding and removing new children elements at their own will. While that is easier on you as a developer, it also means much less flexibility and less control over your UI, as well as causing problems with React reconciliation like mentioned before.
And if you need to change anything in about the video UI in other CPaaS’s, you will be limited to their library API options, or you may have to try to query the elements from the DOM to inject your own custom changes. This again risks getting in into a battle between V-DOM and DOM. For those reasons, we like the power (and responsibility) that comes with the way we can implement our own front ends for the Amazon Chime SDK.
One nice touch, in case you had the advanced curiosity, is that if you open *chrome://webrtc-internals/* to debug the connections being made, you’ll see the Amazon Chime SDK optimizing the number of connections. Instead of the typical SFU approach creating N or 2\*N connections for each of N users, the SDK is actually only using 1 connection to receive N user streams. And all by default, you don’t have to worry about this logic.
As for next steps, cool features to be added are maybe having one big video feed focusing on the person with the most active voice in the call, like a lot of video apps do. Since you have full control over the UI, your imagination is the limit for any styling choice you’d like. I’m a big fan of dark themes, so the demo repository has it implemented.
***Are you looking for expert design and development help with building your live video application? Our team of experts at WebRTC.ventures have years of experience with Amazon and close relationships with the Amazon Chime SDK team. We would be happy to help you build, deploy, and scale your live video application. We can even offer managed services and hosting around your Amazon Chime SDK application so that you can offload everything about it to our team.*** [***Contact us today for more information!***](https://webrtc.ventures/contact/)
---
**Other posts in this series:**
- [Building a Video Chat with the Amazon Chime SDK ](https://webrtc.ventures/2022/10/building-a-video-chat-with-the-amazon-chime-sdk/)
- [Active Speaker Detection with the Amazon Chime SDK ](https://webrtc.ventures/2022/11/active-speaker-detection-with-the-amazon-chime-sdk/)
[CPaaS](https://blog.webrtc.ventures/tag/cpaas), [Managed Services](https://blog.webrtc.ventures/tag/managed-services), [Events](https://blog.webrtc.ventures/tag/events), [Video Conferencing](https://blog.webrtc.ventures/tag/video-conferencing), [Real Time Weekly](https://blog.webrtc.ventures/tag/real-time-weekly), [WebRTC Architecture](https://blog.webrtc.ventures/tag/webrtc-architecture), [Broadcasting](https://blog.webrtc.ventures/tag/broadcasting), [Medical](https://blog.webrtc.ventures/tag/medical), [WebRTC Live](https://blog.webrtc.ventures/tag/webrtc-live), [Showcase](https://blog.webrtc.ventures/tag/showcase), [Thoughts](https://blog.webrtc.ventures/tag/thoughts), [Vonage](https://blog.webrtc.ventures/tag/vonage), [Daily](https://blog.webrtc.ventures/tag/daily), [Jobs](https://blog.webrtc.ventures/tag/jobs), [Contact Centers](https://blog.webrtc.ventures/tag/contact-centers), [Telehealth](https://blog.webrtc.ventures/tag/telehealth), [Education](https://blog.webrtc.ventures/tag/education), [Technical](https://blog.webrtc.ventures/tag/technical), [General](https://blog.webrtc.ventures/tag/general), [Story of success](https://blog.webrtc.ventures/tag/story-of-success), [The WebRTC.ventures Blog](https://blog.webrtc.ventures/tag/the-webrtc-ventures-blog), [Testing](https://blog.webrtc.ventures/tag/testing), [Gaming](https://blog.webrtc.ventures/tag/gaming), [DevOps](https://blog.webrtc.ventures/tag/devops), [Symbl.ai](https://blog.webrtc.ventures/tag/symbl-ai)
## Related posts
[](https://blog.webrtc.ventures/2022/10/building-a-video-chat-with-the-amazon-chime-sdk)
## [Building a Video Chat with the Amazon Chime SDK ](https://blog.webrtc.ventures/2022/10/building-a-video-chat-with-the-amazon-chime-sdk)
[Marcell Silva](https://blog.webrtc.ventures/author/marcell-silva)
Oct 5, 2022 12:00:00 AM
The Amazon Chime SDK is an Amazon service that lets you create multimedia calls using...
[Read more](https://blog.webrtc.ventures/2022/10/building-a-video-chat-with-the-amazon-chime-sdk)
[](https://blog.webrtc.ventures/2022/11/active-speaker-detection-with-the-amazon-chime-sdk)
## [Active Speaker Detection with the Amazon Chime SDK](https://blog.webrtc.ventures/2022/11/active-speaker-detection-with-the-amazon-chime-sdk)
[Marcell Silva](https://blog.webrtc.ventures/author/marcell-silva)
Nov 21, 2022 12:00:00 AM
In previous posts, we showed you how to build a two-party video chat and how to build a multi-party...
[Read more](https://blog.webrtc.ventures/2022/11/active-speaker-detection-with-the-amazon-chime-sdk)
[](https://blog.webrtc.ventures/2020/12/amazon-chime-sdk)
## [A Guide to the Amazon Chime SDK](https://blog.webrtc.ventures/2020/12/amazon-chime-sdk)
[Hamza Nasir](https://blog.webrtc.ventures/author/hamza-nasir)
Dec 7, 2020 12:00:00 AM
The pandemic has forced the big players in cloud computing to offer communication services, of...
[Read more](https://blog.webrtc.ventures/2020/12/amazon-chime-sdk)
### WebRTC.Ventures Services
...
- Assess
- Build
- Integrate
- Test
- Deploy & Manage
### Contact Us
...
**Video should be an opportunity, not a headache.**
We’re here to build, integrate, assess and optimize, test, and even deploy and manage your live video application.
[Contact us](https://blog.webrtc.ventures/2022/10/building-a-multi-party-video-conference-with-the-amazon-chime-sdk#contact)
### WebRTC Live
...
View [past episodes](https://blog.webrtc.ventures/webrtc-live/) of our webinar interview series about the latest webRTC use cases and technical updates. Join our mailing list to learn about upcoming episodes!
We’re one of the few agencies in the world dedicated to WebRTC development. This dedication and experience is why so many people trust us to help bring live video application dreams to life.
### Let's get started!
###### **[Contact us today](https://webrtc.ventures/contact/)**
**[info@webrtc.ventures](mailto:info@webrtc.ventures)**
### Join our mailing list
We don't e-mail often (a few times a month max), and it will be worth it when we do! Of course, we respect your privacy and will not share your contact information.
© 2023 WebRTC.ventures, an [AgilityFeat](https://agilityfeat.com/) company / [Privacy Policy](https://webrtc.ventures/privacy-policy//)
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Marcell Silva",
"url" : "https://blog.webrtc.ventures/author/marcell-silva"
},
"dateModified" : "2024-04-03T18:38:53.565Z",
"datePublished" : "2022-10-28T04:00:00.000Z",
"headline" : "Building a Multi-Party Video Conference with the Amazon Chime SDK – WebRTC.ventures",
"image" : [ "https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/Building-a-Multi-Party-Video-Conference-with-the-Amazon-Chime-SDK.png" ],
"mainEntityOfPage" : {
"@id" : "https://blog.webrtc.ventures/2022/10/building-a-multi-party-video-conference-with-the-amazon-chime-sdk",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://blog.webrtc.ventures/hubfs/logo-main-light.svg"
}
}
}
```