,但它给出了一个错误,我尝试了几个小时,但遇到了更多错误。
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;
问题是
如果您使用NPM创建了Web应用然后您将在src文件夹中有一个vite.congfig.js。 tope and添加
所以您的最终vite.config.js看起来像这样
define: { global: {}},
"<script>const global = globalThis;</script>"
添加到HTML文件即可。
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script>const global = globalThis;</script>
</body>
而发生这种问题。您可以通过将以下脚本添加到您的
Index.html(这是您的应用程序的根文件:
)来修复它:<script>
var global = window;
</script>