如何使用 Uni-app 實現視頻聊天（源碼，支持安卓、iOS）
現在使用Uni-app開發手機端APP已經變得很普遍，同一套代碼就可以打包成Android App 和 iOS App，相比原生開發，可以節省客觀的人力成本。那么如何使用Uni-app來開發視頻聊天軟件或視頻會議軟件了？本文將詳細介紹在Uni-app中，如何基于OMCS來快速搭建視頻聊天程序。
一、準備工作
1.在Uni-app項目的根目錄下新建如下目錄結構，用來存儲Android和iOS原生插件。
2.插件目錄說明
android：在插件android目錄下新建libs目錄，將OMCS原生插件中使用的OMCS非托管庫及jar包放入該目錄下。將OMCS原生插件arr包放入android目錄下
ios：將OMCS原生插件中使用的OMCSFramework.framework及OMCS原生插件OMCSPlugin.framework放到ios目錄下
3.插件配置文件：nativeplugins根目錄下新建package.json文件，詳細配置說明及模版請參考uni官網uni小程序SDK
（1）修改package.json配置文件中插件的name及id為omcs-plugin
（2）android插件配置
（3）ios插件配置
4.在uni-app項目配置文件manifest.json中將OMCS原生插件加入項目中
注意：修改配置后，需要重新打包app基座才能生效
二、正式開發
首先，我們在uni-app項目中引入OMCS-Uni.js文件，然后在依照如下步驟操作。
1.構造并初始化OMCS多媒體設備管理器。如果要設置一些配置參數，可以在調用初始化方法之前通過設置 multimediaManager 的相關屬性來完成。
const multimediaManager = MultimediaManagerFactory.GetSingleton(); multimediaManager.initialize( this.userID, this.password, this.serverIP, this.serverPort, (res)=>{ if(res == 'OMCS登錄成功' || res == '登錄成功'){} } );
2.本demo中，我們定義了一個簡單的客戶端home頁面：home.vue ，用于展示OMCS提供的各個功能。在home頁面的onLoad方法中，我們請求了手機的音視頻權限：
onLoad(options) { this.query = options; this.loginId = this.query.loginid; MultimediaManagerFactory.GetSingleton().checkPermission(); },
home頁界面如下所示：
頁面上的各個按鈕，用于演示OMCS提供的各個多媒體連接器的功能。我們以視訊功能為例，當攝像頭和話筒的checkbox都勾選上時，表示連接到目標用戶的攝像頭和麥克風設備。點擊“語音視頻”按鈕，將跳轉至video頁面：
注意：必須勾選攝像頭，并進入video頁面后（此時將看到自己攝像頭的預覽畫面），其他人才可以連接到自己的攝像頭。
3.開始連接
（1）當點擊【開始連接對方】按鈕時，將連接到對方攝像頭和麥克風
（2）我們封裝了一個組件UniCameraPanel.nvue，其中使用了OMCS原生控件OMCSSurfaceView作為存放對方視頻圖像的容器，OMCS原生控件CameraSurfaceView作為存放自己視頻預覽的容器：
<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控件，根據isSelf屬性判斷是否為自己預覽的攝像頭：
<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連接器用于連接目標用戶的攝像頭和話筒，并通過setConnectorEventListener預定了CameraConnector和MicrophoneConnector的連接結束事件和連接斷開事件
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初始化時創建
（5）在video頁面【開始連接對方】按鈕點擊事件中調用了CameraConnector和MicrophoneConnector連接器的beginConnect方法：
contentOtherBtnClick(){ if(Boolean(Number(this.query.openCamera))){ this.cameraConnector.beginConnect(); }; if(Boolean(Number(this.query.openMic))){ this.microphoneConnector.beginConnect(); }; }
注意：
在調用CameraConnector連接器的beginConnect方法之前需要執行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.當退出video頁面或者主動斷開連接時，需要調用CameraConnector連接器和MicrophoneConnector連接器的disconnect方法，并且通過removeConnectorEventListener方法取消預定的事件，最后還需要調用多媒體管理器的closeCamera方法斷開自己的預覽攝像頭
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）
至于服務端，我們已經打包好了exe文件，可以下載后直接雙擊運行：
OMCS 服務端可執行程序（解壓后，雙擊exe即可運行）
Uniapp版本的Demo還可以與PC版本（Windows、銀河麒麟、統信UOS）的Demo進行音視頻通話，PC版可以轉到此處下載。
浙公網安備 33010602011771號