基于 LiveKit 的 WebRTC 音视频通话集成指南（支持 iOS/Android）

简介

利用 LiveKit 构建 WebRTC 音视频通话方案，优势在于无需手动处理复杂的网络打洞问题，SFU 架构能更好地支撑多路并发。以下是在 uni-app 中集成的实战步骤。

环境准备

服务端部署

首先需要搭建 LiveKit 服务。克隆官方仓库并启动：

livekit-server --dev --bind 0.0.0.0

启动后会输出 API Key 和 Secret，后续用于生成 Token。若需测试用户身份，可使用 CLI 工具生成临时凭证：

lk token create --api-key devkey --api-secret secret --join --room my-first-room --identity user1 --valid-for 999h

客户端配置

在 uni-app 项目中，确保已引入相关插件。需将 AndroidManifest.xml 和 Info.plist 配置文件复制到项目根目录，并根据实际网络环境调整权限设置。

核心流程

初始化与连接

实例化房间对象并设置回调监听，这是处理所有状态变化的入口。

import { UTSLiveKitRoom } from "@/uni_modules/wrs-uts-livekit"
let room = new UTSLiveKitRoom()

room.onCallback((resp) => {
  // 根据 opt 字段区分不同事件
  switch (resp.opt) {
    case "onConnect":
      console.log("连接成功")
      break
    case "onFailConnect":
      console.log("连接失败")
      break
    // ... 其他状态处理
  }
})

调用 initRoom() 完成初始化，随后传入 WebSocket 地址和 Token 进行连接。注意，必须先建立连接才能开启媒体设备。

room.initRoom()
let params = { url: "ws://your-server:7880", token: "xxx" }
room.connect(params, (resp) => {
  if (resp.flag) {
    openCameraMic()
  } else {
    console.log("连接失败：" + JSON.stringify(resp))
  }
})

媒体控制

连接成功后，需要主动打开麦克风和摄像头。这里可以指定前置或后置摄像头，以及帧率等参数。

let position = this.isFrontCamera ? "front" : "back"
let params = {
  camera: { enable: true, position: position, fps: 30 },
  mic: { enable: true }
}
room.setCameraMic(params, () => {
  console.log("媒体设备已就绪")
})

支持动态切换摄像头和静音操作。例如关闭麦克风时，只需修改 enabled 状态即可。

room.setMicrophone({ enabled: false })
room.switchCamera((resp) => {
  if (!resp.flag) console.log("切换失败")
})

视频渲染

在 nvue 页面中，使用自定义组件渲染视频流。本地流和远程流的渲染方式略有不同，需根据回调中的 identity 动态绑定。

<wrs-uts-livekit :style="'width:'+width+'px;height:'+height+'px;'" :params="params"> </wrs-uts-livekit>

当收到本地推流或远程订阅事件时，构造对应的 businessArray 参数传递给组件，即可显示画面。

// 显示本地视频
let newParams = {
  businessArray: [{
    business: "showLocalView",
    params: { identity: resp.participant.identity, scaleType: "fill" }
  }]
}
this.params = formatNewParams(newParams)

// 显示远程视频
this.remoteArray.push(JSON.stringify({
  businessArray: [{
    business: "showRemoteView",
    params: { identity: identity }
  }]
}))

注意事项

1. 视频渲染必须在 nvue 页面中进行，以确保性能。
2. 连接房间后才能开启摄像头，否则可能报错。
3. Token 有效期较短，生产环境建议后端动态生成。