如何用VUE实现Web端多人语音视频聊天？

RTC小课堂
0 阅读5分钟

在Web开发中，多人音视频聊天是高频需求，广泛应用于各类实时互动场景。本文基于ZEGO SDK，以 Vue 框架为载体，提供极简实操方案，无需复杂配置，复制代码替换参数即可快速实现稳定的多人音视频互通，兼顾开发效率与落地性。

一、常用场景

  • 多人视频会议： 企业内部协作、远程办公沟通，支持多参会者实时音视频互动；

  • 在线小班课： 教育场景下的师生互动、小组讨论，实现实时授课与答疑；

  • 多人社交聊天： 社交 App 中的好友视频聚会、群聊互动，提升用户粘性；

  • 远程问诊/客服： 医疗、服务行业的远程沟通场景，实现面对面高效交流。

二、前置准备（必做）

在应用多人音视频通话场景之前，请确保：

三、ZEGO音视频SDK使用步骤

本节将介绍如何使用 ZEGO Express SDK 实现多人视频通话。

  • 流程图如下：

  • API 调用时序图如下:

ZEGO Express SDK 可支持多人视频通话，如上时序图以 2 名房间成员间的实时视频通话为例，建议开发者参考上述流程设计自己的多人实时视频通话场景。

3.1 创建多人音视频聊天引擎实例

创建 ZegoExpressEngine 引擎实例，将申请到的 AppID 传入参数 “appID”，将接入服务器地址传入参数 “server”。

  • “server” 为接入服务器地址，获取的方式请参考 控制台 - 项目信息 。
  • 3.6.0 版本及以上 SDK，server 可以改成空字符、null、undefined 或者随意字符，但不能不填
const zg = new ZegoExpressEngine(appID, server);

3.2 多人语音聊天开启房间内用户变化通知

开发者需在每位用户调用 loginRoom 接口登录房间时，将 ZegoRoomConfig 中的 “userUpdate” 设置为 “true” ，用于接收其他用户进出房间的回调通知（即 roomUserUpdate）

const isLogin = await zg.loginRoom(
    roomID,
    token,
    { userID },
    { userUpdate: true }
  );

3.3 监听回调事件

为实现多人视频通话功能，需要监听房间内用户和流的增减并做出相应处理，开发者可根据实际需要，实现 ZegoEvent（包含 ZegoRTCEvent 和 ZegoRTMEvent）中的某些方法，创建引擎后可通过调用 on) 接口设置回调。

1）监听房间内的用户变化

只有调用 loginRoom 登录房间时设置了关注用户变化，即 ZegoRoomConfig 中的 “userUpdate” 设置为 “true”（默认值为 “false”）时，才能监听 roomUserUpdate 回调。

为了监听房间内的用户变化，需注册 roomUserUpdate 回调，已登录房间内用户的新增和删除都会触发该回调，开发者可以根据实际需要在回调中实现自己的业务逻辑。

回调中 “updateType” 参数指明了房间内用户变化的类 型，该参数取值如下：

用户变化类型枚举值说明
用户新增ADD房间内用户增加（即加入房间），“userList” 为新增的用户列表
用户减少DELETE房间内用户减少（即退出房间），“userList” 为减少的用户列表

用户首次登录房间时，若此房间内已存在其他用户，该新登录用户会通过此回调接收到新增类型的用户列表，即 “updateType” 为 “ADD” 的回调，该用户列表为房间内已存在的用户。

zg.on('roomUserUpdate', (roomID, updateType, userList) => {
    console.log('roomUserUpdate roomID ', roomID, streamList);
    if (updateType === 'ADD') {
        // update view
    } else if(updateType == 'DELETE') {
        // update view
    }
});

2）多人语音聊天监听房间内的流变化

当某条流被删除时，如果开发者正在调用 startPlayingStream 接口拉取该流，请调用 stopPlayingStream 接口停止拉流，否则 SDK 会报拉流错误。

为监听房间内的流变化，需注册 roomStreamUpdate 回调，已登录房间内流的新增和删除都会触发该回调，开发者可以根据实际需要在回调中实现自己的业务逻辑。

回调中 “updateType” 参数指明了房间内流变化的类型，该参数取值如下：

流变化类型枚举值说明
流新增ADD房间内流增加，“streamList” 为新增的流列表
流减少DELETE房间内流减少，“streamList” 为减少的流列表

用户首次登录房间时，若此房间内存在其他用户正在推流，会接收到流新增列表，即 “updateType” 为 “ADD” 的回调。

zg.on('roomStreamUpdate', (roomID, updateType, streamList) => {
    console.log('roomStreamUpdate roomID ', roomID, streamList);
    if(updateType === 'ADD') {
            // update view
    } else if(updateType == 'DELETE') {
            // update view
    }
});

3.4推流、拉流、登录房间其他操作

请参考 快速开始 - 实现流程 依次完成登录房间、推流和拉流相关操作。

四、API 参考列表

方法描述
ZegoExpressEngine初始化 Engine
roomStreamUpdate房间内流变化回调
roomUserUpdate房间内用户变化回调
loginRoom登录房间
createStream创建流
startPublishingStream开始推流
startPlayingStream开始拉流
stopPublishingStream停止推流
stopPlayingStream停止拉流
logoutRoom退出房间

五、关键避坑点（必看）

  • 浏览器权限： 必须 HTTPS 环境（localhost 可测试），否则无法获取摄像头/麦克风；

  • 监听顺序： 必须先绑定 roomUserUpdate、roomStreamUpdate，再登录房间；

  • userUpdate： 登录房间时必须设置 userUpdate: true，否则收不到用户进出通知；

  • 资源释放：离开房间、组件卸载时，必须停止推拉流、销毁流，避免占用设备；

  • SDK 版本： 3.6.0+ 版本，server 可传空字符串；低版本需填写正确 Server 地址

六、总结

综上，基于ZEGO SDK与Vue 框架，可快速落地Web端多人音视频聊天功能，核心依托「创建引擎→开启用户通知→监听回调→推拉流」四大关键步骤，复制本文实操代码、替换 ZEGO配置即可快速上线，适配视频会议、在线小班课等多类高频场景，同时避开核心踩坑点，兼顾稳定性与开发效率

☞获取Demo

获取本文的Demo、开发文档、技术支持。

获取SDK的商务活动、热门产品。

注册即构ZEGO开发者帐号，快速开始。

avatar
文章
阅读
粉丝