Note:
This article is also available here.(Japanese)
https://cloud.flect.co.jp/entry/2020/11/25/112005
Since the beginning of this year, I’ve posted several articles about Amazon Chime SDK (JavaScript SDK).
The Amazon Chime SDK has hid the hard parts of WebRTC and provided the way to use WebRTC for video conference. In addition to this, AWS released the Amazon Chime SDK React Component Library in September of this year, which wrapped the SDK by React to make it more ease.
This said that you can develop simple yet cool apps, so I’d like to run the demo to see what we can do with it, just as we did with Amazon Chime SDK.
At First
In order for this demo to work, it is assumed that AWS Credential is configured. If you have not yet done so, please refer to this page to configure it.
https://docs.aws.amazon.com/sdk-for-java/v1/developer-guide/setup-credentials.html
Preparation
First, I’m going to go clone the repository. Like the Amazon Chime SDK itself, this library has been released with fairly frequent updates, as you can see from the repository tags. Since its release in September (version 1.2.0), it has been released once in October and twice in November.
This time we would like to try it out using the latest 1.5.0 at the time of writing.
$ git clone https://github.com/aws/amazon-chime-sdk-component-library-react.git
$ cd amazon-chime-sdk-component-library-react/
$ git checkout refs/tags/amazon-chime-sdk-component-library-react@1.5.0 -b v1.5.0Build and Run
It’s very easy to build and run. Just run the following commands. The only caveat is that in addition to installing the dependent packages in the demo folder, you need to install the dependent packages even in the root directory. That’s about it.
$ npm install
$ cd demo/meeting
$ npm install
$ npm startNow the server is up and ready to connect to the Amazon Chime SDK demo application.
Note that in the Amazon Chime SDK demo we ran before, we had to change the script a little bit to connect via https or from another PC, but this time it’s not necessary at all. So easy!
Try!!
So, let’s get started with it. Go to https://localhost:9000 in your browser. When the room joining page appears, specify your favorite meeting room name (Meeting id), user name, and region, and then click Continue button.
If there is already a meeting room with the same name, you will join the room with the same name. If there is no room with the same name, a new room will be created.
After pressing the Cotinue button, the device settings screen will appear. Here you can set the microphone, speaker, camera, and camera resolution.
By the way, if you’re using a PC web browser, try changing the size of the window. The placement of components will change according to the size of the window. This kind of responsive web design is also supported by this library and can be easily implemented.
Now press the Join meeting button and you can enter the meeting room.
From the controls at the bottom of the screen, you can set up the microphone, camera, and speakers. You can also press the Content button to bring up a window selection screen where you can share the screen. From the left navigation bar, you can see a list of participants.
Since it’s a demo, you can see that it’s simple, but it has basic video conferencing features.
Summary
That’s it for the official demo using the Amazon Chime SDK React Component Library. It’s very easy to use, and I don’t think there are almost any stumbling blocks. The demo was a full-featured video conferencing app.
As this demo shows, the great thing about this library is that it provides these video conferencing features as components (and hooks) of React. In a simple application, you can easily combine them to create a video conferencing system.
The available components can be found at the following site. There are also a variety of Hooks and other components that allow you to achieve a certain level of elaborate customization.
https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/story/introduction--page
If you look at the Change Log, it looks like 1.5.0 also provided a chat component. In the next article, I will implement a chat component with this component.
New: I posted Adding Chat Feature to Demo of Amazon Chime SDK React Component Library.
