1on1 call demo using Chime SDK meetings, Next.js, AppSync, and CDK!

Overview

Chime SDK Meetings 1on1 call demo with Next.js / AppSync / CDK

Build

This is a sample project to demonstrate Chime SDK meetings for one-on-one call with Next.js, AWS AppSync, Amazon Cognito and AWS Cloud Development Kit (CDK).

This sample includes:

  • 1on1 call with authN/Z leveraging Chime SDK meetings
  • GraphQL endpoint to call Chime SDK APIs and subscribe calling events
  • Secure your backend API with JWT authentication
  • Next.js frontend assets distribution via CloudFront
  • Instant deployment of the entire app by a single command

Architecture Overview

architecture

We use AppSync, a managed GraphQL service for backend API, enabling a realtime notification when a user is called, and other serverless services to reduce heavy lifting of managing servers.

How to use

When you open this web app, you need first to sign up a Cognito user. After signing in to the user, a page like the below image will be shown.

gui

The top text box MyID shows your Cognito user ID, which is used like a "phone number" in this case. When you want to make a call to a user, you must specify a target's user ID in the next text field Target ID. When you input the target user ID and click the CALL button, a meeting is created and the target user is notified via AppSync subscription. Note that the receiver must open the page before a call is made to receive a notfication; otherwise the call is discarded.

If the target user clicked the RECEIVE A CALL button, they will also join the meeting and can start a one-on-one call.

You can also specify audio devices via the Chime control panel.

Deploy

You need the following tools to deploy this sample:

Then run the following commands:

npm ci
npx cdk bootstrap
npx cdk deploy

Initial deployment usually takes about 10 minutes. You can also use npx cdk deploy command to deploy your changes.

After a successful deployment, you will get a CLI output like the below:

 ✅  ChimeSdkDemoStack

✨  Deployment time: 324.9s

Outputs:
ChimeSdkDemoStack.AuthUserPoolClientId8216BF9A = xxxxxxxxxxxxxxx
ChimeSdkDemoStack.AuthUserPoolIdC0605E59 = ap-northeast-1_yyyyyy
ChimeSdkDemoStack.BackendApiBackendApiUrl4A0A7879 = https://zzzzzz.appsync-api.ap-northeast-1.amazonaws.com/graphql
ChimeSdkDemoStack.FrontendDomainName = https://vvvvvvvv.cloudfront.net
Stack ARN:
arn:aws:cloudformation:ap-northeast-1:123456789012:stack/ChimeSdkDemoStack/1111

Opening the URL in FrontendDomainName output, you can now try the sample app on your browser.

How it works

Here is a sequence diagram for starting a call. You can refer to the official documents for further details.

sequence

Clean up

To avoid incurring future charges, clean up the resources you created.

You can remove all the AWS resources deployed by this sample running the following command:

npx cdk destroy --force

Security

See CONTRIBUTING for more information.

License

This library is licensed under the MIT-0 License. See the LICENSE file.

You might also like...

A sample CICD Deployment Pipeline for your Alexa Skills, using AWS CDK, CodeBuild and CodePipeline

A sample CICD Deployment Pipeline for your Alexa Skills, using AWS CDK, CodeBuild and CodePipeline

Alexa Skils - CI/CD CDK Pipeline This repository will help you setting up a CI/CD pipeline for your Alexa Skills. This pipeline is powered by AWS Clou

Nov 23, 2022

An AWS Cloud Native application using CDK that defines a Serverless Event Driven application for interacting with Twitter and utilising Machine Learning / AI as a Service.

An AWS Cloud Native application using CDK that defines a Serverless Event Driven application for interacting with Twitter and utilising Machine Learning / AI as a Service.

AWS Serverless Event Driven Twitter Bot An AWS Cloud Native application using CDK (Written in TypeScript) that defines a Serverless Event Driven appli

Dec 18, 2022

Interactive 3D plotting with a simple function call using Three.js

Interactive 3D plotting with a simple function call using Three.js

About Generate interactive 3d plots with a simple function call. Function returns a Three.js scene which can be customized as needed. Basic function c

Oct 20, 2022

Sample AWS microservices app with service discovery defined using the CDK. Uses Docker + Fargate & ELB.

Sample AWS microservices app with service discovery defined using the CDK. Uses Docker + Fargate & ELB.

