Add tiles with attendee name for attendees without video

[ankit-maheshwari]

Hi,

Currently, we can only show/bind tiles for attendees whose videos are available. There are no tiles available for attendees w/o camera feed.

I would like to know, how to show tiles with attendee names (please refer to the below screenshot) for all the attendees participating in a meeting session. Also, these tiles should update and show participant video feed as soon as participants switch on his/her camera and vice-versa.

Is this feature already available in SDK or is there any workaround to achieve this functionality?

Thanks in advance!

[ltrung]

@ankit-maheshwari There is no direct API to achieve this currently but could you use getAllRemoteVideoTiles API to retrieve the list of remote video tiles and from there get the list of attendees with videos. Then you can just display placeholder image for attendees with no video. Will that work for your application?

[Rambarani]

@ltrung I need you help. can you explain it detail. how to use getAllRemoteVideoTiles API to retrieve the list of remote video tiles and how to render video tiles with name and mute/un mute status over it. please

[Wisdom0063]

This feature will be extremely helpful

[ltrung]

@Rambarani @ankit-maheshwari So in order to build out this, you would need to maintain a list of attendee with video and a roster. The roster can be updated with realtimeSubscribeToAttendeeIdPresence (See use case 24 in the README). The list of attendees with video can be updated with videoTileDidUpdate and videoTileWasRemoved:

  videoTileDidUpdate: tileState => {
    // Ignore a tile without attendee ID and other attendee's tile.
    if (!tileState.boundAttendeeId || !tileState.localTile) {
      return;
    }
   // put the attendee with video on a set and bind the video to a video element.
    videoAttendeeSet.add(tileState.boundAttendeeId);
    meetingSession.audioVideo.bindVideoElement(tileState.tileId, videoElement);
    // Loop through the roster and show place holder with anyone who is not in `videoAttendeeSet`.
    for (const attendeeId in this.roster) {
       if (!videoAttendeeSet.has(attendeeId)) {
         //Show place holder.
       }
    }
  }

[thaithanhdhv]

How to get attendee's name? meetingInfo = { .... user: { userName: 'John', userId: 1 } } How I can get this attendee's name when he join the call?

[Zelofff]

Hi! We've got similar issue. We need to record video placeholder (tiles with at least names) instead of just black screen when user's video disabled. I haven't seen any chime's API that could handle this. Maybe there is some hacks for this?

[michhyun1]

@Zelofff perhaps you can maintain your own tilemap like so: https://github.com/aws/amazon-chime-sdk-js/blob/9daee0511aa64c8ca73a2db0f9b6494f34075d60/README.md#:~:text=tileId%2DvideoElement%20map-,const%20tileMap%20%3D%20%7B%7D%3B,-const%20observer%20%3D

You can use the audioVideoObservers along with your own tile map to manipulate the video elements.