Enabling video chats using Amazon Kinesis Video Streams for WebRTC

Many web and mobile applications these days need to embed a video chat frame alongside other content. In the fast-growing telehealth industry, for example, a doctor using a web browser often engages in a video consultation with a patient while viewing the patient’s electronic medical record within the same browser page.

Amazon Kinesis Video Streams for WebRTC is a fully managed AWS service that supports thousands of simultaneous video chats and frees developers from having to procure, set up and maintain their own media servers. It allows developers to easily embed video chat within their web, iOS and Android applications.

The WebRTC standard enables a quick and seamless chat experience without the need to install plug-ins for browsers such as Chrome, Safari, Firefox, and Edge. You can also build fast, video-enabled native apps for smartphones and tablets.

This post explains how Kinesis Video Streams for WebRTC works, and walks you through the steps to build a basic, browser-based video chat application.

How it Works

WebRTC Basics

Whenever possible, WebRTC enables users to send video streams directly to each other (peer to peer) over the internet without going through a central server. But since users’ devices are normally behind a NAT (Network Address Translation), the video call setup requires a STUN (Simple Traversal of UDP through NAT) server to tell each device what the public IP of the other device is. The video packets can then usually be routed peer to peer through their public IPs and NATs.

In some cases, however, firewall rules or certain types of NATs may prevent the media from going through. In those cases, the video needs to be routed through a central TURN (Traversal Using Relays around NAT) server.

Establishing a video chat call between two devices using WebRTC requires a signaling server to determine how they will connect over the internet. The calling party makes a series of requests to a STUN server to obtain the public IP address and port over which it received each request. It then sends these IP/port pairs to the called party over a mutually agreed upon signaling channel. This signaling mechanism can be implemented using secure Websockets (WSS) over HTTPS port 443. Note that all signaling messages and media packets are encrypted in transit.

The called party also gathers its IP/port pairs using STUN, and then both parties initiate connectivity checks between one another using successive IP/port pairs until a connection succeeds. This process is known as ICE (Interactive Connectivity Establishment).

Kinesis Video Streams for WebRTC

Kinesis Video Streams for WebRTC provides a highly available and scalable service that includes WebRTC signaling, STUN, TURN and ICE functionality. It provides SDKs for Javascript, iOS and Android devices.

A video chat application has one Master and one or more Viewers. All parties are able to see and hear each other using the built-in camera or Webcam in their devices, and they all communicate over a common signaling channel.

In the diagram above, the Master and Viewer use either the Javascript, iOS, or Android WebRTC SDK from AWS to communicate securely over a Websocket connection with the Kinesis Video Streams for WebRTC service. Each party authenticates itself using Amazon Cognito. All signaling messages and video packets are encrypted using the TLS protocol.

The video chat demo application described in the next section runs on an Amazon Linux EC2 instance behind an Application Load Balancer (ALB).

Building the Demo Application

This section explains how to deploy a basic video chat application on an EC2 instance for demonstration purposes. The main tasks include setting up the WebRTC signaling channel, creating and configuring the ALB, setting up a Cognito User Pool with two test users, and launching an EC2 instance to host the video chat application.

Before you begin, you will need to have a domain name to host the application and be able to update the DNS records for that domain. The application you will deploy is a modification of the Kinesis Video Streams for WebRTC test application described in the AWS documentation.

Set up the WebRTC Signaling Channel

1. Log in to Amazon Kinesis Video Streams.
2. Click Signaling Channels in the left panel, and then click the Create Signaling Channel.
3. Enter a name for your signaling channel (e.g. My_Signaling_Channel), and click the Create Signaling Channel.

 Set up the Amazon Cognito User Pool

1. Sign in to your Cognito console.
2. Choose Manage your User Pools.
3. Choose Create a user pool.
4. Type a value for Pool name: for example, my_chat_app_user_pool.
5. Choose Review defaults.
6. Choose Create pool.
7. Copy and save the User Pool Id value. You will need this value when you configure the UserPoolId and Logins parameters in the application.
8. On the page for the pool you created, choose App clients.
9. Choose Add an app client.
10. Type a value for App client name: for example, my_chat_app_client.
11. Make sure the Generate Client Secret checkbox is unchecked.
12. Choose Create app client.
13. Copy and save the App client id. You will need the value when you configure the IdentityPoolId and ClientId parameters in the application.

Set up the Amazon Cognito Identity Pool

1. Open the Cognito console.
2. Choose Manage Identity Pools.
3. Choose Create new identity pool.
4. Type a value for Identity pool name: for example, my_chat_app_identity_pool.
5. Expand the Authentication providers On the Cognito tab, add the values for the User Pool ID and App client id from the previous procedure.
6. Choose Create pool.
7. On the next page, expand the Show Details Copy and save the Identity pool ID. You will need the value when you configure the IdentityPoolId parameter in the application.
8. In the section that has a value for Role name that ends in Auth_Role (if you do not have a role, you must create one), choose View Policy Document.
9. Choose Edit and confirm that the Edit Policy dialog box that appears. Paste the following JSON into the editor:

{
   "Version": "2012-10-17",
   "Statement": [
   {
      "Effect": "Allow",                 
      "Action": [            
         "cognito-identity:*",
         "kinesisvideo:*"                
      ],
      "Resource": [
         "*"
      ]
   } 
   ] 
}

10. Choose Allow.

Create users using the AWS CLI

