Building a Virtual Classroom Application using the Amazon Chime SDK

This post demonstrates how to build a virtual classroom application using the real-time communication capabilities of the Amazon Chime SDK. Whether you are looking for a starter or a scalable solution, you can use the classroom demo application included in the Amazon Chime GitHub repository as part of this blog to get started.

A classroom session built using the Amazon Chime SDK can have up to 16 video feeds, 100 audio participants, and two content sharing sessions. Video resolution of up to 720p is rendered using hardware acceleration in each session and up to 250 concurrent classroom sessions can be supported when launched in a single AWS account. Classrooms can be hosted in one of 14 media regions around the globe nearest to the attendees for optimal latency and experience.

Using the demo application, teachers can create a classroom session with a unique subject name. After the class begins, teachers, and students have the ability to share their videos, chat, and mute themselves. Teachers can also share content using video-based sharing and mute all students with a special ‘focus mode’.

Solution overview

The demo application includes scripts that can be executed in an AWS Cloud9 environment. It comes pre-packaged with tooling to build the classroom application and deploy other AWS resources including a chat application. Once deployed, a URL to download the Windows and Mac versions of the application is generated.

After the demo application is downloaded and installed on a machine, the teacher can log into the application and create a classroom. The demo application automatically places the meeting in an Amazon Chime supported media region closest to where the teacher is geographically located for optimal audio and video quality. The teacher can share the name of the classroom as necessary and students can download the demo application and enter the class name at the time of the class to join.

Note that for this demo the online classroom is invalidated if certain conditions are met, such as:

• If no one logs in within 5 minutes of its classroom creation
• If there is only only one participant for 30 minutes
• If the class extends longer than 24 hours. If this happens, teachers can create a new classroom.

Once the class commences, the audio and video sessions flow using a Web-RTC compliant protocol through the Amazon Chime media servers. Messages interchanged in the classroom flow through a Web-Sockets application enabled in Amazon API Gateway that is deployed as part of the setup. As classrooms are created and students join and leave, you can receive events via AWS CloudWatch events if configured for tracking attendance.

Demo application walk-through

Prerequisites

To use the demo application, you should have:

• An AWS account
• An IAM Administrator Access Management policy to set up the demo.

Note: Deploying the virtual classroom demo application can incur charges on your AWS account.

Key steps outline

Here is an outline of the key steps involved in deploying and using the application.

1. Create an AWS Cloud9 environment
2. Deploy the classroom demo application
3. Download and open the classroom demo application on the local machine
4. Create a classroom (teacher)
5. Join the classroom (students)
6. Start instruction using audio, video, chat, and screen share (teacher)
7. Close the classroom (teacher)
8. Cleanup

Create an AWS Cloud9 environment

• Log in with your AWS credentials and go to the AWS Cloud9 Console. If you have previously set up a AWS Cloud9 environment in your account you can use it and skip this step. Note: Non-profits or AWS-approved Education institutions and educators may be eligible for AWS Cloud9 promotions and benefits.

• Press the Create environment button.
• For Name, enter <unique environment name> and press the Next step button.
• For Environment Settings, use defaults and press the Next step button.
• Review the Environment name and settings, and press the Create environment button. You can optionally use your own Amazon EC2 instance that has been configured previously.
• Wait for the environment to start. Once completed, a welcome message from Cloud9 along will a bash shell will be displayed.

Deploy the classroom demo

• Once the AWS Cloud9 instances is ready, execute the following command to download the demo application code:

git clone https://github.com/aws-samples/amazon-chime-sdk-classroom-demo

cd demos/edu-demo

• Deploy the code by providing the following parameters:

script/deploy.js -r <region> -a <app name> -s <unique stack name> -b <unique bucket name>

The bucket name should be lower case and globally unique.

The deploy script can take up to 15 mins as it deploys AWS CloudFormation stack packages which in turn build the Windows and MacOS applications and makes them available for download in a publicly accessible URL. In addition it deploys a simple chat service that the applications requires along with IAM roles and Amazon DynamoDB tables.

• Once complete, a message containing a link to download the binaries for a Windows and Mac Electron-based application will be displayed. This link can be distributed to teachers and students.

Download and open the classroom demo application on the local machine

• You can now download and open the application for the OS of your choice using the URL generated in the previous step.
• These applications are not signed so your local system settings may need to grant explicit permissions to open the application. To do this, Mac users can go to System Preferences > Security & Privacy > General and enable the application. Windows users can open Windows Defender and grant the permission.

Create a classroom (teacher)

• When the teacher downloads and logs into the application, they are presented with the following prompt:

• Once they enter the required details in the input fields, a classroom is automatically created.
• The application automatically places the session in the Amazon Chime media region which has the optimal performance based on the teacher’s location. You can also customize the application to optimize for all attendees including students.
• At this point, the students can join this virtual classroom.

Join the classroom (students)

• When the student downloads the application, they are presented with a screen to enter their name and the classroom they wish to join.

• Once they enter that along with their name, they can connect to the classroom created by the teacher.
• The first time they use the classroom, they are prompted to grant access to their camera and microphone. They can click OK to grant access.

• At this point, they can see a roster of other participants in the classroom along with details on whether they are muted or have their videos enabled. They can also view the video feeds of students that have video enabled.

Start instruction using audio, video, chat, and screen share (teacher)

• A simple layout and tool tips guide the teacher when they begin instruction.

• The teacher can mute self and has the ability to mute all students using the focus button.

• Additionally, the teacher can enhance instruction by sharing screen. The custom screen share picker pops up and allows selection of the screen to share.

Once the screen is chosen, content sharing begins as shown in the picture below.

• Teachers can prompt students with questions who can use the ‘raise hand’ button in the chat window if they wish to answer.
• At this point, the teacher can ask the student to un-mute and answer the question or respond via chat.
• Teachers and students can also change the microphone and speaker device selection at any point during the class.

Close the online classroom (teacher)

• The teacher can end the classroom session by closing the window.
• When students close the window, they leave the classroom without disrupting the class.
• If no action is taken the classroom is automatically deleted after 24 hours or earlier under conditions .

This concludes the virtual classroom session.

Cleanup

To avoid incurring any unintended charges as a result of deploying the virtual classroom demo application, it is important to delete any resources in your AWS account that you are not using such as the AWS CloudFormation stacks and AWS Cloud9 environment.

Next Steps & Resources

In this blog, we demonstrated a virtual classroom demo application built using the Amazon Chime SDK. To learn more about how you can use the Amazon Chime SDK, visit the Amazon Chime SDK web-page. To start building, visit the Amazon Chime SDK GitHub repository for sample code and downloads. You can also refer to service documentation using the links below.

• Amazon Chime API Reference Documentation
• Amazon Chime Developer Guide
• Getting started with Amazon Chime SDK for JavaScript
• Setting Up AWS Cloud9
• Who can join AWS Educate