微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决小型视频视图隐藏在视频通话中完整视频的后面反应是本机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 举报,一经查实,本站将立刻删除。