Now that the user pool is set up, create two users by using the following steps in the AWS Command Line Interface (AWS CLI).

Complete and run this Sign up command:

$ aws cognito-idp sign-up --client-id <APP_CLIENT_ID> --username <USERNAME> --password <PASSWORD> --user-attributes Name="email",Value="<EMAIL_ADDRESS>"

This previous step will send an email to the email address specified with a confirmation code. Insert that code into the following Confirm command to confirm the user:

$ aws cognito-idp confirm-sign-up --client-id <APP_CLIENT_ID> --username <USERNAME> --confirmation-code <CODE>

Repeat the “Sign Up” and “Confirm” steps above to create a second user.

Set up the EC2 Application Instance

Launch the Instance

1. Launch an EC2 instance using the Amazon Linux AMI and this guide.
2. Edit the security group for the instance and add an Inbound Rule to allow TCP port 3001 traffic from anywhere (this will be made more secure later).
3. Then, connect to your instance using an SSH client and follow this tutorial to install Node.js on it. Note that there is no need to open port 80 or 443.
4. Run the following commands to install the application.

$ sudo yum install git -y

$ git clone https://github.com/aws-samples/amazon-kinesis-video-streams-webrtc-sdk-js-with-amazon-cognito.git

$ cd amazon-kinesis-video-streams-webrtc-sdk-js-with-amazon-cognito
$ npm install

Set up the application to use your Cognito User Pool

1. Open the master.js file within the examples folder:
   1. Update UserPoolId on line 28
   2. Update ClientId on line 29
   3. Update IdentityPoolId on line 50
   4. Update Logins endpoint on line 53
   5. It follows this syntax: cognito-idp.<REGION>.amazonaws.com/<UserPoolId>
   6. Save and exit.
2. Open the viewer.js file within the examples folder:
   1. Update UserPoolId on line 20
   2. Update ClientId on line 21
   3. Update IdentityPoolId on line 42
   4. Update Logins endpoint on line 45
   5. It follows this syntax: cognito-idp.<REGION>.amazonaws.com/<UserPoolId>
   6. Save and exit.
3. Then run the following command:

$ npm run develop

This starts the Node.js app that handles incoming requests for video chats.

Set up the Application Load Balancer

To set up the ALB, you will need to create an SSL/TLS certificate, and point the ALB to the EC2 instance hosting this web application. HTTPS is required to host a WebRTC application securely. The steps to set up the ALB are given below.

Create an SSL/TLS Certificate

1. Log in to AWS Certificate Manager (ACM) in your AWS console.
2. Click the Get Started button under Provision Certificates
3. Click the Request a Certificate
4. Make sure the public certificate option is selected and click Request a Certificate.
5. Enter the fully qualified domain name that you want for the certificate. For example, if you enter mychatapp.example.com, then your application would be viewable at https://mychatapp.example.com. You should have control over the domain name and its DNS records.
6. Select either DNS or Email as the method by which you will validate that you have control over the domain name.
7. Click Review, and then click Confirm and Request.

After you complete validation by email or DNS, your certificate will be listed in your ACM console.

Create a Target Group

1. Click on Target Group in your EC2 console and click the Create Target Group
2. Select Instances and enter a name for your target group in the Name field (e.g., my-target-group).
3. Enter port 3001 in the HTTP Port field, as depicted in the following screenshot.
4. Click Next and select the EC2 instance that you launched above.
5. Click on the Include as Pending button to add the instance to the target group.
6. Click the Create Target Group

Create the Application Load Balancer

1. Create a new Security Group, call it my-alb-sg, and add an Inbound Rule to allow HTTPS (TCP port 443) traffic from anywhere.
2. Click on Load Balancers in your EC2 console and click the Create Load Balancer
3. Click the Create button in the Application Load Balancer panel.
4. Enter a name for your ALB (e.g., my-alb), and select HTTPS under Load Balancer Protocol.
5. Under Availability Zones, select the VPC and two public subnets, one of which contains your EC2 instance, and click Next.
6. Select the SSL certificate you created using ACM, and click Next.
7. Select the security group you created in Step 1 of this procedure, and click Next.
8. Select your target group.
9. Click the Create button after reviewing the settings to create the ALB.
10. Edit the security group for the EC2 instance you created earlier, and update the Inbound Rule for TCP port 3001 so that the source traffic is restricted to the ALB’s security group my-alb-sg.

Testing the Application

Log in to your DNS provider’s web site and create a CNAME record that aliases the fully qualified hostname of your application to the DNS name of your ALB. For example, your CNAME could alias mychatapp.example.com to my-alb-1234567890.us-east-1.elb.amazonaws.com

Then use your web browser to navigate to that hostname (e.g. https://mychatapp.example.com). Enter the name of the signaling channel you created above, the region where it was created, and the username and password of one of the Cognito users you created. Then click the Start Master button.

Go to a different device and navigate to the same site. Enter the credentials for the other Cognito user you created, and enter the same signaling channel name and region. Click the Start Viewer button to start a video chat with the other party. 

Conclusion

Amazon Kinesis Video Streams for WebRTC is a fully managed service that offers a quick way to get started building a web or mobile application with embedded video chat functionality. The chats start seamlessly in modern web browsers with no need to install plug-ins. All signaling messages and media packets are encrypted in transit, and the service is highly available and scalable to thousands of simultaneous video chats.

Clean up: To avoid incurring unexpected costs, be sure to turn off the AWS services you used as part of this demonstration.