Menu
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 Playeris 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.
939
asked Nov 21 '25 15:11
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
61
answered Nov 24 '25 06:11
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With