“一套代碼，多端運行”是很多開發(fā)團隊的夢想鳄乏。ZEGO SDK基于uni-app跨平臺框架支持iOS跷车、Android、Windows橱野、macOS姓赤、HarmonyOS、Web仲吏、小程序并支持平臺間互通不铆，快速實現(xiàn)搭建多端音視頻通話，大大降低開發(fā)和學習成本裹唆。
本文將引導快速創(chuàng)建和運行第一個uni-app+RTC項目誓斥，適合想要快速完成多端共用音視頻項目的開發(fā)者；
1 準備環(huán)境
在開始集成 ZEGO Express SDK 前许帐，請確保開發(fā)環(huán)境滿足以下要求：
HBuilderX 3.0.0 或以上版本劳坑。
準備 iOS / Android 設備，版本要求如下：
iOS 9.0 或以上版本且支持音視頻的 iOS 設備成畦。
Android 4.4 或以上版本且支持音視頻的 Android 設備距芬。
iOS / Android 設備已經連接到 Internet。
2 項目準備
2.1 創(chuàng)建項目
進入即構官網循帐，在【ZEGO控制臺】創(chuàng)建項目框仔，并申請有效的 AppID，這一步很關鍵拄养，appid為應用的唯一標識离斩，如身份證號，是應用的身份證明，用于明確你的項目及組織身份跛梗。zego提供的服務也是基于APP ID寻馏；
App ID的獲取方式很簡單，只需3～5分鐘核偿，在即構官網-我的項目-創(chuàng)建即可诚欠。創(chuàng)建的項目信息可用于SDK的集成和配置；
2.2 Token 鑒權
登錄房間時必須 使用 Token 鑒權 漾岳，可參考 Token 鑒權教程
為了方便開發(fā)階段的調試聂薪，開發(fā)者可直接在 ZEGO 控制臺獲取臨時 Token（有效期為 24 小時） 來使用，詳情請參考 控制臺（新版） - 項目管理 中的 “項目信息”蝗羊。
3 集成
3.1 項目設置
開始集成前，可參考如下步驟設置你的項目仁锯；
如已有項目耀找，本步驟可忽略。
如需新建項目业崖，可按照以下步驟創(chuàng)建你的新項目：
1.啟動 HBuilderX野芒，選擇“文件 > 新建 > 項目”菜單。
2.在出現(xiàn)的表單中双炕，選擇 “uni-app” 平臺狞悲，并填寫項目名稱。
3.單擊“創(chuàng)建”妇斤，即可創(chuàng)建項目摇锋。
3.2 導入 SDK
在 ZEGO 官網下載 SDK
1.下載 Express-Video SDK 到本地，解壓縮 “zego-ZegoExpressUniAppSDK” 文件站超。
2.將解壓縮后的文件夾直接復制到項目工程根目錄下的 “nativeplugins” 文件夾荸恕，如果沒有該目錄，請手動創(chuàng)建死相。
3.3 在 uni-app 項目中導入插件
1.單擊項目目錄的 “manifest.json” 文件后融求，單擊“App原生插件配置”中的“選擇本地插件”或“選擇云端插件”。
2.在彈出的選擇框中算撮，選擇 “ZegoExpress 音視頻 SDK” 后生宛，單擊“確認”，即添加成功肮柜。
3.4 自定義調試基座
2.4.1 制作自定義調試基座
1.選擇“運行 > 運行到手機或模擬器 > 制作自定義調試基座”菜單陷舅。
2.在彈出的界面中，按照 uni-app 教程审洞，填寫相關信息蔑赘，并單擊“打包”進行云打包。
打包成功后，控制臺會收到 uni-app 的相關提示缩赛。
3.4.2 切換運行基座為自定義調試基座
自定義調試基座選擇“運行 > 運行到手機或模擬器 > 運行基座選擇 > 自定義調試基座”菜單耙箍。
4 集成 JS 封裝層
1.導入 JS 封裝層。
在插件市場的 ZegoExpressEngine 音視頻插件（JS） 界面單擊右側的“使用 HBuilderX導入插件”酥馍。
導入的 JS 封裝層將存儲在 “components” 目錄中辩昆。
1.導入后可以在業(yè)務代碼中引入 JS 封裝層，并調用 Express 相關接口旨袒，示例如下：
import ZegoExpressEngine from '@/components/zego-ZegoExpressUniApp-JS/lib/ZegoExpressEngine';
5 實現(xiàn)流程
用戶通過 ZEGO Express SDK 進行視頻通話的基本流程為：
用戶 A汁针、B 加入房間，用戶 B 預覽并將音視頻流推送到 ZEGO 云服務（推流）砚尽，用戶 A 收到用戶 B 推送音視頻流的通知之后施无，在通知中播放用戶 B 的音視頻流（拉流）。
整個音視頻通話推拉流過程的 API 調用時序如下圖：
5.1 創(chuàng)建引擎
1. 創(chuàng)建界面
在創(chuàng)建引擎之前必孤，ZEGO 推薦開發(fā)者添加以下界面元素猾骡，方便實現(xiàn)基本的實時音視頻功能。
- 本地預覽窗口
- 遠端視頻窗口
- 結束按鈕
2. 創(chuàng)建引擎
調用 createEngineWithProfile 接口敷搪，將申請到的 AppID 傳入參數(shù) “appID”兴想，創(chuàng)建引擎單例對象。
如果需要注冊回調方法赡勘，開發(fā)者可根據(jù)實際需要嫂便，實現(xiàn) ZegoEventListener 中的某些方法，創(chuàng)建引擎后可通過調用 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 的參數(shù)由您本地生成，但是需要滿足以下條件：
- 同一個 AppID 內践樱，需保證 “roomID” 全局唯一蔚龙。
- 同一個 AppID 內，需保證 “userID” 全局唯一映胁，建議開發(fā)者將 “userID” 與自己業(yè)務的賬號系統(tǒng)進行關聯(lián)木羹。
let roomConfig = {};
//token 由用戶自己的服務端生成，為了更快跑通流程解孙，也可以通過即構控制臺獲取臨時的音視頻 token
roomConfig.token = "xxxx";
// 只有傳入 “isUserStatusNotify” 參數(shù)取值為 “true” 的 ZegoRoomConfig坑填，才能收到 onRoomUserUpdate 回調。
roomConfig.isUserStatusNotify = true;
// 登錄房間
// 開始登錄房間
ZegoExpressEngine.instance().loginRoom('room1', {'userID': 'id1', 'userName': 'user1'}, roomConfig);
2. 監(jiān)聽登錄房間后的事件回調
可根據(jù)實際應用需要弛姜，在登錄房間后監(jiān)聽想要關注的事件通知脐瑰，比如房間狀態(tài)更新、用戶狀態(tài)更新廷臼、流狀態(tài)更新等苍在。
- roomStateUpdate：房間狀態(tài)更新回調绝页，登錄房間后，當房間連接狀態(tài)發(fā)生變更（如出現(xiàn)房間斷開寂恬，登錄認證失敗等情況）续誉，SDK 會通過該回調通知。
- roomUserUpdate：用戶狀態(tài)更新回調初肉，登錄房間后酷鸦，當房間內有用戶新增或刪除時，SDK 會通過該回調通知牙咏。
- 只有調用 loginRoom 接口登錄房間時傳入 ZegoRoomConfig 配置臼隔，且 “isUserStatusNotify”參數(shù)取值為 “true” 時，用戶才能收到 roomUserUpdate 回調妄壶。
- roomStreamUpdate：流狀態(tài)更新回調摔握，登錄房間后，當房間內有用戶新推送或刪除音視頻流時丁寄，SDK 會通過該回調通知氨淌。
// 以下為常用的房間相關回調
ZegoExpressEngine.instance().on('roomStateUpdate', (roomID, state, errorCode, extendedData) => {
// 房間狀態(tài)更新回調，登錄房間后狡逢，當房間連接狀態(tài)發(fā)生變更（如出現(xiàn)房間斷開，登錄認證失敗等情況）拼卵，SDK會通過該回調通知
}); ;
ZegoExpressEngine.instance().on('roomUserUpdate', (roomID, updateType, userList) => {
// 用戶狀態(tài)更新奢浑，登錄房間后，當房間內有用戶新增或刪除時腋腮，SDK會通過該回調通知
});
ZegoExpressEngine.instance().on('roomStreamUpdate', (roomID, updateType, streamList) => {
// 流狀態(tài)更新雀彼，登錄房間后，當房間內有用戶新推送或刪除音視頻流時即寡，SDK會通過該回調通知
});
5.3 推流
1. 開始推流
調用 startPublishingStream 接口徊哑，傳入流 ID 參數(shù) “streamID”，向遠端用戶發(fā)送本端的音視頻流聪富。
/** 開始推流 */
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. 監(jiān)聽推流后的事件回調
根據(jù)實際應用需要梢莽，在推流后監(jiān)聽想要關注的事件通知，比如推流狀態(tài)更新等奸披。
publisherStateUpdate：推流狀態(tài)更新回調昏名，調用推流接口成功后，當推流狀態(tài)發(fā)生變更阵面，如出現(xiàn)網絡中斷導致推流異常等情況轻局，SDK 在重試推流的同時，會通過該回調通知。
ZegoExpressEngine.instance().on("publisherStateUpdate", (streamID, state, errorCode, extendedData) => {
// 調用推流接口成功后襟士，當推流器狀態(tài)發(fā)生變更跪呈，如出現(xiàn)網絡中斷導致推流異常等情況，SDK在重試推流的同時夫壁，會通過該回調通知
//....
});
5.4 拉流
1. 開始拉流
使用 <zego-remote-view> 標簽設置遠端視頻流視圖拾枣，調用 startPlayingStream 接口，根據(jù)傳入的流 ID 參數(shù) “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. 監(jiān)聽拉流后的事件回調
根據(jù)實際應用需要，在拉流后監(jiān)聽想要關注的事件通知邑茄，比如拉流狀態(tài)更新等姨蝴。
playerStateUpdate：拉流狀態(tài)更新回調，調用拉流接口成功后肺缕，當拉流狀態(tài)發(fā)生變更左医，如出現(xiàn)網絡中斷導致推流異常等情況，SDK 在重試拉流的同時同木，會通過該回調通知浮梢。
ZegoExpressEngine.instance().on("playerStateUpdate", (streamID, state, errorCode, extendedData) => {
/** 調用拉流接口成功后，當拉流器狀態(tài)發(fā)生變更彤路，如出現(xiàn)網絡中斷導致推流異常等情況秕硝，SDK在重試拉流的同時，會通過該回調通知 */
//....
});
5.5 體驗實時音視頻功能
在真機中運行項目洲尊，運行成功后远豺，可以看到本端視頻畫面。
為方便體驗坞嘀，ZEGO 提供了一個 Web 端調試示例躯护，在該頁面下，輸入相同的 AppID丽涩、RoomID棺滞、Server 地址和 Token，即可加入同一房間與真機設備互通矢渊。當成功開始音視頻通話時检眯，可以聽到遠端的音頻，看到遠端的視頻畫面昆淡。
5.6 停止推拉流
1. 停止推流/預覽
調用 stopPublishingStream 接口停止發(fā)送本地的音視頻流锰瘸，結束通話。
/** 停止推流 */
ZegoExpressEngine.instance().stopPublishingStream();
如果啟用了本地預覽昂灵，開發(fā)者可以在停止推流后根據(jù)業(yè)務需要調用 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項目了，可以與小伙伴多端進行音視頻通話測試含潘。
即構助力企業(yè)一周快速搭建音視頻通話饲做、秀場直播、語聊房遏弱、K歌房等場景盆均，提供多種解決方案，同時即構每月贈送10000分鐘免費時長漱逸。
獲取更多文檔泪姨、Demo、技術幫助
獲取本文的Demo饰抒、開發(fā)文檔肮砾、技術支持，訪問即構文檔中心
了解商務活動袋坑、熱門產品仗处，??點擊聯(lián)系商務；
注冊即構ZEGO開發(fā)者帳號咒彤，快速開始疆柔。
