Небольшой вид видео скрывается за полным видео во время видеозвонка (реагируйте на родной 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);

0 ответов

Другие вопросы по тегам