AWS Chime - assigning videos to tiles does not work as expected

Question

I have an AWS Chime meeting setup in this fashion with 5 video tiles (video-tile-0 through video-tile-4):

When the meeting is established, the observer callback audioVideoDidStart gets kicked off, at which point I bind my #local-video-tile

var localTileId = meetingSession.audioVideo.startLocalVideoTile();
meetingSession.audioVideo.bindVideoElement(localTileId, videoElement);
$(videoElement).show();

Next the user clicks Start Share to active the meetingSession.audioVideo.startContentShareFromScreenCapture();
After the share begins, the observer callback videoTileDidUpdate gets called.

And herein lies my problem. I have 2 video tiles that should be occupied.

The videoTileDidUpdate = tile => then loops through the tiles with tileId of 1 and tileId of 2.
But each tileId is looped through 4 times. And each time, each tile has different settings even though it has the same tileId.

tileId: 1,
active: false,
isContent: false,
isLocal: true,
boundAttendeeId: null

tileId: 1,
active: true,
isContent: false,
isLocal: true,
boundAttendeeId: <guid>

tileId: 1,
active: true,
isContent: false,
isLocal: true:
boundAttendeeId: null

tileId: 1,
active: false,
isContent: false,
isLocal: true:
boundAttendeeId: null

tileId: 2,
active: false,
isContent: false,
isLocal: false,
boundAttendeeId: null

tileId: 2,
active: false,
isContent: true,
isLocal: false,
boundAttendeeId: <guid>#content

tileId: 2,
active: true,
isConent: true,
isLocal: false,
boundAttendeeId: <guid>

tileId: 2,
active: false,
isContent: false,
isLocal: false,
boundAttendeeId: null

I have eliminated many in the loop by using the flags provided in the tile object.

videoTileDidUpdate: tile => {
    if (tile.active || tile.localTile) return;

    if (tile.isContent && tile.boundAttendeeId) {
        var contentVideoEl = document.getElementById("screen-share-tile");
        meetingSession.audioVideo.bindVideoElement(tile.tileId, contentVideoEl);
    } else if (tile.boundAttendeeId || tile.isContent || tile.localTile) {
        return;
    } 
    else
    {
        var videoElement = attendeeVideoElements[tile.tileId - 1];
        meetingSession.audioVideo.bindVideoElement(tile.tileId, videoElement);
    }
}


//Which now outputs:
tileId: 2,
active: false,
isContent: false,
isLocal: false,
boundAttendeeId: null

tileId: 2,
active: false,
isContent: true,
isLocal: false,
boundAttendeeId: <guid>#content

As you can tell, this will bind my screenShare to both the #screen-share-tile and the video-tile-2

How can I prevent this?
Is there another boolean value I'm missing?

Now it says in the docs that the isContent will represent a screen share or user's shared content (like a video), so how is it that tileId 2 can have all of these different settings? Is it labelling the tileId correctly?

I have tried many different variations of the if blocks and setting a state in the startContentShareFromScreenCapture(<state>) to no avail.
The resources provided by AWS are snippets and there's really not much for descriptions on how any of it is supposed to work. https://aws.github.io/amazon-chime-sdk-js/index.html

Any help is greatly appreciated! I've been struggling through this for two weeks now.

Answer 1

Can you share your HTML, that will help with better understanding? Also, try this:

if (!tileState.boundAttendeeId) {
      return;
}

Answer 2

I'll answer my own question real quick because I know more and more people have been looking at this for answers.

YES to: "Is there another boolean value I'm missing?" that was the anwer to my question, but I thought I'd try to help anyone struggling with the JS SDK like I did.

The best recommendation I have is to check out the docs....BUT

To understand any of the docs you have to understand the observers. That is the key to understanding how their system works. The audioVideoObserver does exactly what...?

Then notice that there are other Observers. And these observers do what...?

Admittedly, there are some observers that seem to overlap, which can get confusing, but look at the examples and pay attention to what observer they are using for what functionality.

Then understand that those observers run in a loop. The last thing you have to figure out is what values to check for inside each loop. Notice that the pattern is the same.

Hope that helps somebody.