使用 getUserDetails WebRTC 显示来自多个来源的媒体

如何解决使用 getUserDetails WebRTC 显示来自多个来源的媒体

我对 webrtc 还很陌生，我需要一些指导。我希望能够获得视频/音频源的列表（可能是一个数组）并将它们（取决于选择的源）显示到屏幕上。我正在考虑遍历可用的视频/音频源数组，并分别在 video 和 h1 标签中显示视频和标签。

我知道我可以使用 navigator.mediaDevices.enumerateDevices() 获取视频或音频源列表并获取各种 MediaTrack，还可以使用 navigator.mediaDevices.getUserMedia(constraint) 获取可以作为源传递给视频的媒体流。

问题：我怎样才能获得各种视频源的数组，循环播放它并能够显示到屏幕上，选择哪个或一个列表可供选择。这是我目前拥有的代码：

export default class Modal extends Component {
  constructor(props) {
    super(props);

    this.state = {
      videoLabel: "",audioLabel: [],deviceId: "",audioArrays: [],streamId: [],tracks: [],};

    this.videoRef = React.createRef();
  }

  componentDidMount() {
   
    (async () => {
      let devices = await navigator.mediaDevices.enumerateDevices();

      const videoDevices = devices.filter(
        (device) => device.kind === "videoinput"
      );

      this.setState({
        streamId: videoDevices,});

      const videooptions = videoDevices.map((videoDevice) => {
        this.setState({
          videoLabel: videoDevice.label,deviceId: videoDevice.deviceId,});
        
      });
    })();
  }
  render(props) {
    
    const constraint = {
      video: { width: 300,height: 200 },audio: true
    };

    const success = (stream) => {
      //console.log(stream);
      this.videoRef.current.srcObject = stream;
      const videoTracks = stream.getVideoTracks();
      console.log(`Using video device: ${videoTracks[0].label}`);
    };

    const fail = (e) => {
      console.log(e);
    };

    navigator.mediaDevices.getUserMedia(constraint).then(success).catch(fail);



    return (
      <Video  ref={this.videoRef} />
    );
  }
}

如果我能链接到有价值的资源，我也将不胜感激