Chime SDK to display all video tile and real time attendee list display using Vue JS

Question

I have heard several times about local tile and remote tile when sharing video meetings. I am trying to display all attendee video tile and facing difficulties making an app from scratch using Vue JS as I'm new to using AWS Chime SDK. I have several questions below.

What is the differences between local tile(getAllVideoTiles) and remote tile(getAllRemoteVideoTiles)?

How can I show all attendee video tile with their name?

How can I add the attendee's name? Where should I pass it? createAttendee or createMeeting API?

How can I identify the Host?

How can I add in-meeting real-time chat and a list of connected attendees?

React library is available. Javascript demo is also huge lines of code that are less helpful to understand for newcomers I think. Are there any chances for Vue JS and Its Demo?

Your answer will be much helpful and appreciable for any new developer in near future. Thank you very much.

Currently, I have an observer which shows myself and one attendee tile only.

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 reading aws-sdk documentation and working through it, I'm sharing my own understanding which may help someone later.

What is the differences between local tile(getAllVideoTiles) and remote tile(getAllRemoteVideoTiles)?

getAllVideoTiles get all video tiles including the local one where as getAllRemoteVideoTiles just return the remote video tiles. You can use getLocalVideoTile to get the local video tile for the current local client.

How can I show all attendee video tile with their name?

Since you do not know your attendee name you would need to maintain a mapping of the attendee name with an id on your side. You can pass that Id to createAttendee and then you should be able to retrieve that id in videoTileDidUpdate event and get the id via boundExternalUserId property.

How can I add the attendee's name? Where should I pass it? createAttendee or createMeeting API?

createAttendee. See the answer in the previous question.

How can I identify the Host?

You can tell if it is a local video in videoTileDidUpdate from the tileState property localTile

How can I add in-meeting real-time chat and a list of connected attendees?

You can refer to this section of the API Overview for a simple way to send messages in meeting.