捕获（承诺）TypeError：无法在 Peer.Readable 处读取未定义（读取“调用”）的属性（_stream_readable.js:178:10）

Question

按照demo做多用户会议，demo不是基于react vite创建的，但是我做的。该代码与演示类似，但它显示了错误。 这是vite引起的吗？我也使用了“vite-compatible-simple-peer”，但它仍然不起作用。希望有人能回答我的问题。非常感谢

tream_readable.js:178 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'call')
    at Peer.Readable (_stream_readable.js:178:10)
    at new Duplex (_stream_duplex.js:51:12)
    at new Peer (index.js:37:5)
    at createPeer (createroom.jsx:72:16)
    at createroom.jsx:43:28
    at Array.forEach (<anonymous>)
    at Socket2.<anonymous> (createroom.jsx:42:17)
    at Emitter.emit (index.mjs:136:20)
    at Socket2.emitEvent (socket.js:498:20)
    at Socket2.onevent (socket.js:485:18)
R

它显示了“new Peer()”的错误

function createPeer(userToSignal, callerID, stream) {
  const peer = new SimplePeer ({
    initiator: true,
    trickle:false,
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
    stream: stream, 
  });

  peer.on("signal", signal => {
    socketRef.current.emit("sending signal", { userToSignal, callerID, signal })
  });

  return peer;
}

function addPeer(incomingSignal, callerID, stream) {
  const peer = new SimplePeer ({
    initiator: false,
    trickle:false,
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
    stream: stream, 
  });

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
  }
  
});

我也用过“vite-compatible-simple-peer”，但还是不行。 完成的客户端-服务器是：

import { useEffect, useRef, useState } from "react";
import "./createRoom.css";
import io from "socket.io-client";
import { useParams } from "react-router-dom";
import  SimplePeer  from "simple-peer";
  const Video = (props) => {
    const ref = useRef();

    useEffect(() => {
      if (props.peer) {
        props.peer.on("stream", stream => {
          ref.current.srcObject = stream;
        });
      }
    }, []);

  return (
    <video
      style={{ width: "100%", transform: "rotateY(180deg)" }}
      ref={ref}
      autoPlay
      playsInline
    ></video>
  );
};

export default function CreateRoom({ username }) {
  const [peers, setPeers] = useState([]);
  const socketRef = useRef();
  const userVideo = useRef();
  const peersRef = useRef([]);
  const { id } = useParams();
  const roomID = id;

  useEffect(() => {
    socketRef.current = io.connect("http://localhost:3000/");
    navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
      userVideo.current.srcObject = stream;
      socketRef.current.emit("join room", roomID);
      socketRef.current.on("all users", users => {
          const peers = [];
          users.forEach(userID => {
              const peer = createPeer(userID, socketRef.current.id, stream);
              peersRef.current.push({
                  peerID: userID,
                  peer,
              })
              peers.push(peer);
          })
          setPeers(peers);
      })

      socketRef.current.on("user joined", payload => {
        console.log(payload);
          const peer = addPeer(payload.signal, payload.callerID, stream);
          peersRef.current.push({
              peerID: payload.callerID,
              peer,
          })

          setPeers(users => [...users, peer]);
      });

      socketRef.current.on("receiving returned signal", payload => {
          const item = peersRef.current.find(p => p.peerID === payload.id);
          item.peer.signal(payload.signal);
      });
  })
}, [roomID]);

function createPeer(userToSignal, callerID, stream) {
  const peer = new SimplePeer ({
    initiator: true,
    trickle:false,
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
    stream: stream, 
  });

  peer.on("signal", signal => {
    socketRef.current.emit("sending signal", { userToSignal, callerID, signal })
  });

  return peer;
}

function addPeer(incomingSignal, callerID, stream) {
  const peer = new SimplePeer ({
    initiator: false,
    trickle:false,
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
    stream: stream, 
  });

  peer.on("signal", signal => {
      socketRef.current.emit("returning signal", { signal, callerID })
  });

  peer.on("stream", stream => {
      const item = {
          peerID: callerID,
          peer,
          stream,
      };
      peersRef.current.push(item);
      setPeers(users => [...users, peer]);
  });

  peer.signal(incomingSignal);

  return peer;
}

  return (
    <div className="video-wrap">
      <span style={{ position: "absolute", top: "1px", left: "1px" }}>
        {username}
      </span>
      <video
        style={{ width: "100%", transform: "rotateY(180deg)" }}
        ref={userVideo}
        autoPlay
        playsInline
      ></video>
      {peers.map((peer, index) => {
        return <Video key={index} peer={peer} />;
      })}
    </div>
  );
}