AWS Microservices Demo with CDK and Fargate About Simple AWS microservice-based app. Consists of two Spring Boot based services: Name Service GET /nam

Nov 23, 2022

A sample code that implements a simple Web app using AWS CDK v2

A sample code that implements a simple Web app using AWS CDK v2

A sample code that implements a simple Web app using AWS CDK v2. This code will be introduced in a live coding session at AWS Summit Online Japan 2022 Developer Zone in 2022/5/25.

Dec 5, 2022

This is a demo of updating a map to show air quality data for the user’s current location using Next.js Advanced Middleware, powered by Netlify Edge Functions.

Show Local Air Quality Based on the User's Location Use AQI data to show the air quality near the current user. This is built using Next.js Advanced M

Nov 4, 2022

Inside-out promise; lets you call resolve and reject from outside the Promise constructor function.

Inside-out promise; lets you call resolve and reject from outside the Promise constructor function.

Feb 28, 2022

fcall, fetch and call any remote hot functions, anywhere, anytime, without installations or configurations.

fcall, fetch and call any remote hot functions, anywhere, anytime, without installations or configurations.

Sep 20, 2022
Comments
  • Bump undici and @graphql-codegen/cli in /frontend

    Bump undici and @graphql-codegen/cli in /frontend

    Bumps undici to 5.14.0 and updates ancestor dependency @graphql-codegen/cli. These dependencies need to be updated together.

    Updates undici from 5.5.1 to 5.14.0

    Release notes

    Sourced from undici's releases.

    v5.14.0

    What's Changed

    New Contributors

    Full Changelog: https://github.com/nodejs/undici/compare/v5.13.0...v5.14.0

    v5.13.0

    What's Changed

    New Contributors

    ... (truncated)

    Commits

    Updates @graphql-codegen/cli from 2.8.0 to 2.16.1

    Release notes

    Sourced from @​graphql-codegen/cli's releases.

    @​graphql-codegen/cli@​2.11.3

    Patch Changes

    • b75ca4b48: Prevent cli from early returning when run init command.

    @​graphql-codegen/cli@​2.11.2

    Patch Changes

    • 8cd1526c4: chore(deps): update @whatwg-node/fetch to fix vulnerability

    @​graphql-codegen/cli@​2.11.1

    Patch Changes

    • 20bf4b225: support for path containing "&" characters

    @​graphql-codegen/cli@​2.11.0

    Minor Changes

    • fd6be805b: feat(cli): add a dry-run mode with --check cli flag

    Patch Changes

    • 6a2e328e6: feat(cli): --verbose and --debug flags
    • Updated dependencies [6a2e328e6]
      • @​graphql-codegen/plugin-helpers@​2.6.1

    @​graphql-codegen/cli@​2.10.0

    Minor Changes

    • 273ad602f: Replace cross-undici-fetch with @​whatwg-node/fetch to fix security vulnerability from undici

    Patch Changes

    • cc18923d3: feat(hooks): forward hooks logs to debug logs

    @​graphql-codegen/cli@​2.9.1

    Patch Changes

    • e2cfc5c36: fix(cli): prevent duplicated error messages on fail (without watcher)
    Changelog

    Sourced from @​graphql-codegen/cli's changelog.

    2.16.1

    Patch Changes

    2.16.0

    Minor Changes

    Patch Changes

    • Updated dependencies [c0183810f]:
      • @​graphql-codegen/plugin-helpers@​3.1.0

    2.15.1

    Patch Changes

    2.15.0

    Minor Changes

    2.14.1

    Patch Changes

    ... (truncated)

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2 in /frontend

    Bump decode-uri-component from 0.2.0 to 0.2.2 in /frontend

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump json5 and eslint-config-next in /frontend

    Bump json5 and eslint-config-next in /frontend

    Bumps json5 to 2.2.3 and updates ancestor dependency eslint-config-next. These dependencies need to be updated together.

    Updates json5 from 2.2.1 to 2.2.3

    Release notes

    Sourced from json5's releases.

    v2.2.3

    v2.2.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).
    Changelog

    Sourced from json5's changelog.

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).
    Commits
    • c3a7524 2.2.3
    • 94fd06d docs: update CHANGELOG for v2.2.3
    • 3b8cebf docs(security): use GitHub security advisories
    • f0fd9e1 docs: publish a security policy
    • 6a91a05 docs(template): bug -> bug report
    • 14f8cb1 2.2.2
    • 10cc7ca docs: update CHANGELOG for v2.2.2
    • 7774c10 fix: add proto to objects and arrays
    • edde30a Readme: slight tweak to intro
    • 97286f8 Improve example in readme
    • Additional commits viewable in compare view

    Updates eslint-config-next from 12.2.2 to 13.1.1

    Release notes

    Sourced from eslint-config-next's releases.

    v13.1.1

    Core Changes

    • Exclude srcset from svg image: #44308
    • Fix CSS resource path not matched in __entry_css_files__: #44310
    • Fix next/image 404 when basePath and trailingSlash defined: #44312

    Documentation Changes

    • Remove experimental for modularizeImports from docs and example: #44311

    Example Changes

    • Updated dependencies for with-tailwindcss example: #44289

    Misc Changes

    • Use turbo for packing files in test setup: #44074

    Credits

    Huge thanks to @​JanKaifer, @​Nutlope, @​styfle, and @​chibicode for helping!

    v13.1.1-canary.1

    Core Changes

    • Fix next/image 404 when basePath and trailingSlash defined: #44312

    Documentation Changes

    • Remove experimental for modularizeImports from docs and example: #44311

    Credits

    Huge thanks to @​chibicode and @​styfle for helping!

    v13.1.1-canary.0

    Core Changes

    • Exclude srcset from svg image: #44308
    • Fix CSS resource path not matched in __entry_css_files__: #44310

    Example Changes

    • Updated dependencies for with-tailwindcss example: #44289

    Misc Changes

    • Use turbo for packing files in test setup: #44074

    ... (truncated)

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
AWS Samples
AWS Samples
Learn Web 2.0 and Web 3.0 Development using Next.js, Typescript, AWS CDK, AWS Serverless, Ethereum and AWS Aurora Serverless

