未捕获的 ReferenceError：使用简单对等 package 在 React 中未定义全局

Question

我正在尝试在 Vite(React) 中构建一个实时视频和音频流平台。

我尝试了 peerjs ，它工作得很好，但我必须通过查看器的 MediaStream object 才能连接，但我希望我的应用程序是一对多的，这意味着只有管理员可以 stream 他们的媒体。 我不想 stream 观众的媒体，我也不想要求麦克风和相机权限，因为我不会使用它。

作为替代方案，我尝试了simple-peer ，但它给出了一个错误，我尝试解决了几个小时但得到了更多错误。

browser.js:16 Uncaught ReferenceError: global is not defined
at node_modules/randombytes/browser.js (browser.js:16:14)
at __require (chunk-J43GMYXM.js?v=ca9856dd:11:50)
at node_modules/simple-peer/index.js (index.js:4:21)
at __require (chunk-J43GMYXM.js?v=ca9856dd:11:50)
at dep:simple-peer:1:16

我更喜欢使用 peerjs，因为它已经为我工作了，但是如果你知道我的问题的解决方案或者有更好的工作替代方案，那就太好了。

这是我的参考代码：

import { Button } from "@mui/material";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { toast } from "react-toastify";
import { Socket } from "socket.io-client";
import VideoPlayer from "../components/videoplayer";
import { RootState } from "../redux/store";
import Peer from "simple-peer";

function DevPage() {
  const [myStream, setMyStream] = useState<MediaStream>();
  const [hisStream, setHisStream] = useState<MediaStream>();
  const [users, setUsers] = useState<string[]>([]);
  const [me, setMe] = useState<string>();

  const getStream: () => Promise<MediaStream> = (): Promise<MediaStream> =>
    navigator.mediaDevices.getUserMedia({ video: true, audio: true });

  const socket: Socket = useSelector<RootState, Socket>(
    (state: RootState): Socket => state.socket
  );

  useEffect((): (() => void) => {
    if (socket) {
      setMe(socket.id);
      socket.on("users", ({ allUsers }: { allUsers: string[] }): void => {
        setUsers(allUsers);
      });
      getStream()
        .then((stream: MediaStream): void => {
          setMyStream(stream);
        })
        .catch((err: Error): void => {
          toast.error(err.message);
        });
    }
    return () => {};
  }, [socket]);

  const callPeer = () => {
    const peer = new Peer();
  };

  return (
    <div className="bg-primary-700 min-h-screen w-full">
      {myStream && <VideoPlayer stream={myStream} />}
      {hisStream && <VideoPlayer stream={hisStream} />}
      <div className="text-white flex gap-2 p-4 flex-wrap justify-around">
        {users.map(
          (user, idx) =>
            user != me && (
              <Button
                color="info"
                variant="contained"
                key={idx}
                onClick={() => {}}
              >
                {user}
              </Button>
            )
        )}
      </div>
    </div>
  );
}

export default DevPage;

Video Player只是我播放媒体 Stream 的视频元素。

分享有关如何在没有媒体 Stream 的情况下连接 peerjs 或制作空媒体 Stream 或修复此错误的任何知识。