# Amazon Chime SDK for JavaScript [Amazon Chime SDK Project Board](https://github.com/orgs/aws/projects/12) [Amazon Chime SDK React Components](https://github.com/aws/amazon-chime-sdk-component-library-react) ## Build video calling, audio calling, messaging, and screen sharing applications powered by the Amazon Chime SDK The Amazon Chime SDK is a set of real-time communications components that developers can use to quickly add messaging, audio, video, and screen sharing capabilities to their web or mobile applications. Developers can build on AWS's global communications infrastructure to deliver engaging experiences in their applications. For example, they can add video to a health application so patients can consult remotely with doctors on health issues, or create customized audio prompts for integration with the public telephone network. The Amazon Chime SDK for JavaScript works by connecting to meeting session resources that you create in your AWS account. The SDK has everything you need to build custom calling and collaboration experiences in your web application, including methods to configure meeting sessions, list and select audio and video devices, start and stop screen share and screen share viewing, receive callbacks when media events such as volume changes occur, and control meeting features such as audio mute and video tile bindings. If you are building a React application, consider using the [Amazon Chime SDK React Component Library](https://github.com/aws/amazon-chime-sdk-component-library-react) that supplies client-side state management and reusable UI components for common web interfaces used in audio and video conferencing applications. Amazon Chime also offers [Amazon Chime SDK for iOS](https://github.com/aws/amazon-chime-sdk-ios) and [Amazon Chime SDK for Android](https://github.com/aws/amazon-chime-sdk-android) for native mobile application development. The [Amazon Chime SDK Project Board](https://github.com/orgs/aws/projects/12) captures the status of community feature requests across all our repositories. The descriptions of the columns on the board are captured in this [guide](https://aws.github.io/amazon-chime-sdk-js/modules/projectboard.html). ## Resources - [Amazon Chime SDK Overview](https://aws.amazon.com/chime/chime-sdk/) - [Pricing](https://aws.amazon.com/chime/pricing/#Chime_SDK_) - [Supported Browsers](https://docs.aws.amazon.com/chime-sdk/latest/dg/meetings-sdk.html#mtg-browsers) - [Getting Started Guides](guides/20_Builders_Journey.md) - [Developer Guide](https://docs.aws.amazon.com/chime-sdk/latest/dg/meetings-sdk.html) - [PSTN Audio Developer Guide](https://docs.aws.amazon.com/chime-sdk/latest/dg/build-lambdas-for-sip-sdk.html) - [Control Plane API Reference](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/welcome.html) - [Frequently Asked Questions (FAQ)](https://aws.github.io/amazon-chime-sdk-js/modules/faqs.html) ## Blog posts In addition to the below, here is a list of [all blog posts about the Amazon Chime SDK](https://aws.amazon.com/blogs/business-productivity/tag/amazon-chime-sdk/). ### High level - [High Level Architecture — Building a Meeting Application With the Amazon Chime SDK](https://aws.amazon.com/blogs/business-productivity/building-a-meeting-application-using-the-amazon-chime-sdk/) - [Understanding security in Amazon Chime Application and SDK](https://aws.amazon.com/blogs/business-productivity/understanding-security-in-the-amazon-chime-application-and-sdk/) ### Frontend - [Transforming Audio and Shared Content](https://aws.amazon.com/blogs/business-productivity/transforming-audio-and-shared-content-in-the-amazon-chime-sdk-for-javascript/) - [Quickly Launch an Amazon Chime SDK Application With AWS Amplify](https://aws.amazon.com/blogs/business-productivity/quickly-launch-an-amazon-chime-sdk-application-with-aws-amplify/) ### Full stack and PSTN - [Capturing Amazon Chime SDK Meeting Content](https://aws.amazon.com/blogs/business-productivity/capture-amazon-chime-sdk-meetings-using-media-capture-pipelines/) - [Monitoring and Troubleshooting With Amazon Chime SDK Meeting Events](https://aws.amazon.com/blogs/business-productivity/monitoring-and-troubleshooting-with-amazon-chime-sdk-meeting-events/) - [Build Meetings features into your Amazon Chime SDK messaging application](https://aws.amazon.com/blogs/business-productivity/build-meeting-features-into-your-amazon-chime-sdk-messaging-application/) - [Integrating PSTN callers with Amazon Chime SDK meetings](https://aws.amazon.com/blogs/business-productivity/integrating-pstn-callers-with-amazon-chime-sdk-meetings/) - [Using the Amazon Chime SDK to Create Automated Outbound Call Notifications](https://aws.amazon.com/blogs/business-productivity/using-the-amazon-chime-sdk-to-create-automated-outbound-call-notifications/) - [Building voice menus and call routing with the Amazon Chime SDK](https://aws.amazon.com/blogs/business-productivity/building-voice-menus-and-call-routing-with-the-amazon-chime-sdk/) ### Messaging - [Use channel flows to remove profanity and sensitive content from messages in Amazon Chime SDK messaging](https://aws.amazon.com/blogs/business-productivity/use-channel-flows-to-remove-profanity-and-sensitive-content-from-messages-in-amazon-chime-sdk-messaging/) - [Automated Moderation and Sentiment Analysis Blog (example using Kinesis Data Streams)](https://aws.amazon.com/blogs/business-productivity/automated-moderation-and-sentiment-analysis-with-amazon-chime-sdk-messaging) - [Build chat applications in iOS and Android with Amazon Chime SDK messaging](https://aws.amazon.com/blogs/business-productivity/build-chat-applications-in-ios-and-android-with-amazon-chime-sdk-messaging/) - [Building chat features into your application with Amazon Chime SDK messaging](https://aws.amazon.com/blogs/business-productivity/build-chat-features-into-your-application-with-amazon-chime-sdk-messaging/) - [Integrate your Identity Provider with Amazon Chime SDK Messaging](https://aws.amazon.com/blogs/business-productivity/integrate-your-identity-provider-with-amazon-chime-sdk-messaging/) - [Creating Read-Only Chat Channels for Announcements](https://aws.amazon.com/blogs/business-productivity/creating-read-only-chat-channels-for-announcements-with-amazon-chime-sdk-messaging/) - [Real-time Collaboration Using Amazon Chime SDK messaging](https://aws.amazon.com/blogs/business-productivity/real-time-collaboration-using-amazon-chime-sdk-messaging/) - [Building a Live Streaming Chat Application](https://aws.amazon.com/blogs/business-productivity/build-a-live-streaming-chat-application-using-amazon-ivs-and-amazon-chime-sdk) ### Media Pipelines - [Capture Amazon Chime SDK Meetings Using Media Capture Pipelines](https://aws.amazon.com/blogs/business-productivity/capture-amazon-chime-sdk-meetings-using-media-capture-pipelines/) - [Amazon Chime SDK launches live connector for streaming](https://aws.amazon.com/blogs/business-productivity/amazon-chime-sdk-launches-live-connector-for-streaming/) ### Webinars and videos - [Webinar: Creating Classroom Experiences Using the Amazon Chime SDK](https://www.youtube.com/watch?v=S8T-0xfvXJ8) ## JavaScript SDK Guides The following developer guides cover specific topics for a technical audience. - [API Overview](https://aws.github.io/amazon-chime-sdk-js/modules/apioverview.html) - [Frequently Asked Questions (FAQ)](https://aws.github.io/amazon-chime-sdk-js/modules/faqs.html) - [Content Share](https://aws.github.io/amazon-chime-sdk-js/modules/contentshare.html) - [Quality, Bandwidth, and Connectivity](https://aws.github.io/amazon-chime-sdk-js/modules/qualitybandwidth_connectivity.html) - [Simulcast](https://aws.github.io/amazon-chime-sdk-js/modules/simulcast.html) - [Meeting Events](https://aws.github.io/amazon-chime-sdk-js/modules/meetingevents.html) - [Integrating Amazon Voice Focus and Echo Reduction Into Your Application](https://aws.github.io/amazon-chime-sdk-js/modules/amazonvoice_focus.html) - [Adding Frame-By-Frame Processing to an Outgoing Video Stream](https://aws.github.io/amazon-chime-sdk-js/modules/videoprocessor.html) - [Adding Background Filtering to an Outgoing Video Stream](https://aws.github.io/amazon-chime-sdk-js/modules/backgroundfilter_videofx_processor.html) - [Adapting Video to Limited Bandwidth Using a Priority-Based Video Downlink Policy](https://aws.github.io/amazon-chime-sdk-js/modules/prioritybased_downlink_policy.html) - [Client Event Ingestion](https://aws.github.io/amazon-chime-sdk-js/modules/clientevent_ingestion.html) - [Content Security Policy](https://aws.github.io/amazon-chime-sdk-js/modules/contentsecurity_policy.html) - [Managing Video Quality for Different Video Layouts](https://aws.github.io/amazon-chime-sdk-js/modules/videolayout.html) ## Migration Guides - [Migration from V1.0 to V2.0](https://aws.github.io/amazon-chime-sdk-js/modules/migrationto_2_0.html) - [Migration from V2.0 to V3.0](https://aws.github.io/amazon-chime-sdk-js/modules/migrationto_3_0.html) ## Developer Guides The following developer guides cover the Amazon Chime SDK more broadly. - [PSTN Audio developer guide](https://docs.aws.amazon.com/chime-sdk/latest/dg/build-lambdas-for-sip-sdk.html) - [Messaging developer guide](https://docs.aws.amazon.com/chime-sdk/latest/dg/using-the-messaging-sdk.html) - [Media Pipelines developer guide](https://docs.aws.amazon.com/chime-sdk/latest/dg/media-pipelines.html) ## Examples - [Amazon Chime SDK Samples](https://github.com/aws-samples/amazon-chime-sdk) — Amazon Chime SDK Samples repository - [Meeting Demo](https://github.com/aws/amazon-chime-sdk-js/tree/main/demos/browser) — A browser meeting application with a local server - [Serverless Meeting Demo](https://github.com/aws/amazon-chime-sdk-js/tree/main/demos/serverless) — A self-contained serverless meeting application - [Single JS](https://github.com/aws-samples/amazon-chime-sdk/tree/main/utils/singlejs) — A script to bundle the SDK into a single `.js` file - [Transcription and Media Capture Demo](https://github.com/aws-samples/amazon-chime-media-capture-pipeline-demo) - A demo to demonstrate transcription and media capture capabilities - [Virtual Classroom](https://aws.amazon.com/blogs/business-productivity/building-a-virtual-classroom-application-using-the-amazon-chime-sdk/) — An online classroom built with Electron and React - [Live Events](https://aws.amazon.com/blogs/opensource/how-to-deploy-a-live-events-solution-built-with-the-amazon-chime-sdk/) — Interactive live events solution - [Amazon Chime SDK Smart Video Sending Demo](https://aws.amazon.com/blogs/business-productivity/amazon-chime-sdk-smart-video-sending-demo/) — Demo showcasing how to dynamically display up to 25 video tiles from a pool of up to 250 meeting attendees - [Amazon Chime SDK and Amazon Connect Integration](https://aws.amazon.com/blogs/business-productivity/build-a-video-contact-center-with-amazon-connect-and-amazon-chime-sdk/) — Build a video contact center with Amazon Connect and Amazon Chime SDK - [Device Integration](https://aws.amazon.com/blogs/business-productivity/using-the-amazon-chime-sdk-for-3rd-party-devices/) — Using the Amazon Chime SDK for 3rd party devices - [Messaging](https://aws.amazon.com/blogs/business-productivity/build-chat-features-into-your-application-with-amazon-chime-sdk-messaging/) — Build chat features into your application with Amazon Chime SDK messaging - [Load Testing Applications](https://aws.amazon.com/blogs/business-productivity/load-testing-applications-built-with-the-amazon-chime-sdk/) — A tool to load test audio-video communication applications ### PSTN Audio Examples - [PSTN Dial In](https://github.com/aws-samples/chime-sipmediaapplication-samples) — Add PSTN dial-in capabilities to your Amazon Chime SDK Meeting using SIP media application - [Outbound Call Notifications](https://github.com/aws-samples/amazon-chime-sma-outbound-call-notifications) — Send meeting reminders with SIP media application and get real time results back - [Update In-Progress Call](https://github.com/aws-samples/amazon-chime-sma-update-call) - Update an in-progress SIP media application call via API call ## Troubleshooting and Support Review the resources given in the README and use our [client documentation](https://aws.github.io/amazon-chime-sdk-js/) for guidance on how to develop on the Chime SDK for JavaScript. Additionally, search our [issues database](https://github.com/aws/amazon-chime-sdk-js/issues) and [FAQs](https://aws.github.io/amazon-chime-sdk-js/modules/faqs.html) to see if your issue is already addressed. If not please cut us an [issue](https://github.com/aws/amazon-chime-sdk-js/issues/new/choose) using the provided templates. The blog post [Monitoring and Troubleshooting With Amazon Chime SDK Meeting Events](https://aws.amazon.com/blogs/business-productivity/monitoring-and-troubleshooting-with-amazon-chime-sdk-meeting-events/) goes into detail about how to use meeting events to troubleshoot your application by logging to Amazon CloudWatch. If you have more questions, or require support for your business, you can reach out to [AWS Customer support](https://pages.awscloud.com/GLOBAL-aware-GC-Amazon-Chime-SDK-2020-reg.html). You can review our support plans [here](https://aws.amazon.com/premiumsupport/plans/?nc=sn&loc=1). ## WebRTC Resources The Amazon Chime SDK for JavaScript uses WebRTC, the real-time communication API supported in most modern browsers. Here are some general resources on WebRTC. - [WebRTC Basics](https://www.html5rocks.com/en/tutorials/webrtc/basics/) - [WebRTC Org - Getting started, presentation, samples, tutorials, books and more resources](https://webrtc.github.io/webrtc-org/start/) - [High Performance Browser Networking - WebRTC (Browser APIs and Protocols)](https://hpbn.co/webrtc/) - [MDN - WebRTC APIs](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API) ## Installation Make sure you have Node.js version 12 or higher. Node 14 is recommended and supported. To add the Amazon Chime SDK for JavaScript into an existing application, install the package directly from npm: ``` npm install amazon-chime-sdk-js --save ``` Note that the Amazon Chime SDK for JavaScript targets ES2015, which is fully compatible with all supported browsers. ## Setup ### Meeting session Create a meeting session in your client application. ```js import { ConsoleLogger, DefaultDeviceController, DefaultMeetingSession, LogLevel, MeetingSessionConfiguration } from 'amazon-chime-sdk-js'; const logger = new ConsoleLogger('MyLogger', LogLevel.INFO); const deviceController = new DefaultDeviceController(logger); // You need responses from server-side Chime API. See below for details. const meetingResponse = /* The response from the CreateMeeting API action */; const attendeeResponse = /* The response from the CreateAttendee or BatchCreateAttendee API action */; const configuration = new MeetingSessionConfiguration(meetingResponse, attendeeResponse); // In the usage examples below, you will use this meetingSession object. const meetingSession = new DefaultMeetingSession( configuration, logger, deviceController ); ``` #### Getting responses from your server application You can use an AWS SDK, the AWS Command Line Interface (AWS CLI), or the REST API to make API calls. In this section, you will use the AWS SDK for JavaScript in your server application, e.g. Node.js. See [Amazon Chime SDK API Reference](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/welcome.html) for more information. > ⚠️ The server application does not require the Amazon Chime SDK for JavaScript. ```js const AWS = require('aws-sdk'); const { v4: uuid } = require('uuid'); // You must use "us-east-1" as the region for Chime API and set the endpoint. const chime = new AWS.ChimeSDKMeetings({ region: 'us-east-1' }); const meetingResponse = await chime .createMeeting({ ClientRequestToken: uuid(), MediaRegion: 'us-west-2', // Specify the region in which to create the meeting. }) .promise(); const attendeeResponse = await chime .createAttendee({ MeetingId: meetingResponse.Meeting.MeetingId, ExternalUserId: uuid(), // Link the attendee to an identity managed by your application. }) .promise(); ``` Now securely transfer the `meetingResponse` and `attendeeResponse` objects to your client application. These objects contain all the information needed for a client application using the Amazon Chime SDK for JavaScript to join the meeting. The value of the MediaRegion parameter in the createMeeting() should ideally be set to the one of the media regions which is closest to the user creating a meeting. An implementation can be found under the topic 'Choosing the nearest media Region' in the [Amazon Chime SDK Media Regions documentation](https://docs.aws.amazon.com/chime-sdk/latest/dg/chime-sdk-meetings-regions.html). ### Messaging session Create a messaging session in your client application to receive messages from Amazon Chime SDK for Messaging. ```js import { ChimeSDKMessagingClient } from '@aws-sdk/client-chime-sdk-messaging'; import { ConsoleLogger, DefaultMessagingSession, LogLevel, MessagingSessionConfiguration, } from 'amazon-chime-sdk-js'; const logger = new ConsoleLogger('SDK', LogLevel.INFO); // You will need AWS credentials configured before calling AWS or Amazon Chime APIs. const chime = new ChimeSDKMessagingClient({ region: 'us-east-1'}); const userArn = /* The userArn */; const sessionId = /* The sessionId */; const configuration = new MessagingSessionConfiguration(userArn, sessionId, undefined, chime); const messagingSession = new DefaultMessagingSession(configuration, logger); ``` If you would like to enable prefetch feature when connecting to a messaging session, you can follow the code below. Prefetch feature will send out CHANNEL_DETAILS event upon websocket connection, which includes information about channel, channel messages, channel memberships etc. Prefetch sort order can be adjusted with `prefetchSortBy`, setting it to either `unread` (default value if not set) or `lastMessageTimestamp` ```js configuration.prefetchOn = Prefetch.Connect; configuration.prefetchSortBy = PrefetchSortBy.Unread; ``` ## Building and testing ``` git fetch --tags https://github.com/aws/amazon-chime-sdk-js npm run build npm run test ``` After running `npm run test` the first time, you can use `npm run test:fast` to speed up the test suite. Tags are fetched in order to correctly generate versioning metadata. To view code coverage results open `coverage/index.html` in your browser after running `npm run test`. If you run `npm run test` and the tests are running but the coverage report is not getting generated then you might have a resource clean up issue. In Mocha v4.0.0 or newer the implementation was changed so that the Mocha processes will not force exit when the test run is complete. For example, if you have a `DefaultVideoTransformDevice` in your unit test then you must call `await device.stop();` to clean up the resources and not run into this issue. You can also look into the usage of `done();` in the [Mocha documentation](https://mochajs.org/#asynchronous-code). ## Generating the documentation To generate JavaScript API reference documentation run: ``` npm run build npm run doc ``` Then open `docs/index.html` in your browser. ## Reporting a suspected vulnerability If you discover a potential security issue in this project we ask that you notify AWS/Amazon Security via our [vulnerability reporting page](https://aws.amazon.com/security/vulnerability-reporting/). Please do **not** create a public GitHub issue. ## Usage - [Device](#device) - [Starting a session](#starting-a-session) - [Audio](#audio) - [Video](#video) - [Screen and content share](#screen-and-content-share) - [Attendees](#attendees) - [Monitoring and alerts](#monitoring-and-alerts) - [Stopping a session](#stopping-a-session) - [Meeting readiness checker](#meeting-readiness-checker) - [Selecting an Audio Profile](#selecting-an-audio-profile) - [Starting a Messaging Session](#starting-a-messaging-session) - [Providing application metadata](#providing-application-metadata) ### Device > Note: Before starting a session, you need to choose your microphone, speaker, and camera. **Use case 1.** List audio input, audio output, and video input devices. The browser will ask for microphone and camera permissions. With the `forceUpdate` parameter set to true, cached device information is discarded and updated after the device label trigger is called. In some cases, builders need to delay the triggering of permission dialogs, e.g., when joining a meeting in view-only mode, and then later be able to trigger a permission prompt in order to show device labels; specifying `forceUpdate` allows this to occur. ```js const audioInputDevices = await meetingSession.audioVideo.listAudioInputDevices(); const audioOutputDevices = await meetingSession.audioVideo.listAudioOutputDevices(); const videoInputDevices = await meetingSession.audioVideo.listVideoInputDevices(); // An array of MediaDeviceInfo objects audioInputDevices.forEach(mediaDeviceInfo => { console.log(`Device ID: ${mediaDeviceInfo.deviceId} Microphone: ${mediaDeviceInfo.label}`); }); ``` **Use case 2.** Choose audio input and audio output devices by passing the `deviceId` of a `MediaDeviceInfo` object. Note that you need to call `listAudioInputDevices` and `listAudioOutputDevices` first. ```js const audioInputDeviceInfo = /* An array item from meetingSession.audioVideo.listAudioInputDevices */; await meetingSession.audioVideo.startAudioInput(audioInputDeviceInfo.deviceId); const audioOutputDeviceInfo = /* An array item from meetingSession.audioVideo.listAudioOutputDevices */; await meetingSession.audioVideo.chooseAudioOutput(audioOutputDeviceInfo.deviceId); ``` **Use case 3.** Choose a video input device by passing the `deviceId` of a `MediaDeviceInfo` object. Note that you need to call `listVideoInputDevices` first. If there is an LED light next to the attendee's camera, it will be turned on indicating that it is now capturing from the camera. You probably want to choose a video input device when you start sharing your video. ```js const videoInputDeviceInfo = /* An array item from meetingSession.audioVideo.listVideoInputDevices */; await meetingSession.audioVideo.startVideoInput(videoInputDeviceInfo.deviceId); // Stop video input. If the previously chosen camera has an LED light on, // it will turn off indicating the camera is no longer capturing. await meetingSession.audioVideo.stopVideoInput(); ``` **Use case 4.** Add a device change observer to receive the updated device list. For example, when you pair Bluetooth headsets with your computer, `audioInputsChanged` and `audioOutputsChanged` are called with the device list including headsets. You can use the `audioInputMuteStateChanged` callback to track the underlying hardware mute state on browsers and operating systems that support that. ```js const observer = { audioInputsChanged: freshAudioInputDeviceList => { // An array of MediaDeviceInfo objects freshAudioInputDeviceList.forEach(mediaDeviceInfo => { console.log(`Device ID: ${mediaDeviceInfo.deviceId} Microphone: ${mediaDeviceInfo.label}`); }); }, audioOutputsChanged: freshAudioOutputDeviceList => { console.log('Audio outputs updated: ', freshAudioOutputDeviceList); }, videoInputsChanged: freshVideoInputDeviceList => { console.log('Video inputs updated: ', freshVideoInputDeviceList); }, audioInputMuteStateChanged: (device, muted) => { console.log('Device', device, muted ? 'is muted in hardware' : 'is not muted'); }, }; meetingSession.audioVideo.addDeviceChangeObserver(observer); ``` ### Starting a session **Use case 5.** Start a session. To hear audio, you need to bind a device and stream to an `