Learn Web 2.0 Cloud and Web 3.0 Development in Baby Steps In this course repo we will learn Web 2.0 cloud development using the latest state of the ar

Panacloud Multi-Cloud Internet-Scale Modern Global Apps 89 Jan 3, 2023
Movehat is a TypeScript SDK for Move on Sui built on top of Sui's TypeScript SDK and our fork of Ian Macalinao's `move-ts`.

Movehat Movehat is a TypeScript SDK for Move on Sui built on top of Sui's TypeScript SDK and our fork of Ian Macalinao's move-ts. Movehat aspires to b

Pentagon 10 Sep 30, 2022
The iofod SDK provides developers with the ability to interact with the main iofod interface within the Web worker, enabling rapid development of iofod extensions through the SDK.

iofod-sdk English | 简体中文 The iofod SDK provides developers with the ability to interact with the main iofod interface within the Web worker, enabling

iofod, Inc. 47 Oct 17, 2022
This is a demo project for the SecTester JS SDK framework, with some installation and usage examples

SecTester SDK Demo Table of contents About this project About SecTester Setup Fork and clone this repo Get a Bright API key Explore the demo applicati

NeuraLegion 15 Dec 16, 2022
Particle Network Web SDK Demo.

Particle Web Demo This repository is Auth Service sample source. It supports EVM-compatiable chains, more chains and more features coming soon! Learn

Particle Network 7 Aug 20, 2022
Sample code for resizing Images with Lambda@Edge using the Custom Origin. You can deploy using AWS CDK.

Resizing Images with Lambda@Edge using the Custom Origin You can resize the images and convert the image format by query parameters. This Lambda@Edge

AWS Samples 16 Dec 11, 2022
Nftix-demo-ui - Demo UI used in my NFT course on Egghead.io

NFTix Demo UI This repository contains the UI used for my Egghead course on building a NFT ticketing system ?? ?? If you're watching the videos, use t

Ryan Harris 10 Dec 17, 2022
Create a 3D interactive object using images and one simple JS call

#Interactive 3D by Pete R. Create a 3D interactive object using images and one simple JS call Created by Pete R., Founder of BucketListly Demo View de

Pete R. 377 Nov 17, 2022
Example Serverless DynamoDB integration tests using Jest, TypeScript and the AWS CDK

serverless dynamodb integration tests ?? Example Serverless DynamoDB integration tests using Jest, TypeScript and the AWS CDK Introduction How to inte

Lee Gilmore 8 Nov 4, 2022
awsrun 189 Jan 3, 2023