在 Next.js 中使用声网 Web UIKit 构建视频聊天应用

我在之前的文章探讨过如何使用声网 Web UIKit 为网站添加直播推流或视频通话功能。本文我将介绍如何在 Next.js 网页应用中使用声网 Web UIKit。

使用服务器端渲染(SSR)或静态网站生成(SSG)时,我们将使用 Next.js 的动态导入(Dynamic Import)导入声网 SDK(不会出现 “window is not defined” 的报错)。


使用 React 实例

我在 Next.js 应用中从声网 Web UIKit 库中导入 React 实例组件,我的 Next.js 应用是用 create-next-app 创建的,如下:

import type { NextPage } from 'next'
import Head from 'next/head'
import Videocall from './videocall'
...
const Home: NextPage = () => {
  return (
    <main style={{display: 'flex', flex: 1}}>
      <Videocall />
    </main>
  )
}

出现了 “window is not defined” 的报错:

查看调用堆栈后,发现这个报错是由声网 SDK 发出的。


为什么会出现这样的报错?

导入声网库时(无论是直接导入还是由声网 Web UIKit 导入),Next.js 使用 SSR 和 SSG,它访问浏览器上可访问的 Window 对象。Next.js 要么在服务器上(SSG)预先渲染网页,要么为每个请求渲染网页(SSR),这就会导致出现报错,因为 window 对象在服务器上是不可访问的,因此出现了 “window is not defined” 的报错。


有什么解决方法?

解决方法其实很简单:

我们希望只在浏览器中渲染页面时导入声网 Web UIKit,可以使用 window 对象的条件检查来解决这个问题,但 Next.js 提供了更简洁的解决方案——没有 SSR 的动态导入。

import Head from 'next/head'
import dynamic from 'next/dynamic'

const Videocall = dynamic(() => import('./videocall'), { ssr: false });

const Home: NextPage = () => {
...

现在我可以通过使用 dynamic() 函数调用取代 Videocall 导入。第一个参数接受一个只从我们的文件中导入组件的函数。第二个参数接受一个对象,我们在该对象中把 ssr 标记为 false,因为我们不希望服务器端包含这个模块。

只要我们在 Videocall 组件中更新声网 App ID,就可以运行这个实例,我们的 Next.js 网页应用就有了视频通话功能啦!


总结

大家可以点击这里查看 Next.js Web UIKit 项目的实例。如果想有更深入地了解,可以阅读这篇文章,该文更深入地介绍了这个实例,也可以查看 Web UIKit 的 GitHub Repo

我们有适用于 Android、iOS、React Native 和 Flutter 的 UIKit。如果你在使用声网 Web UIKit 时遇到问题,可以登陆声网 Slack 社区,在 #web-help-me channel 中提出你的问题。


原文作者:Ekaansh Arora
原文链接:https://www.agora.io/en/using-the-agora-web-uikit-with-next-js-build-a-video-chat-app/
推荐阅读
相关专栏
SDK 教程
164 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和声网 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。