This article is also available here.(Japanese)
https://cloud.flect.co.jp/entry/2020/05/13/103634
(NEW ARTICLE 25th/Nov./2020)
Runing Demo of Amazon Chime SDK React Component Library
(NEW ARTICLE 20th/Oct./2020):
Faceswap and Virtual Background on your brower
Video conferencing services such as Zoom and Teams have been in the spotlight due to the corona disaster. So did you know that AWS has also been offering a video conferencing service called Amazon Chime for a few years now?
The features of Amazon Chime are summarized on the official page, so I won’t go into detail here, but rou can call a phone number or send an SMS message to a phone number, as well as all the usual features that other video conferencing services offer, such as screen sharing and recording.
From our point of view as a software developper, the fact that AWS provides this service and the provision of an SDK makes it easy to integrate video conferencing into systems built on AWS, and I think it’s very convenient.
In this article, I’ll show you what you can do with Amazon Chime SDK by running an official Amazon SDK demo.
Demo of Amazon Chime SDK
The JavaScript version of Amazon Chime SDK is available in the following github repository
This time, the demo will be in demos/browser/.
The instructions are given in the README, but this method can only be used locally (as of May 12, 2020 commit: dbbac6600926371620f0696d2dc69a22c060e9c1). I’m going to go a little sideways from the introduction of the SDK, but this time I’m going to modify it so that it can be connected remotely, and then I’m going to launch the demo.
Software Structure and Credentials
The demo consists of two major components
- Web server running on a server
- Browser-based client program
The web server calls Amazon Chime’s API. This requires an IAM Role with the appropriate policies assigned to it. You also need to set up this IAM Role credential on the server.
The specific policies required can be found here.
You can also find out how to set up credentials on the server here.
Run the original demo
First, clone the repository on the server running the web server and move it to the demo folder.
git clone https://github.com/aws/amazon-chime-sdk-js.git
cd amazon-chime-sdk-js/
cd demos/browserthen,
npm run startAnd you can access https://localhost:8080/ and see the demo page. However, as mentioned above, you can only connect locally because the web server does not allow remote connections. In order to be able to connect remotely and video conferencing, you need to do the following two things.
- Listen 0.0.0.0
- Enable https
You can see that the web server uses the loopback address(127.0.0.1:8080) as I/F to listen. You need to change this to Listen I/F that is connected to the Internet. Secondly, if you want to access the camera device from a page other than localhost, you need to be using secure communication (https).
Enable remote access
First, make sure you create a certificate to use with HTTPS.
Since it’s a demo, an self-signed certificate may be good to start with, but I think it’s better to have a formal certificate. There are other services such as Let’s Encrypt that issue free certificates, so please consider using them.
When the certificate is ready, we will edit the server.js.
Here are three places to edit.
First, change it to Listen in 0.0.0.0.
-const host = '127.0.0.1:8080';
+const host = '0.0.0.0:8080';Second, I added the process of loading certificates for https.
+var ssl_server_key = '/etc/letsencrypt/live/xxxx.com/privkey.pem';
+var ssl_server_crt = '/etc/letsencrypt/live/xxxx.com/cert.pem';
+let options = {
+ key: fs.readFileSync(ssl_server_key),
+ cert: fs.readFileSync(ssl_server_crt)
+};Third, fix to start the server to communicate via https.
-const http = require('http');
+const https = require('https');
-http.createServer({}, async (request, response) => {
+https.createServer(options, async (request, response) => {After making the above changes, let’s launch it.
npm run startI think you can access it remotely as well.
The server.js file after the change is placed in the following repository.
Demo
The following page will appear when you access it in your browser.
Specify the name of the meeting room in the Meeting Title. Users with the same conference room name can have a video conference with each other.
Please enter your name in the Your Name field.
The third field sets the region where you want to create the meeting room.
After entering the above, press Continue.
Select the appropriate device and press “Join” on the device selection screen.
This is the video conferencing screen.
At the top is a controller with a microphone, camera and speakers.
On the left side of the screen, you can see the list of participants and who is speaking.
The camera image of the active partner is displayed in the center of the screen, and the camera images of the other participants are displayed at the bottom.
One of the most notable features is the ability to share screens and videos by pressing the camera button on the top of the controller.
When you select ScreenCapture, you can select a window to share, and when you say Capture, I wonder if it’s a still image. At first, I thought, “I’m not going to be able to do that,” but the on-screen operation is firmly reflected in the remote.
By selecting Test Video, you can share a video that is built into your demo. When you choose Select File, the file selection screen will be displayed and you can share any video you want.
Below is an example of a shared browser.
The above features are made possible by the basic features of the Amazon Chime SDK.
This SDK is provided with regular Javascript, so you can customize it and integrate it with popular websites.
For example, it’s possible for a user to call a store clerk on an EC site for a video conference.
Finally
I used the official demo to explain what the Amazon chime SDK can do.
The SDK enables screen and video sharing in addition to basic video conferencing functions.
