如何使用 Uni-app 實(shí)現(xiàn)視頻聊天(源碼,支持安卓、iOS)
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
現(xiàn)在使用Uni-app開發(fā)手機(jī)端APP已經(jīng)變得很普遍,同一套代碼就可以打包成Android App 和 iOS App,相比原生開發(fā),可以節(jié)省客觀的人力成本。那么如何使用Uni-app來開發(fā)視頻聊天軟件或視頻會(huì)議軟件了?本文將詳細(xì)介紹在Uni-app中,如何基于OMCS來快速搭建視頻聊天程序。 一、準(zhǔn)備工作1.在Uni-app項(xiàng)目的根目錄下新建如下目錄結(jié)構(gòu),用來存儲(chǔ)Android和iOS原生插件。 2.插件目錄說明 android:在插件android目錄下新建libs目錄,將OMCS原生插件中使用的OMCS非托管庫及jar包放入該目錄下。將OMCS原生插件arr包放入android目錄下 ios:將OMCS原生插件中使用的OMCSFramework.framework及OMCS原生插件OMCSPlugin.framework放到ios目錄下 3.插件配置文件:nativeplugins根目錄下新建package.json文件,詳細(xì)配置說明及模版請(qǐng)參考uni官網(wǎng)uni小程序SDK (1)修改package.json配置文件中插件的name及id為omcs-plugin (2)android插件配置 (3)ios插件配置 4.在uni-app項(xiàng)目配置文件manifest.json中將OMCS原生插件加入項(xiàng)目中 注意:修改配置后,需要重新打包app基座才能生效 二、正式開發(fā)首先,我們?cè)趗ni-app項(xiàng)目中引入OMCS-Uni.js文件,然后在依照如下步驟操作。 1.構(gòu)造并初始化OMCS多媒體設(shè)備管理器。如果要設(shè)置一些配置參數(shù),可以在調(diào)用初始化方法之前通過設(shè)置 multimediaManager 的相關(guān)屬性來完成。 const multimediaManager = MultimediaManagerFactory.GetSingleton(); multimediaManager.initialize( this.userID, this.password, this.serverIP, this.serverPort, (res)=>{ if(res == 'OMCS登錄成功' || res == '登錄成功'){} } ); 2.本demo中,我們定義了一個(gè)簡(jiǎn)單的客戶端home頁面:home.vue ,用于展示OMCS提供的各個(gè)功能。在home頁面的onLoad方法中,我們請(qǐng)求了手機(jī)的音視頻權(quán)限: onLoad(options) { this.query = options; this.loginId = this.query.loginid; MultimediaManagerFactory.GetSingleton().checkPermission(); }, home頁界面如下所示: 頁面上的各個(gè)按鈕,用于演示OMCS提供的各個(gè)多媒體連接器的功能。我們以視訊功能為例,當(dāng)攝像頭和話筒的checkbox都勾選上時(shí),表示連接到目標(biāo)用戶的攝像頭和麥克風(fēng)設(shè)備。點(diǎn)擊“語音視頻”按鈕,將跳轉(zhuǎn)至video頁面: 注意:必須勾選攝像頭,并進(jìn)入video頁面后(此時(shí)將看到自己攝像頭的預(yù)覽畫面),其他人才可以連接到自己的攝像頭。 3.開始連接 (1)當(dāng)點(diǎn)擊【開始連接對(duì)方】按鈕時(shí),將連接到對(duì)方攝像頭和麥克風(fēng) (2)我們封裝了一個(gè)組件UniCameraPanel.nvue,其中使用了OMCS原生控件OMCSSurfaceView作為存放對(duì)方視頻圖像的容器,OMCS原生控件CameraSurfaceView作為存放自己視頻預(yù)覽的容器: <template> <CameraSurfaceView
ref="camera_self_panel_view"
v-if="isSelf"
class="selfVideoView"
></CameraSurfaceView>
<OMCSSurfaceView
ref="camera_other_panel_view"
v-if="!isSelf"
class="otherVideoView"
></OMCSSurfaceView>
</template> (3)video頁面使用了UniCameraPanel.nvue控件,根據(jù)isSelf屬性判斷是否為自己預(yù)覽的攝像頭: <div class="otherView" v-if="isVideo" @click.stop="changeShowIcon"> <UniCameraPanelVue
:isSelf="false"
ref="otherCameraPanel"
class="otherVideoView"
></UniCameraPanelVue>
</div>
<div class="selfView" v-if="isVideo" >
<UniCameraPanelVue
:isSelf="true"
ref="selfVideoView"
class="selfVideoView"
></UniCameraPanelVue>
</div> 注意:video頁面必須為nvue頁面才能使用UniCameraPanel.nvue控件 (4)在video頁面OnLoad初始化方法中,我們分別定義了CameraConnector和MicrophoneConnector連接器用于連接目標(biāo)用戶的攝像頭和話筒,并通過setConnectorEventListener預(yù)定了CameraConnector和MicrophoneConnector的連接結(jié)束事件和連接斷開事件 onLoad(options) { this.query = options; this.othername = this.query.destUserID; this.username = this.query.username; this.isAndroid = uni.getSystemInfoSync().platform == 'android'; this.isVideo = Boolean(Number(this.query.openCamera)); if(this.isVideo){ this.cameraConnector = new CameraConnector(this.query.destUserID); this.cameraConnector.setConnectorEventListener( this.CameraConnector_ConnectEnded, this.CameraConnector_DisConnected ); this.cameraConnector.setVideoDrawMode(VideoDrawMode.Scale); }; if(Boolean(Number(this.query.openMic))){ this.microphoneConnector = new MicrophoneConnector(this.query.destUserID); this.microphoneConnector.setConnectorEventListener( this.MicrophoneConnector_ConnectEnded, this.MicrophoneConnector_DisConnected ); }; } 注意:CameraConnector連接器需要在OnLoad初始化時(shí)創(chuàng)建 (5)在video頁面【開始連接對(duì)方】按鈕點(diǎn)擊事件中調(diào)用了CameraConnector和MicrophoneConnector連接器的beginConnect方法: contentOtherBtnClick(){ if(Boolean(Number(this.query.openCamera))){ this.cameraConnector.beginConnect(); }; if(Boolean(Number(this.query.openMic))){ this.microphoneConnector.beginConnect(); }; } 注意: 在調(diào)用CameraConnector連接器的beginConnect方法之前需要執(zhí)行UniCameraPanel控件的SetVideo方法: SetVideo(_cameraConnector){ try{ if(_cameraConnector){ if(this.isSelf){ this.$refs.camera_self_panel_view.setVideo(); }else{ this.cameraConnector = _cameraConnector; const userID = this.cameraConnector.destUserID; this.videoDrawMode = this.cameraConnector.videoDrawMode; this.$refs.camera_other_panel_view.setVideo({destUserID:userID}); } } }catch(e){ console.log(e) } } 4.當(dāng)退出video頁面或者主動(dòng)斷開連接時(shí),需要調(diào)用CameraConnector連接器和MicrophoneConnector連接器的disconnect方法,并且通過removeConnectorEventListener方法取消預(yù)定的事件,最后還需要調(diào)用多媒體管理器的closeCamera方法斷開自己的預(yù)覽攝像頭 closeVideo(){ if(this.cameraConnector){ this.cameraConnector.disconnect(); this.cameraConnector.removeConnectorEventListener(); this.cameraConnector = null; } if(this.microphoneConnector){ this.microphoneConnector.disconnect(); this.microphoneConnector.removeConnectorEventListener(); this.microphoneConnector = null; } this.isShowVideo = false; MultimediaManagerFactory.GetSingleton().closeCamera(); }, 三、源碼下載該Demo的源碼下載地址如下:OMCS.UniappDemo.rar(Android、iOS) 至于服務(wù)端,我們已經(jīng)打包好了exe文件,可以下載后直接雙擊運(yùn)行: OMCS 服務(wù)端可執(zhí)行程序(解壓后,雙擊exe即可運(yùn)行) Uniapp版本的Demo還可以與PC版本(Windows、銀河麒麟、統(tǒng)信UOS)的Demo進(jìn)行音視頻通話,PC版可以轉(zhuǎn)到此處下載。 閱讀原文:https://www.cnblogs.com/zhuweisky/p/18734018 該文章在 2025/2/24 18:11:46 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |