Chime SDK uses Vue JS to display all video tiles and live attendee list display

Question

I have heard of local tiles and remote tiles many times when it comes to shared video conferencing. I'm trying to display all attendee video tiles but am facing difficulties while making the app from scratch using Vue JS as I'm new to using AWS Chime SDK. I have the following questions.

What is the difference between local tiles (getAllVideoTiles) and remote tiles (getAllRemoteVideoTiles)?

How do I display video tiles for all attendees along with their names?

How do I add attendee names? Where should I pass it? createAttendee or createMeeting API?

How to identify the host?

How do I add a live chat and connected attendees list to a meeting?

The React library is available. The Javascript demo is also a lot of code, and I don’t think it’s very helpful for novices to understand. Is there any chance for Vue JS and its Demo?

Your answer will be very helpful and appreciated for any new developers in the near future. Thank you so much.

Currently, I have an observer that only displays myself and an attendee tile.

videoTileDidUpdate: tileState => {
   const audioElement = this.$refs.audioElement;
   const isDefaultVideo = tileState.tileId === 1;
   this.audioVideo.bindAudioElement(audioElement);
   this.audioVideo.bindVideoElement(
       tileState.tileId,
       isDefaultVideo ? this.$refs.defaultVideoElement : this.$refs.attendeeVideoElement
   );
}

<audio ref="audioElement"></audio>
<video ref="defaultVideoElement"></video>
<video ref="attendeeVideoElement"></video>

Answer 1

What I understood while reading the aws-sdk documentation and completing it, I'm sharing my own understanding which may help someone in the future.