Web application component architecture - Amazon Chime SDK

Web application component architecture

This diagram shows the architecture of an Amazon Chime SDK web client application:

The architecture of an Amazon Chime SDK web application.

A web application typically consists of an HTML and CSS user interface layer powered by the application business logic layer. You can build the web application in plain HTML and JavaScript, or you can use UI frameworks such as React and Angular.

The web application’s business logic layer interacts with the Amazon Chime SDK client library for JavaScript through a set of JavaScript APIs. The DefaultMeetingSession is the root object of the SDK. When building a server application you use MeetingSessionConfiguration to initialize it with meeting and attendee information and join the meeting. The DefaultMeetingSession also exposes the AudioVideoFacade , which enables the business logic layer to take actions, and to register callbacks that update the user interface when the underlying state of the session changes.

The Amazon Chime SDK client library for JavaScript is open-source and has a set of customizable components that you can override as needed. The default implementations allow you to build a complete unified communications application such as our demo MeetingV2 application. The Amazon Chime SDK client library for JavaScript depends on two other libraries:

  • Browser-Detect for identifying the browser type and capabilities.

  • ProtoBufJs to encode and decode signaling commands and responses needed to join a media sessions.

The Amazon Chime SDK also depends on the browser or Electron application to provide the Device Management APIs and the WebRTC implementation for an audio-video session.

The source Amazon Chime SDK client library for JavaScript is in TypeScript, but you can use the TypeScript compiler to compile it to JavaScript. You can then bundle it using a module bundler such as Webpack. As a best practice, install the Amazon Chime SDK client library for JavaScript from the NPM registry, and then use it in a CommonJS environment. AWS also provides a rollup script for bundling the Amazon Chime SDK into a minified JS file in case you want to directly include it as a script tag in your HTML .