uniapp实现多人视频聊天(uniapp音视频开发系列9)

本文展示如何使用 ZEGO uniapp实时音视频 SDK 构造多人视频聊天场景，即实现多对多实时音视频互动。用户可在房间内与其余用户进行实时视频通话，互相推拉流。该场景可用于多人实时视频聊天、视频会议等。

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

• 已在项目中集成 SDK，实现基本的实时音视频功能，详情请参考 快速开始 – 集成 和 快速开始 – 实现视频通话。
• 已在 ZEGO 控制台 创建项目，并申请有效的 AppID 和 AppSign。

想先了解SDK功能，跑一个demo测试的，可以查看文章uniapp音视频通话示例源码运行指引(uniapp音视频开发系列1)。

uniapp实现多人视频聊天步骤

本节将介绍如何使用 ZEGO uniapp实时音视频 SDK 实现多人视频聊天。

• 多人视频聊天的流程图如下：

• API 调用时序图如下：

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

创建引擎

定义 SDK 引擎对象，调用 createEngineWithProfile 接口，将申请到的 AppID 和 AppSign 传入参数 “appID” 和 “appSign”，创建引擎单例对象。

/** 定义 SDK 引擎对象 */
let engine = undefine;

/** 创建引擎，AppID 和 AppSign 由 ZEGO 分配给各 App；为了安全考虑，建议将 AppSign 存储在 App 的业务后台，需要使用时从后台获取；采用通用场景*/
const profile = {
appID : xxx,
appSign : "xxx",
scenario : 0
};

engine = await ZegoExpressEngine.createEngineWithProfile(profile)

开启房间内用户变化通知

开发者需在每位用户登录房间时将 ZegoRoomConfig 中的 “isUserStatusNotify” 设为 “true” ，用于接收其他用户进出房间的回调通知。

// 登录房间
this.engine.loginRoom(roomID, user, {isUserStatusNotify: true});

设置事件通知回调

为实现多人视频聊天功能，需要监听房间内用户和流的增减并做出相应处理，可通过 on 设置相关回调。

1 监听房间内的用户变化

注册 roomUserUpdate 回调，用于监听房间内的用户变化，已登录房间内用户的新增和删除都会触发该回调。

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

用户变化类型	枚举值	说明
用户新增	ZegoUpdateType.Add	房间内用户增加，“userList” 为新增的用户列表。
用户减少	ZegoUpdateType.Delete	房间内用户减少，“userList” 为减少的用户列表。

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

this.engine.on("roomUserUpdate", (roomID, updateType, userList) => {
   // 在这里更新 UI 或执行其他操作
});

2 监听房间内的流变化

为监听房间内的流变化，需注册 roomStreamUpdate 回调，房间内其他用户新增或删除流时将触发此回调通知变更的流列表。

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

流变化类型	枚举值	说明
流新增	ZegoUpdateType.Add	房间内流增加，“streamList” 为新增的流列表。
流减少	ZegoUpdateType.Delete	房间内流减少，“streamList” 为减少的流列表。

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

this.engine.on("roomStreamUpdate", (roomID, updateType, streamList) => {
    // 在这里更新 UI 或执行其他操作
});

推流

1 开始推流

调用 startPublishingStream 接口，传入流 ID 参数 “streamID”，向远端用户发送本端的音视频流。

可在 uni-app 项目的 Web 环境中调用 startPublishingStream 接口，调用成功会返回一个 MediaStream 本地流对象，开发者可以用返回的 MediaStream 赋值给 video 元素的 srcObject 属性播放所推的流。

/** 开始推流  APP-PULL stream无值， Web有值，为MediaStream*/
const stream = await ZegoExpressEngine.instance().startPublishingStream("streamID");

2 监听推流后的事件回调

根据实际应用需要，在推流后监听想要关注的事件通知，比如推流状态更新等。

publisherStateUpdate：推流状态更新回调，调用推流接口成功后，当推流状态发生变更，如出现网络中断导致推流异常等情况，SDK 在重试推流的同时，会通过该回调通知。

