uniapp实现多人视频聊天

本文展示如何使用 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 监听房间内的用户变化

回调中 “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音视频开发”查看。

本文转载自实时互动网，文章出处《uniapp实现多人视频聊天(uniapp音视频开发系列9)》

uniapp实现多人视频聊天相关推荐

实践：《从头到脚撸一个多人视频聊天 — 前端 WebRTC 实战（一）》
2019独角兽企业重金招聘Python工程师标准>>> 请先阅读原文,链接:从头到脚撸一个多人视频聊天 - 前端 WebRTC 实战(一),本文只涉及实践过程中的问题 1.video ...
Android 集成 Agora SDK 快速体验 RTC 版多人视频聊天|掘金技术征文
RTC (Real-Time Communication) 作为实时通讯领域的"新贵",在互动直播.远程控制.多人视频会议.屏幕共享等领域广受好评,如果你还不了解 RTC ,Tak ...
WebRTC实现多人视频聊天
写在前面实现房间内人员的视频聊天,由于并未很完善,所以需要严格按照步骤来,当然基于此完善,就是时间的问题了. 架构整个设计架构如下: 图片来自于参考博文.我使用的是第一种Mesh 架构,无需任何流 ...
【游戏开发实战】Unity从零开发多人视频聊天功能，无聊了就和自己视频聊天（附源码 | Mirror | 多人视频 | 详细教程）
文章目录一.前言二.思考问题与解决方案 1.思考问题 2.解决方案 2.1.Unity中如何开启摄像头并对图像进行采样 2.2.图像如何中转给其他客户端 2.3.如何实现清晰度切换 2.4.客户端 ...
教你用WebRTC撸一个多人视频聊天
之前公司准备用 webRTC 来实现视频聊天,研究了几天,撸了个 demo 出来,(虽然最后并没有采用这项技术,囧),但是还是写一个出来吧! WebRTC简单介绍 WebRTC (Web Real-T ...
(Agora声网)多人视频聊天应用的开发（三）多人聊天
转载于:Android多人视频聊天应用的开发(三)多人聊天-玖哥的书房-51CTO博客 http://blog.51cto.com/dongfeng9ge/2104587 本系列文章结合声网官方在Gi ...
(Agora声网)多人视频聊天应用的开发（二）一对一聊天
转载于:Android多人视频聊天应用的开发(二)一对一聊天-玖哥的书房-51CTO博客 http://blog.51cto.com/dongfeng9ge/2095626 本系列文章结合声网官方在G ...
(Agora声网)多人视频聊天应用的开发（一）快速集成
转载于:Android多人视频聊天应用的开发(一)快速集成-玖哥的书房-51CTO博客 http://blog.51cto.com/dongfeng9ge/2095621 本系列文章结合声网官方在Gi ...
Android多人视频聊天应用的开发（三）多人聊天
在上一篇<Android多人视频聊天应用的开发(二)一对一聊天>中我们学习了如何使用声网Agora SDK进行一对一的聊天,本篇主要讨论如何使用Agora SDK进行多人聊天.主要需要实现 ...