Небольшой вид видео скрывается за полным видео во время видеозвонка (реагируйте на родной aws chime sdk)
Я разработал приложение для видеозвонков с использованием React Native и AWS Chime SDK, следуя их демонстрационному приложению здесь: https://github.com/aws-samples/amazon-chime-react-native-demo. Я сохранил звонок только для 2 пользователей, где видео другого пользователя будет полноэкранным, а собственное видео будет отображаться в небольшом поле поверх всего видео. Видео визуализируются с использованием компонента RNVideoView, который изначально реализован в AWS Chime SDK. Проблема в том, что когда сначала визуализируется небольшое / собственное видео, оно появляется поверх полного видео, что является правильным поведением, например: Снимок экрана правильного поведения Но когда он отображается после полного просмотра видео / видео другого пользователя, он скрывается за полным просмотром, поэтому сам пользователь не сможет увидеть свой видеопоток, проверьте этот снимок экрана: маленькое видео скрывается за полным скриншотом видео
В обоих случаях собственное видео открыто и работает нормально, просто оно отображается некорректно. Дайте мне знать, если у вас возникнут какие-либо затруднения по поводу моего вопроса. Любая помощь будет очень признательна.
Это мой код для отображения видео пользователя:
Для получения видеопотока пользователя:
this.onAddVideoTileSubscription = getSDKEventEmitter().addListener(MobileSDKEvent.OnAddVideoTile, (tileState) => {
if (tileState.isScreenShare) {
//screen sharing is not required
} else {
this.setState(oldState => ({
...oldState,
videoTiles: [tileState.tileId, ...oldState.videoTiles],
selfVideoEnabled: tileState.isLocal ? true : oldState.selfVideoEnabled
}));
tileState.isLocal && this.setState({ selfVideoTileId: tileState.tileId })
}
});
Визуализация тайлов видео:
renderVideoAudio = (callType) => {
return (
<View style={styles.overlayTopView}>
<View style={styles.videoContainer}>
{
this.state.videoTiles.length > 0 ? this.state.videoTiles.map(tileId =>
<RNVideoRenderView
style={tileId === this.state.selfVideoTileId ? styles.smallVideo : styles.fullVideo}
key={tileId} tileId={tileId}
/>
) : this.noVideoView()
}
</View>
</View>
)
}
Стили:
videoContainer: {
width: '100%',
overflow: 'visible',
position: "absolute",
top: 0, left: 0, right: 0, bottom: 0,
},
smallVideo:{
width: 140,
height: 180,
position: "absolute",
top: 70, right: 5,
zIndex: 1,
},
fullVideo:{
width: "100%",
aspectRatio: 8/16,
zIndex: -1,
position: "absolute",
left: 0, top: 0 , bottom: 0, right: 0,
},
overlayTopView:{
position: "absolute", top: 0, left: 0, width: "100%", height: "100%", justifyContent: "space-evenly"
},
Компонент RNVideoView:
export default class RNVideoRenderView extends React.Component {
componentDidMount() {
setTimeout(() => {
NativeFunction.bindVideoView(findNodeHandle(this), this.props.tileId);
});
}
componentWillUnmount() {
NativeFunction.unbindVideoView(this.props.tileId);
}
render() {
return <RNVideoRenderViewNative {...this.props} />;
}
}
RNVideoRenderView.propTypes = {
tileId: PropTypes.number,
};
var RNVideoRenderViewNative = requireNativeComponent('RNVideoView', RNVideoRenderView);