小型视频视图隐藏在视频通话中完整视频的后面反应是本机aws chime sdk

问题描述

我已在以下https://github.com/aws-samples/amazon-chime-react-native-demo演示应用程序的基础上使用React Native和AWS Chime SDK开发了一个视频通话应用程序。我只保留了2个用户的呼叫，另一个用户的视频将全屏显示，而自我视频将显示在整个视频上方的小框中。使用RNVideoView组件渲染视频，该组件由AWS Chime SDK本地实现， 问题是，当首先渲染小型/自视频视图时，它会出现在完整视频视图的顶部，这是正确的行为，如下所示： correct behavior screenshot 但是，当在完整/其他用户的视频视图之后呈现该视频时，它隐藏在完整视图之后，因此用户本人将无法看到他的视频流，请查看以下屏幕截图： small video hides behind full video screenshot

在两种情况下，自拍视频都是打开的并且可以正常工作，只是无法正确渲染。如果您对我的问题有任何疑问，请告诉我。任何帮助将不胜感激。

这是我用于显示用户视频的代码：

要获取用户的视频流：

 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,top: 70,right: 5,zIndex: 1,fullVideo:{
        width: "100%",aspectRatio: 8/16,zIndex: -1,overlayTopView:{
      position: "absolute",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);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）