ZegoExpressEngine.instance().on("publisherStateUpdate", (streamID, state, errorCode, extendedData) => {
    // 调用推流接口成功后，当推流器状态发生变更，如出现网络中断导致推流异常等情况，SDK在重试推流的同时，会通过该回调通知
    //....
});

拉流

1. 开始拉流

调用 startPlayingStream 接口，根据传入的流 ID 参数 “streamID”，拉取远端推送的音视频流。

关于远端视频流视图：

• 在 uni-app 的 App 环境中，若 startPlayingStream 调用成功，则无返回值，可使用 <zego-remote-view> 标签设置远端视频流视图。
• 在 uni-app 的 Web 环境中，若 startPlayingStream 调用成功，会返回一个 MediaStream 对象，开发者可以用返回的 MediaStream 赋值给 video 元素的 srcObject 属性设置远端视频流视图。

<template>
    <!-- #ifdef APP-PLUS -->
    <zego-remote-view :streamID="playStreamID" style="height: 403.84rpx;flex: 1"></zego-remote-view>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <video id="remote_video" style="height: 403.84rpx;flex: 1;"  autoplay playsinline :muted="true"></video>
    <!-- #endif -->
</template>

js部分:
/** 开始拉流 */
this.playStreamID = "StreamID_1"
const stream = await ZegoExpressEngine.instance().startPlayingStream(this.playStreamID)
// #ifdef H5
document.querySelector("#remote_video video").srcObject = stream
// #endif

2 监听拉流后的事件回调

根据实际应用需要，在拉流后监听想要关注的事件通知，比如拉流状态更新等。

playerStateUpdate：拉流状态更新回调，调用拉流接口成功后，当拉流状态发生变更，如出现网络中断导致推流异常等情况，SDK 在重试拉流的同时，会通过该回调通知。

ZegoExpressEngine.instance().on("playerStateUpdate", (streamID, state, errorCode, extendedData) => {
    /** 调用拉流接口成功后，当拉流器状态发生变更，如出现网络中断导致推流异常等情况，SDK在重试拉流的同时，会通过该回调通知 */
    //....
});

体验视频聊天功能

在真机中运行项目，运行成功后，可以看到本端视频画面。

为方便体验，ZEGO 提供了一个 Web 端调试示例，在该页面下，输入相同的 AppID、RoomID，输入一个不同的 UserID，即可加入同一房间与真机设备互通。当成功开始音视频通话时，可以听到远端的音频，看到远端的视频画面。

停止推拉流

1. 停止推流/预览

调用 stopPublishingStream 接口停止发送本地的音视频流，结束通话。

/** 停止推流 */
ZegoExpressEngine.instance().stopPublishingStream();

如果启用了本地预览，开发者可以在停止推流后根据业务需要调用 stopPreview 接口停止预览。

/** 停止本地预览 */
ZegoExpressEngine.instance().stopPreview();

2. 停止拉流

调用 stopPlayingStream 接口，停止拉取远端的音视频流。

/** 停止拉流 */
ZegoExpressEngine.instance().stopPlayingStream("streamID");

3. 退出房间

调用 logoutRoom 接口退出房间，本端会收到 roomStateUpdate 回调通知调用结果，并停止其所有推拉流以及本地预览。

/** 退出房间 */
ZegoExpressEngine.instance().logoutRoom('room1');

销毁引擎

调用 destroyEngine 接口销毁引擎，用于释放 SDK 使用的资源。

/** 销毁引擎 */
ZegoExpressEngine.destroyEngine();

小结

这是uniapp音视频开发系列的最后一篇，该系列介绍了ZEGO uniapp实时音视频SDK部分功能。总之，不管做音视频通话还是直播，涉及到的推拉流从采集、前处理、编解码、渲染、播放等各种功能都无需重复造轮子，能够让开发者在短时间内构建出拥有完美音视频体验的产品和服务。

最后，系列文章可通过标签“uniapp音视频开发”查看。