WebRTC之LiveKit的基础入门使用（入门必看）

LiveKit

本文主要是讲解在Next13+中如何使用LiveKit来实现简单的音视频通话，想了解更多的还是要去官方文档去掌握更复杂、高级的使用方法。

什么是LiveKit

LiveKit是一个开源的实时通信平台，基于WebRTC，主要用于构建高质量的音视频通话、实时数据传输和互动应用。

LiveKit除了方便以外的大优势就是它提供了丰富的API和SDK，支持多种平台，包括Web、iOS、Android和服务端。

前期准备

首先要去LiveKit的官网网站来进行简单的注册/登录、配置项目相关信息。

在注册/登录之后，你需要添加你的项目的名称，然后系统会让你选择一些项目的信息，这里按照你的实际需求进行选择即可，如果不确定也没关系，可以直接翻到最下面点Finish，这些在后续也可以根据实际去修改

基础配置

安装依赖项

在你的项目中安装LiveKit所需的依赖项，官网推荐使用yarn或npm：

yarn add livekit-server-sdk @livekit/components-react @livekit/components-styles

npm install livekit-server-sdk @livekit/components-react @livekit/components-styles --save

配置环境

第一种方法

你可以直接在文章开头给出的官方文档中进行揭示API Key和API Secret后进行复制，粘贴到你项目中的.env文件中去（要先揭示再去复制！）

第二种方法

我们可以通过控制台左侧的Settings页面选择KEYS，直接就可以看到我们的个人密钥，揭示API Secret后，我们就可以得到和上述一样的环境信息，依旧是复制到.env文件中

使用示例

这里将官网文档的示例进行了部分优化，同时也是我的项目中所用到的部分实际开发代码，下面我会为大家讲解LiveKit的基础使用方法并且给大家一个简明扼要的例子

服务端

我使用的是App Router，在@/app/api/livekit/route.ts文件中写下如下内容：

import { AccessToken } from "livekit-server-sdk";
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
  const room = req.nextUrl.searchParams.get("room");
  const username = req.nextUrl.searchParams.get("username");
  if (!room) {
    return NextResponse.json(
      { error: 'Missing "room" query parameter' },
      { status: 400 }
    );
  } else if (!username) {
    return NextResponse.json(
      { error: 'Missing "username" query parameter' },
      { status: 400 }
    );
  }

  const apiKey = process.env.LIVEKIT_API_KEY;
  const apiSecret = process.env.LIVEKIT_API_SECRET;
  const wsUrl = process.env.NEXT_PUBLIC_LIVEKIT_URL;
  
  if (!apiKey || !apiSecret || !wsUrl) {
    return NextResponse.json(
      { error: "Server misconfigured" },
      { status: 500 }
    );
  }
  const at = new AccessToken(apiKey, apiSecret, { identity: username });
  at.addGrant({ room, roomJoin: true, canPublish: true, canSubscribe: true });
  return NextResponse.json({ token: await at.toJwt() });
}

值得注意的是apiKey，apiSecret和wsUrl这三个常量，确保他们的环境名称与.env中的名称一致。

这段代码非常简单，简单进行讲解：

1. 首先是从请求的URL中提取room和username的参数并对其进行参数校验
2. 然后加载我们在.env文件中添加的环境变量并进行参数校验
3. 使用LiveKit的SDK自带的AccessToken创建一个实例，使用apiKey及apiSecret进行签名，将username做为用户的身份标识
4. 最后使用实例上的addGrant方法为该令牌添加权限，允许用户加入指定的room，并拥有发布及订阅的权限

客户端

在@/components/mediaRoom.tsx中书写如下内容：

"use client"
import { LiveKitRoom, VideoConference } from "@livekit/components-react"
import { MediaRoomProps } from "@/types/media-room"
import "@livekit/components-styles"
import { useEffect, useState } from "react"
import { useUser } from "@clerk/nextjs"
import { Loader2 } from "lucide-react"

export const MediaRoom = ({ chatId, video, audio }: MediaRoomProps) => {
  const { user } = useUser()
  const [token, setToken] = useState("")
  useEffect(() => {
    // 判断用户是否有姓氏和名字来确认用户是否登录
    if (!user?.firstName || !user?.lastName) return
    // 设定用户姓名
    const name = `${user.firstName} ${user.lastName}`
    ;(async () => {
      try {
        const res = await fetch(`/api/livekit?room=${chatId}&username=${name}`)
        const data = await res.json()
        setToken(data.token)
      } catch (error) {
        console.log(error)
      }
    })()
  }, [user?.firstName, user?.lastName, chatId])

  if (token === "") {
    return (
      <div className="flex flex-col flex-1 justify-center items-center">
        <Loader2 className="h-7 w-7 text-zinc-500 animate-spin my-4" />
        <p className="text-xs text-zinc-500 dark:text-zinc-400">加载中...</p>
      </div>
    )
  }

  return (
    <LiveKitRoom
      data-lk-theme="default" // 默认主题
      serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL} // livekit 服务器地址
      connect={true} // 是否自动连接
      token={token}
      video={video}
      audio={audio}
    >
      <VideoConference />
    </LiveKitRoom>
  )
}

上述代码讲解：

1. 使用Clerk的useUser方法获取user并设定用户的姓名（username）
2. 因为useEffect期待返回的是清除函数或者是undefined，所以我们将发送请求的异步函数设定为立即执行函数，将此请求返回的数据通过解析获得的token存储起来
3. 判断token的值：
   • 如果token为空串，表明并没有及时收到向服务端请求返回的数据内容，因此返回一个加载的状态
   • 如果token不为空串，那么证明请求成功发送并收到了返回的数据，因此我们返回LiveKit提供的组件进行音视频框的展示。其中video和audio为boolen类型，表示开启音视频通话时，语音和视频是否默认打开。

把MediaRoom组件导入到你想使用的地方传入值就可以使用了，使用效果如下：

LiveKit有较为丰富的资源，如果想要解锁更多有意思的功能，请移步官方文档！希望我的分享可以成为你踏入LiveKit大门的指引！感谢各位的阅读