I am using Amazon-chime-sdk-js to create a video conferencing service with React JS. I am keeping track of a 'tileStates' array which includes both the local and the remote video tiles. The tileStates array is updated in the 'videoTileDidUpdate' and 'videoTileWasRemoved' methods of the observer. The tiles from the 'tileStates' array are bound to video elements with 'bindVideoElement' method. All the video tiles seem to work perfectly when a user joins the meeting. But when the user turns his camera off, one of the tiles of the remote users in his screen turns black. The occurence of the bug is not consistent, i.e., someone turning the camera off does not gurantee that one of the remote user's video will go black in his screen. Sometimes it occurs, sometimes it does not.
Here are the observer methods in-essence:
videoTileDidUpdate: tileState => {
setState((state)=> {
const { tileStates } = state;
const tileId = parseInt(tileState.tileId, 10);
const index = tileStatesDraft.findIndex(tileState => tileState.tileId === tileId)});
if (index >= 0) {
return;
}
tileStatesDraft.push(tileState);
return { tileStates: tileStatesDraft };
}
videoTileWasRemoved: tileId => {
setState( state => {
const { tileStates } = state;
const tileStatesDraft = [...tileStates];
let index = tileStatesDraft.findIndex(tileState => tileState.tileId === tileId);
if (index >= 0) {
tileStatesDraft.splice(index, 1);
return { tileStates: tileStatesDraft };
}
})
}
The video stream is bounded as follows:
const videoElement = this.videoRef.current;
meeting.meetingSession.audioVideo.bindVideoElement(tile.tileId, videoElement);
Here's the sequence that recreates the bug (please keep in mind that the bug does not always recreate; sometimes everything works perfectly):
- User A joins the meeting and turns the camera on
- User B joins the meeting and turns the camera on...both the users can perfectly see each other
- User A turns his camera off. The local tile of A is removed and the video tile of B in the screen of user A turns black
** P.S.- Once the tile of User B turns black in the screen of User A, the tile does not get removed even if User B turns off his camera. i.e., the videoTileWasRemoved is not called in the end of User A for the camera of User B after User B's tile turns black on his side**