Javascript react js中视频会议网站的动态视频布局创建

我目前正在开发一个视频会议网站。因为我是react js新手，我不知道当一个人加入一个房间时，我应该如何自动创建视频布局

以下是代码片段：-

class Chat extends Component {
  constructor(props) {
    super(props);
    this.state = { loading: true, message: "hello", mutedAudio: false, mutedVideo: false, fullScreen: false };
    this.peerConnections = [];
    this.peerConnection = null;
    this.roomId = props.roomId;
    this.remoteVideoRef = React.createRef();
    this.localVideoRef = React.createRef();
  }

openUserMedia = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    this.setState({ localStream: stream });
    this.localVideoRef.current.srcObject = stream;
    this.remoteVideoRef.current.srcObject = new MediaStream();
    this.joinRoom(this.roomId);
  };

render() {
    return (
      <div className="ChatMain">
        <div className={this.state.loading ? "Chatloader" : "hidden"}></div>
        <div className={this.state.loading ? "" : "hidden"}>Connecting...</div>
        <div className={this.state.loading ? "hidden" : ""} id="videos">
          <div className="ChatMessage">
            <span>{this.state.message}</span>
          </div>
          <video id="remoteVideo" ref={this.remoteVideoRef} className="active" autoPlay playsInline></video>
          <video id="miniVideo" ref={this.localVideoRef} className="active" muted autoPlay playsInline></video>
        </div>
        
        <Icons className={this.state.loading ? "" : "hidden"} 
        mutedVideo={this.state.mutedVideo}
        mutedAudio={this.state.mutedAudio}
        onMutedAudio={this.onMutedAudio}
        onMutedVideo={this.onMutedVideo}
        onHangUp={this.hangUp}
        
        ></Icons>
      </div>
    );
  }

       componentDidMount() {
       this.openUserMedia();
  }
}

类聊天扩展组件{
建造师（道具）{
超级（道具）；
this.state={加载：true，消息：“hello”，mutedududio:false，mutedVideo:false，全屏：false}；
this.peerConnections=[]；
this.peerConnection=null；
this.roomId=props.roomId；
this.remoteVideoRef=React.createRef（）；
this.localVideoRef=React.createRef（）；
}
openUserMedia=async（）=>{
const stream=wait navigator.mediaDevices.getUserMedia（{video:true，audio:true}）；
this.setState（{localStream:stream}）；
this.localVideoRef.current.srcObject=流；
this.remoteVideoRef.current.srcObject=new MediaStream（）；
this.joinRoom（this.roomId）；
};
render（）{
返回(
连接。。。
{this.state.message}
);
}
componentDidMount（）{
这是openUserMedia（）；
}
}

---

我想要一个类似这样的代码，每次有人参加会议时，会议室的创建者都应该可以看到参加会议的人的视频，并且这个过程应该是动态发生的，也就是说，每当有新的人加入时，应该在前一个版面的旁边创建一个新的版面。

创建视频版面是什么意思？您到底想更改什么？代码应该是这样的，每次有人参加会议时，会议室的创建者都应该可以看到参加会议的人的视频，并且这个过程应该是动态发生的，即，每当一个新人加入一个新的布局时，应该在前一个布局的旁边创建一个新的布局。我认为，您应该在状态中保留一个成员数组。当有人加入阵列时，将使用

setState

更新阵列，这将触发组件的重新渲染，从而更改布局。我想要一个基于您想法的示例代码段。您这样做吗？：）对不起，我没有时间讲这个。我提供了一个方向。根据我使用的关键字（

setState

，

array

等），您可以研究如何根据处于状态的array更新组件。如果您在实现后有问题，请告诉我。

创建视频布局是什么意思？您到底想更改什么？代码应该是这样的，每次有人参加会议时，会议室的创建者都应该可以看到参加会议的人的视频，并且这个过程应该是动态发生的，即，每当一个新人加入一个新的布局时，应该在前一个布局的旁边创建一个新的布局。我认为，您应该在状态中保留一个成员数组。当有人加入阵列时，将使用
setState
更新阵列，这将触发组件的重新渲染，从而更改布局。我想要一个基于您想法的示例代码段。您这样做吗？：）对不起，我没有时间讲这个。我提供了一个方向。根据我使用的关键字（
setState
，
array
等），您可以研究如何根据处于状态的array更新组件。如果您在实施后有任何问题，请告诉我。。