uniapp如何实现多人视频通话

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

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

想先了解SDK功能,跑一个demo测试的,可以查看文档uniapp音视频通话示例源码运行指引

uniapp实现多人视频通话步骤

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

  • 多人视频通话的流程图如下:
uniapp如何实现多人视频通话
  • API 调用时序图如下:
uniapp如何实现多人视频通话

说明: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多人视频通话流程结束。关于uniapp音视频开发方面的疑问欢迎随时联系我们。

原创文章,作者:ZEGO即构科技,如若转载,请注明出处:https://market-blogs.zego.im/reports-technique/804/

(0)
上一篇 5月 26, 2023 6:00 下午
下一篇 5月 30, 2023 7:44 上午

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注