共计 5420 个字符，预计需要花费 14 分钟才能阅读完成。
“一套代码，多端运行”是很多开发团队的幻想。ZEGO SDK 基于 uni-app 跨平台框架反对 iOS、Android、Windows、macOS、HarmonyOS、Web、小程序并反对平台间互通，疾速实现搭建多端音视频通话，大大降低开发和学习老本。
本文将疏导疾速创立和运行第一个 uni-app+RTC 我的项目，适宜想要疾速实现多端共用音视频我的项目的开发者；
1 筹备环境
在开始集成 ZEGO Express SDK 前，请确保开发环境满足以下要求：
HBuilderX 3.0.0 或以上版本。
筹备 iOS / Android 设施，版本要求如下：
iOS 9.0 或以上版本且反对音视频的 iOS 设施。
Android 4.4 或以上版本且反对音视频的 Android 设施。
iOS / Android 设施曾经连贯到 Internet。
2 我的项目筹备
2.1 创立我的项目
进入即构官网，在【ZEGO 控制台】创立我的项目，并申请无效的 AppID，这一步很要害，appid 为利用的惟一标识，如身份证号，是利用的身份证明，用于明确你的我的项目及组织身份。zego 提供的服务也是基于 APP ID；
App ID 的获取形式很简略，只需 3～5 分钟，在即构官网 - 我的我的项目 - 创立即可。创立的我的项目信息可用于 SDK 的集成和配置；
2.2 Token 鉴权
登录房间时必须 应用 Token 鉴权，可参考 Token 鉴权教程
为了不便开发阶段的调试，开发者可间接在 ZEGO 控制台获取长期 Token（有效期为 24 小时）来应用，详情请参考 控制台（新版）– 项目管理 中的“我的项目信息”。
3 集成
3.1 我的项目设置
开始集成前，可参考如下步骤设置你的我的项目；
如已有我的项目，本步骤可疏忽。
如需新建我的项目，可依照以下步骤创立你的新我的项目：
1. 启动 HBuilderX，抉择“文件 > 新建 > 我的项目”菜单。
2. 在呈现的表单中，抉择“uni-app”平台，并填写项目名称。
3. 单击“创立”，即可创立我的项目。
3.2 导入 SDK
在 ZEGO 官网下载 SDK
1. 下载 Express-Video SDK 到本地，解压缩“zego-ZegoExpressUniAppSDK”文件。
2. 将解压缩后的文件夹间接复制到我的项目工程根目录下的“nativeplugins”文件夹，如果没有该目录，请手动创立。
3.3 在 uni-app 我的项目中导入插件
1. 单击我的项目目录的“manifest.json”文件后，单击“App 原生插件配置”中的“抉择本地插件”或“抉择云端插件”。
2. 在弹出的抉择框中，抉择“ZegoExpress 音视频 SDK”后，单击“确认”，即增加胜利。
3.4 自定义调试基座
3.4.1 制作自定义调试基座
1. 抉择“运行 > 运行到手机或模拟器 > 制作自定义调试基座”菜单。
2. 在弹出的界面中，依照 uni-app 教程，填写相干信息，并单击“打包”进行云打包。
打包胜利后，控制台会收到 uni-app 的相干提醒。
3.4.2 切换运行基座为自定义调试基座
自定义调试基座抉择“运行 > 运行到手机或模拟器 > 运行基座抉择 > 自定义调试基座”菜单。
4 集成 JS 封装层
1. 导入 JS 封装层。
在插件市场的 ZegoExpressEngine 音视频插件（JS）界面单击右侧的“应用 HBuilderX 导入插件”。
导入的 JS 封装层将存储在“components”目录中。
1. 导入后能够在业务代码中引入 JS 封装层，并调用 Express 相干接口，示例如下：
import ZegoExpressEngine from '@/components/zego-ZegoExpressUniApp-JS/lib/ZegoExpressEngine';5 实现流程
用户通过 ZEGO Express SDK 进行视频通话的根本流程为：
用户 A、B 退出房间，用户 B 预览并将音视频流推送到 ZEGO 云服务（推流），用户 A 收到用户 B 推送音视频流的告诉之后，在告诉中播放用户 B 的音视频流（拉流）。
整个音视频通话推拉流过程的 API 调用时序如下图：
5.1 创立引擎
1. 创立界面
在创立引擎之前，ZEGO 举荐开发者增加以下界面元素，不便实现根本的实时音视频性能。
- 本地预览窗口
- 远端视频窗口
- 完结按钮
2. 创立引擎
调用 createEngineWithProfile 接口，将申请到的 AppID 传入参数“appID”，创立引擎单例对象。
如果须要注册回调办法，开发者可依据理论须要，实现 ZegoEventListener 中的某些办法，创立引擎后可通过调用 on 接口设置回调。
// 导入
import ZegoExpressEngine from '@/components/zego-ZegoExpressUniApp-JS/lib/ZegoExpressEngine';
// 采纳通用场景
const profile = {
appID : xxx,
scenario : 0
};
ZegoExpressEngine.createEngineWithProfile(profile)5.2 登录房间
1. 登录
你能够调用 loginRoom 接口登录房间。roomID 和 user 的参数由您本地生成，然而须要满足以下条件：
- 同一个 AppID 内，需保障“roomID”全局惟一。
- 同一个 AppID 内，需保障“userID”全局惟一，倡议开发者将“userID”与本人业务的账号零碎进行关联。
let roomConfig = {};
//token 由用户本人的服务端生成，为了更快跑通流程，也能够通过即构控制台获取长期的音视频 token
roomConfig.token = "xxxx";
// 只有传入“isUserStatusNotify”参数取值为“true”的 ZegoRoomConfig，能力收到 onRoomUserUpdate 回调。roomConfig.isUserStatusNotify = true;
// 登录房间
// 开始登录房间
ZegoExpressEngine.instance().loginRoom('room1', {'userID': 'id1', 'userName': 'user1'}, roomConfig);2. 监听登录房间后的事件回调
可依据理论利用须要，在登录房间后监听想要关注的事件告诉，比方房间状态更新、用户状态更新、流状态更新等。
- roomStateUpdate：房间状态更新回调，登录房间后，当房间连贯状态产生变更（如呈现房间断开，登录认证失败等状况），SDK 会通过该回调告诉。
- roomUserUpdate：用户状态更新回调，登录房间后，当房间内有用户新增或删除时，SDK 会通过该回调告诉。
- 只有调用 loginRoom 接口登录房间时传入 ZegoRoomConfig 配置，且“isUserStatusNotify”参数取值为“true”时，用户能力收到 roomUserUpdate 回调。
- roomStreamUpdate：流状态更新回调，登录房间后，当房间内有用户新推送或删除音视频流时，SDK 会通过该回调告诉。
// 以下为罕用的房间相干回调
ZegoExpressEngine.instance().on('roomStateUpdate', (roomID, state, errorCode, extendedData) => {// 房间状态更新回调，登录房间后，当房间连贯状态产生变更（如呈现房间断开，登录认证失败等状况），SDK 会通过该回调告诉}); ;
ZegoExpressEngine.instance().on('roomUserUpdate', (roomID, updateType, userList) => {// 用户状态更新，登录房间后，当房间内有用户新增或删除时，SDK 会通过该回调告诉});
ZegoExpressEngine.instance().on('roomStreamUpdate', (roomID, updateType, streamList) => {// 流状态更新，登录房间后，当房间内有用户新推送或删除音视频流时，SDK 会通过该回调告诉});5.3 推流
1. 开始推流
调用 startPublishingStream 接口，传入流 ID 参数“streamID”，向远端用户发送本端的音视频流。
/** 开始推流 */
ZegoExpressEngine.instance().startPublishingStream("streamID");2. 启动本地预览
如果心愿看到本端画面，可应用 <zego-local-view> 标签设置预览视图，并调用 startPreview 接口启动本地预览。
<template>
<zego-local-view style="height: 403.84rpx;flex: 1;"></zego-local-view>
</template>
js 局部:
/** 开始预览 */
ZegoExpressEngine.instance().startPreview()3. 监听推流后的事件回调
依据理论利用须要，在推流后监听想要关注的事件告诉，比方推流状态更新等。
publisherStateUpdate：推流状态更新回调，调用推流接口胜利后，当推流状态产生变更，如呈现网络中断导致推流异样等状况，SDK 在重试推流的同时，会通过该回调告诉。
ZegoExpressEngine.instance().on("publisherStateUpdate", (streamID, state, errorCode, extendedData) => {
// 调用推流接口胜利后，当推流器状态产生变更，如呈现网络中断导致推流异样等状况，SDK 在重试推流的同时，会通过该回调告诉
//....
});5.4 拉流
1. 开始拉流
应用 <zego-remote-view> 标签设置远端视频流视图，调用 startPlayingStream 接口，依据传入的流 ID 参数“streamID”，拉取远端推送的音视频流。
<template>
<zego-remote-view :streamID="playStreamID" style="height: 403.84rpx;flex: 1"></zego-remote-view>
</template>
js 局部:
/** 开始拉流 */
this.playStreamID = "StreamID_1"
ZegoExpressEngine.instance().startPlayingStream(this.playStreamID)2. 监听拉流后的事件回调
依据理论利用须要，在拉流后监听想要关注的事件告诉，比方拉流状态更新等。
playerStateUpdate：拉流状态更新回调，调用拉流接口胜利后，当拉流状态产生变更，如呈现网络中断导致推流异样等状况，SDK 在重试拉流的同时，会通过该回调告诉。
ZegoExpressEngine.instance().on("playerStateUpdate", (streamID, state, errorCode, extendedData) => {
/** 调用拉流接口胜利后，当拉流器状态产生变更，如呈现网络中断导致推流异样等状况，SDK 在重试拉流的同时，会通过该回调告诉 */
//....
});5.5 体验实时音视频性能
在真机中运行我的项目，运行胜利后，能够看到本端视频画面。
为不便体验，ZEGO 提供了一个 Web 端调试示例，在该页面下，输出雷同的 AppID、RoomID、Server 地址和 Token，即可退出同一房间与真机设备互通。当胜利开始音视频通话时，能够听到远端的音频，看到远端的视频画面。
5.6 进行推拉流
1. 进行推流 / 预览
调用 stopPublishingStream 接口进行发送本地的音视频流，完结通话。
/** 进行推流 */
ZegoExpressEngine.instance().stopPublishingStream();如果启用了本地预览，开发者能够在进行推流后依据业务须要调用 stopPreview 接口进行预览。
/** 进行本地预览 */
ZegoExpressEngine.instance().stopPreview();2. 进行拉流
调用 stopPlayingStream 接口，进行拉取远端的音视频流。
/** 进行拉流 */
ZegoExpressEngine.instance().stopPlayingStream("streamID");3. 退出房间
调用 logoutRoom 接口退出房间，本端会收到 roomStateUpdate 回调告诉调用后果，并进行其所有推拉流以及本地预览。
/** 退出房间 */
ZegoExpressEngine.instance().logoutRoom('room1');5.7 销毁引擎
调用 destroyEngine 接口销毁引擎，用于开释 SDK 应用的资源。
/** 销毁引擎 */
ZegoExpressEngine.destroyEngine();结语：
你曾经实现了第一个 uni-app+RTC 我的项目了，能够与小伙伴多端进行音视频通话测试。
即构助力企业一周疾速搭建音视频通话、秀场直播、语聊房、K 歌房等场景，提供多种解决方案，同时即构每月赠送 10000 分钟收费时长。
获取更多 ZEGO SDK 技术支持：
- 获取本文的 Demo、开发文档、技术支持，拜访即构文档核心
- 近期有开发布局的开发者可上即构官网查看，恰逢即构七周年全线音视频产品 1 折的优惠，分割商务获取 RTC 产品优惠；
