如何使用 Uni-app 实现视频聊天（源码，支持安卓、iOS）

如今，使用 Uni-app 开发手机端 APP 已十分普遍。同一套代码可打包成 Android App 和 iOS App，相较于原生开发，能节省可观的人力成本。那么，怎样利用 Uni-app 开发视频聊天软件或视频会议软件呢？本文将详细介绍如何基于 OMCS 在 Uni-app 中快速搭建视频聊天程序。

一、准备工作

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。

   • 修改 package.json 配置文件中插件的 name 及 id 为 omcs - plugin。
   • 进行 android 插件配置。
   • 进行 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 存放对方视频图像，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 属性判断是否为自己预览的摄像头。注意，video 页面必须为 nvue 页面才能使用该控件。

   <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>

   4. 在 video 页面 OnLoad 初始化方法中，定义 CameraConnector 和 MicrophoneConnector 连接器连接目标用户的摄像头和话筒，并预定连接结束和断开事件。注意，CameraConnector 连接器需在 OnLoad 初始化时创建。

   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
           );
       }
   }

   5. 在 video 页面【开始连接对方】按钮点击事件中调用连接器的 beginConnect 方法。调用 CameraConnector 连接器的 beginConnect 方法前需执行 UniCameraPanel 控件的 SetVideo 方法。

   contentOtherBtnClick() {
       if (Boolean(Number(this.query.openCamera))) {
           this.cameraConnector.beginConnect();
       }
       if (Boolean(Number(this.query.openMic))) {
           this.microphoneConnector.beginConnect();
       }
   }
   
   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 方法，取消预定事件，调用多媒体管理器的 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 文件，下载后解压，双击 exe 即可运行：OMCS 服务端可执行程序。Uniapp 版本的 Demo 还能与 PC 版本（Windows、银河麒麟、统信 UOS）的 Demo 进行音视频通话，PC 版可前往指定位置下载。