为什么会出现 ReferenceError: RTCPeerConnection is not defined in Next.js？

【问题标题】：Why do I get ReferenceError: RTCPeerConnection is not defined in Next.js?为什么会出现 ReferenceError: RTCPeerConnection is not defined in Next.js？
【发布时间】：2021-08-18 20:31:45
【问题描述】：

我正在尝试const pc = new RTCPeerConnection()，而我得到ReferenceError: RTCPeerConnection is not defined。我该如何克服这个错误？

这不是我的浏览器，我可以在它们本机上运行webRTC。

【问题讨论】：

标签： reactjs next.js webapi

【解决方案1】：

Next.js pre-renders every page 在服务器上。在页面被预渲染时尝试使用 Web API 会引发一个错误，就像您看到的那样，因为这些 Web API 不存在于 Node.js 环境中。

要解决这个问题，请确保在组件的 useEffect 中调用 new RTCPeerConnection()，这样它只会在客户端被调用。

useEffect(() => {
    const pc = new RTCPeerConnection()
    // Rest of your logic here
}, [])

【讨论】：

感谢您的评论。