Uncaught ReferenceError: global is not defined in React using simple-peer package

Question

I am trying to build a live video and audio streaming platform in Vite(React).

I tried peerjs which worked fine but I had to pass the MediaStream object of the viewer for it to connect but I want my app to be One-to-many which means only the Admin can stream their media. I do not want to stream the viewer's media and neither do I want to ask for Mic and Camera Permissions because I won't use it.

As an alternative I tried simple-peer but it gives an error which I tried solving for hours but got even more errors.

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

I would prefer to use peerjs as it already worked for me but if you know the solution for my problem or have any better working alternatives, it would be great.

Here is my code for reference:

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 is just a video element on which I play the Media Stream.

Share any knowledge on how to connect peerjs without Media Stream or make an empty Media Stream or fix this Error.

I found out that `peerjs` can answer the call without the stream but not place a call. Using `peerjs` for now. — Circuit Planet, Sep 28 '22 at 23:57

score 0 · Answer 1 · answered Apr 13 '23 at 10:22

It has to do with global this being renamed to globalThis just add "<script>const global = globalThis;</script>" to the html file.

 <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
    <script>const global = globalThis;</script>
  </body>

score 0 · Answer 2 · answered Aug 02 '23 at 11:50

The problem is with vite If you have created the web app using npm create vite@latest {projectName}

then you would have a vite.congfig.js in your src folder.

Simply go to that and add

define: {
global: {}},

so your final vite.config.js looks something like this

Uncaught ReferenceError: global is not defined in React using simple-peer package

2 Answers2