Как исправить отображение React Native Chime RNVideoView поверх других RNVideoView ⇐ Android

[Anonymous]

У меня работает демо-версия AWS Chime SDK для React Native, и два человека могут присоединиться к видеовызову на мобильном телефоне. На локальном устройстве видеокамера отображается на небольшой плитке в нижней части экрана, тогда как на удаленном устройстве отображается весь экран, а локальная плитка располагается поверх него. Однако я заметил, что на Android, когда вы запускаете локальное видео, а затем запускаете локальное видео с другого устройства, видео с удаленного устройства закрывает локальную плитку Android. Локальную плитку можно вернуть, если устройство Android останавливает и снова запускает видео, но оно не должно исчезать вообще.
Вот мои прослушиватели событий изменения состояния видеоплитки. :

Код: Выделить всё

const [localDevice, setLocalDevice] = useState({
videoEnabled: false,
videoTileId: null
})
const [remoteDevice, setRemoteDevice] = useState({
videoEnabled: false,
videoTileId: null
})

// ---------- ON ATTENDEE START VIDEO ----------
useEffect(()=>{
onAddVideoTileSubscription.current = getSDKEventEmitter().addListener(
MobileSDKEvent.OnAddVideoTile,
tileState => {
if(tileState.isLocal){
setLocalDevice({
videoEnabled: true,
videoTileId: tileState.tileId
})
}else if(!tileState.isLocal){
setRemoteDevice({
videoEnabled: true,
videoTileId: tileState.tileId
})
}
},
);
return () => {
if (onAddVideoTileSubscription.current) {
onAddVideoTileSubscription.current.remove();
}
};
},[])

// ---------- ON ATTENDEE END VIDEO ----------
useEffect(()=>{
onRemoveVideoTileSubscription.current = getSDKEventEmitter().addListener(
MobileSDKEvent.OnRemoveVideoTile,
tileState => {
if(tileState.isLocal){
setLocalDevice({
videoEnabled: false,
videoTileId: tileState.tileId
})
}else if(!tileState.isLocal){
setRemoteDevice({
videoEnabled: false,
videoTileId: tileState.tileId
})
}
},
);
return () => {
if (onRemoveVideoTileSubscription.current) {
onRemoveVideoTileSubscription.current.remove();
}
};
},[])

А вот моя логика рендеринга:

Код: Выделить всё

return (

{remoteDevice.videoEnabled ? (



): (
null
)}
{localDevice.videoEnabled ? (




): (
null
)}
 (

)}
ItemSeparatorComponent={() => }
keyExtractor={item => item}
/>


 NativeFunction.setMute(!currentMuted)}
/>

NativeFunction.setCameraOn(!localDevice.videoEnabled)
}
/>

 NativeFunction.stopMeeting()} />




);

А вот мои стили:

Код: Выделить всё

callContainer:{
backgroundColor: '#1D1D1D',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
justifyContent: 'flex-start'
},
localDeviceVideoContainer:{
position: 'absolute',
bottom: 100,
right: 15,
height: 175,
width: 132,
zIndex: 1,
elevation: 1,
},
localDeviceVideo:{
height: '100%',
width: '100%'
},
remoteDeviceVideoContainer:{
height: '100%',
width: '100%',
backgroundColor:'pink',
},
remoteDeviceVideo:{
width: '100%',
height: '100%',
},

Я пробовал поменять местами положение удаленного и локального рендеринга, но без изменений. Я пробовал использовать возвышение и zIndex без изменений. Я точно знаю, что плитка появляется за полноэкранным видео, потому что я установил непрозрачность полноэкранного видео на 0 и увидел компонент позади него. Я знаю, что он прекрасно работает на устройствах iOS, и маленькие плитки остаются на переднем плане. Я пробовал так много вещей, чтобы заставить это работать, но понятия не имею, что происходит. Кто-нибудь раньше сталкивался с этой проблемой AWS Chime SDK?

Подробнее здесь: https://stackoverflow.com/questions/787 ... nvideoview