uncaught参考文献:在React中未定义全局使用Simple-Peer软件包

问题描述 投票:0回答:1
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

只是我播放媒体流的视频元素。
显示有关如何在没有媒体流或进行空媒体流或修复此错误的情况下连接PEERJS的任何知识。
    

问题是

如果您使用
NPM创建了Web应用
然后您将在src文件夹中有一个vite.congfig.js。 tope and添加

define: { global: {}},

所以您的最终vite.config.js看起来像这样

javascript reactjs webrtc peerjs simple-peer
1个回答
8
投票
这与全球有关 只需将

"<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>

这是因为library无法找到全局变量

而发生这种问题。您可以通过将以下脚本添加到您的

Index.html

(这是您的应用程序的根文件:

)来修复它:
<script>
      var global = window;
</script>

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.