reactjs - 屏幕共享 OneToMany，使用 WebRTC，Simple-Peer

Question

我想向所有用户共享屏幕。在一对一的情况下，它工作正常。但在一对多的情况下，它就达不到要求了。当我传递 user.id 时，它将以 1:0 的比例与其他人共享面部视图流，当我传递 streamTrack.Id 时，它通过替换面部视图流 3:1 仅与其他人共享屏幕共享流。

 const onScreenShare = async () => {
        await navigator.mediaDevices
          .getDisplayMedia({ video: true })
          .then((stream) => {
            const screenTrack = stream.getTracks()[0];
            stream.addTrack(screenTrack, stream);
            // userMedia.current.srcObject
            // stream.addTrack(screenTrack, stream)
    
            // setTimeout(()=>{
            //   console.log(screenTrack,"screenTrack")
            //   stream.getTracks()
            //   .forEach(track => addTrack(screenTrack));
            // },3000)
          
        //     userMediaStream.getTracks()
        // .forEach(track => senders.push(peerConnection.addTrack(
        //   track, 
        // userMediaStream)));
    
            // console.log(peers, "peers");
            // setTimeout(() => {
              // peers.forEach((peer) => {
              //   peer.forEach((tracks) => {
              //     tracks.streams.
              //   })
              //   .getVideoTracks()[0].stop()
              // })
    
            //   peers.forEach((item1) => {
            //     console.log("=====>,testing",item1);
            //     item1.streams.getVideoTracks()[0].stop();
            //   });
            // }, 1);
    
            setTimeout(() => {
              console.log(userMedia.current.srcObject.id,"*****")
    
              peers.forEach((peer) => {
                peer.streams[0].getVideoTracks()[0].stop()
              })
    
              peers.forEach((peer) => {
                peer.replaceTrack(
                  // userMedia.current.srcObject.getVideoTracks(),
                  peer.streams[0].getVideoTracks()[0],
                
                  // userMedia.current.srcObject[0].getVideoTracks()[0],
                  screenTrack,
                  peer.streams[0],
                  // userMedia.current.srcObject,
                );
               const found =  peer.streams[0].getVideoTracks()[0];
               console.log(peer,"peer")
               console.log(found,"found")
               console.log(userMedia.current.srcObject,"userMedia.current.srcObject")
              });
            }, 100);
    
            // p.streams[0].getVideoTracks()[0].stop()
            // p.streams[0].replaceTrack(p.streams[0].getVideoTracks()[0], captureStreamTrack, p.streams[0])
    
            const data = {
              contentType: CONSTANTS.VARIABLES.SCREEN_SHARING,
              // senderId: user.userId,
              // senderId: screenTrack.id,
               senderId: userMedia.current.srcObject.id,
              isShared: true,
            };
    
            setTimeout(() => {
            //  setScreenCastStream(screenTrack);
             setIsPresenting(!isPresenting);
               setScreenCastStream(user);
            socket.send("/app/call." + call.chatRoomId, {}, JSON.stringify(data));
            },500)
          });
    }

套接字数据在下面的代码中使用：-

case CONSTANTS.VARIABLES.SCREEN_SHARING:
        if (!!data.isShared) {
          // alert("am switch case 01")
          // setTimeout(() => {
          setScreenSharedData(data.sender);
          screenSharingSocketData = data;
          // setIsScreenShared(true);
          // console.log(data,"data")
          // console.log(data.isShared,"data.isShared")
          // console.log(screenSharingSocketData,"screenSharingSocketData")
          // console.log(setIsScreenShared,"setIsScreenShared")
          setIsScreenShared(true);
          // },1000)
        }
        if (
          !data.isShared &&
          data.sender.userId === screenSharingSocketData.sender.userId
        ) {
          console.log(screenSharingSocketData)
          setIsScreenShared(false);
        }
        break;
      default:
        break;
    }